[JS] 공부 - 엘리코딩 JS 5 함수의 선언과 표현

자바스크립트에서는 Function(함수)의 역할이 되게 중요하다.

입력값을 받고 함수에 따라 원하는 결과를 출력한다.

그래서 함수에는 INPUT과 OUTPUT이 있는 게 특징이다.

 

subprogram이라고 불릴 정도로 신경 써서 제작하는 게 좋다.

이 함수는 여러 번 사용할 수 있다는 장점이 있다.

하나의 함수는 한 가지의 일만 하도록 만들어야 한다.

 

함수의 이름을 정하기가 너무 어렵다면 이 함수가 너무 많은 일을

하는 건 아닌지 확인해 보면 좋다.

 

자바스크립트에서 함수는 객체이다. 

객체로 간주되기 때문에 변수에 할당할 수도 있고 파라미터로 전달할 수도 있다.

 

함수의 선언 방법은 다음과 같다.

 

function name(parameter) {
	body
    
    
    return ;
}

함수의 이름, 함수로 전달될 파라미터와 

함수의 기능, 리턴 값을 설정해주면 함수는 완성된다.

 

간단하게 입력받은 매시 지를 출력하는 함수를 만들어 보자.

function message(contents) {
    console.log(contents);
}

message('Hello JavaScript!');

 

이렇게 함수 이름(입력값); 을 입력하여 함수를 호출할 수 있다.

 

 

Parameter

함수의 INPUT값으로 전달되는 파라미터는 함수, 변수, 값 등등

여러 가지를 전달할 수 있다. 

객체를 전달할 때는 객체의 레퍼런스를 전달하는데 이를 통해 객체 안에 있는 

값들을 바꾸는 함수를 만들 수도 있다.

 

function changeName(obj) {
    obj.name = 'changed by function';
}

const myProfile = { name : 'JavaScript'};
console.log(myProfile);
changeName(myProfile);
console.log(myProfile);

이 코드를 실행해보면 myProfile안에 있는 name의 값이 바뀐 것을 볼 수 있다.

 

 

 

Default Parameters (added in ES6)

//Default Parameters (added in ES6)

function showMessage(message, from) {
    console.log(`${message} by ${from}`);
}

showMessage('Hello!');

위의 코드를 실행해보면 showMessage함수에는 두 개의 파라미터를 받지만 

호출할 때 하나의 파라미터만을 넣었다. 그래서 undefined로 출력이 되게 되는데

 

 

이걸 수정하려면 전에는 이렇게 if를 사용해서 정의를 해줘야 한다.

//Default Parameters (added in ES6)

function showMessage(message, from) {
    if(from === undefined) {
        from = 'unknown';
    }
    console.log(`${message} by ${from}`);
}

showMessage('Hello!');

 

 

그런데 ES6에서는 파라미터의 기본값을 정해줄 수 있다.

//Default Parameters (added in ES6)

function showMessage(message, from = 'unknown') {
    console.log(`${message} by ${from}`);
}

showMessage('Hello!');

 

이렇게 코드를 바꿔도 결과는 똑같이 나온다.

 

 

 

Rest Parameters (added in ES6)

이것도 ES6에서 새로 추가된 기능이다.

//Rest Parameters (addedin ES6)

function printAll(...args) {
    for(let i = 0; i < args.length; i++) {
        console.log(args[i]);
    }
}

printAll('WEB', 'HTML', 'CSS', 'JavaScript');

파라미터에... 을 넣게 되면 파라미터로 배열을 전달할 수 있다.

이 코드를 실행하면 다음과 같이 나온다.

 

for을 이용해 조금 더 간단하게 출력할 수도 있다.

 

//Rest Parameters (addedin ES6)

function printAll(...args) {
    for(const arg of args) {
        console.log(arg);
    }
}

printAll('WEB', 'HTML', 'CSS', 'JavaScript');

 

 

 

 

Local Scope

밖에서는 안을 볼 수 없고 안에서만 밖을 볼 수 있다.

local scope를 설명하는 문장이다. 

함수를 선언하면서 함수 안에서 변수를 만들 수 있는데 

이것을 지역변수라고 한다.

 

이 지역변수는 함수 밖에서는 쓸 수 없다. (밖에서 안을 볼 수 없다.)

그러나 함수안에서는 함수 밖에서 선언했던 변수는 쓸 수 있다.(안에서는 밖을 볼 수 있다.)

 

 

 

Return

모든 함수는 값을 리턴한다. 

리턴을 따로 정해주지 않으면 return undefined이고 따로 리턴 값을 정해줄 수 있다.

function sum(a, b) {
    return a + b;
}
const result = sum(4, 3);
console.log(result);

 

 

Early return, early exit

이건 코드를 조금 더 가독성이 좋게 쓸 수 있는 방법이다. 

예를 들어 유저 포인트가 10이 넘으면 실행하는 함수를 만든다고 해보자.

 

//Early return, early exit
function upgradeUser(user) {
    if(user.point > 10) {

    }
}


function upgradeUser(user) {
    if(user.point <= 10) {
        return;
    }
}

 

빨리 리턴을 시키는 것이 더 좋다.

조건이 맞지 않으면 리턴을 하여 빨리 함수를 종료하게 작성하는 게 조금 더 좋다.

 

 

Functino expression

함수는 변수에도 할당할 수 있다.

//Function expression
const print = function () {
    console.log('print!');
};
print();

print 변수를 함수 호출하듯이 사용하면 사용이 된다.

 

const printAgain = print;
printAgain();

이렇게 함수를 할당한 변수를 또 변수에 할당할 수 있다.

이것 또한 함수를 호출하는 것처럼 사용하면 사용이 된다.

 

 

 

Callback hell

//Callback
function randomQuiz(anser, printYes, printNo) {
    if(anser === 'love you') {
        printYes();
    }
    else {
        printNo();
    }
}

먼저 위의코드에서는 printYes와 printNo함수를 각자 참과 거짓일 때 호출을 한다.

이렇게 함수를 부르는걸 콜백함수라고 한다.

 

 

Arrow function

함수를 간단하게 만들수 있게 해 준다.

const simplePrint = () => console.log('simple print!');
const add = (a, b) => a + b;

간닪게 작성이 가능하지만 리턴, 파라미터도 설정이 가능하다.

 

 

IIFE

IIFE를 사용하면 함수를 선언과 동시에 호출이 가능하다.

(function hello () {
    console.log('IIFE');
})();

이렇게 함수를 괄호로 감싸고 함수를 호출하는것처럼 쓰면 선언과 동시에 호출기 가능하다.