[Javascript] 함수 표현식, 화살표 함수(arrow function)

함수 선언문 vs 함수 표현식

함수 선언문 : 어디서든 호출 가능

실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해놓는 호이스팅(hoisting) 때문이다.

sayHello();

function sayHello(){
    console.log('Hello');
}

 

함수 표현식 : 코드에 도달하면 생성

let sayHello = function(){
    console.log('Hello');
}

sayHello();

---

화살표 함수(arrow function)

화살표 함수로 함수를 보다 간결하게 작성할 수 있다.

let add = function(num1, num2) {
    return num1 + num2;
}

위 함수를 화살표 함수로 바꾸면

let add = (num1, num2) => {
    return num1 + num2;
}

 

return문은 중괄호가 아닌 일반 괄호로 바꿀 수 있다.

let add = (num1, num2) => (
    num1 + num2;
)

 

return문이 한 줄이라면 괄호도 생략할 수 있다.

let add = (num1, num2) => num1 + num2;

 

인자가 하나라면 괄호를 생략할 수 있다.

let sayHello = name => `Hello. ${name}`;

 

인자가 없다면 괄호를 생략할 수 없다.

let showError = () => {
    alert('error!');
}

 

return문이 있다고 해도 return 전에 여러 줄의 코드가 있으면 일반 괄호를 사용할 수 없다.

let add = function(num1, num2){
    const result = num1 + num2;
    return result;
}