함수 선언문 vs 함수 표현식

함수 선언문

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

함수 표현식

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

이름이 없는 함수만들고 변수를 선언해서 함수를 할당했습니다. 이것을 함수 표현식이라고 합니다.

둘 다, 실행 방식과 동작 방식이 같습니다. 작성하는 문법 외에 어떤 차이가 있는가?

해답은 호출하는 타이밍입니다.

함수 선언문: 어디서든 호출 가능합니다.

sayHello();

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

→ 이렇게 해도, 어디서든 동작합니다

.

여기서 자바스크립트는 위에서부터 아래까지 차례대로 읽어내려갑니다. 순차적으로 실행 되고 즉시 결과를 반환하는 프로그램을 인터프리터 언어라고 합니다.

1. console.log(num); //Error. num is not defined

2. let num = 1;

예제를 보면 1번은 2번의 변수보다 먼저 실행 되므로, 2번이라는 변수를 만나지 못해서, 에러로 처리 됩니다.

다시 함수 선언문으로 돌아가보면, 이 코드는 어떻게 동작할 수 있었을까요? 호출하는 부분이 위에 있는데요?

이유는 자바스크립트 내부 알고리즘 때문입니다.

자바스크립트는 실행 전, 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 모아둡니다.

눈으로 봤을 때는 저 모습일지라도, 저 코드를 사용할 수 있는 사용 범위는 늘어나게 됩니다.

이를 호이스팅이라고 합니다.

그렇다고 코드 위치가 올라간다는 것이 아닙니다.

여기서 함수 표현식은, 코드에 도달하면 생성합니다.

자바스크립트가 코드를 읽어내려가다가 let이라는 변수에 도달했을 때, 사용 가능해지는 거죠.

지금까지는 함수가 호출되는 타이밍에 관한 이야기를 했고, 함수는 이런 특성이 있다는 것을 설명드렸습니다.

화살표 함수 (arrow function)

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

함수 표현식보다 선언문에 저 자유롭고 화살표 함수는 ES6 활발하게 사용하고 있습니다.