함수 표현식과 선언문의 차이를 알아보고자 한다.
우선 문법이 다르다.
함수 선언문은 독자적인 구문 형태로 존재
function add(a, b) {
return a + b;
}함수 표현식은 할당 연산자 =를 이용해 생성
let add = function(a, b) {
return a + b;
}두 번째 차이는 함수 생성 시기에 있다.
함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다. 함수가 적힌 위치와 상관 없이 어디에서든 사용할 수 있다는 뜻이다.
내부 알고리즘으로 인해 자바스크립트는 스크립트를 실행하기 전, 준비 단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성한다. 따라서 스크립트는 함수 선언문이 모두 처리된 이후에 실행되므로 스크립트 어디서든 함수 선언문으로 선언한 함수에 접근할 수 있는 것이다.
그러나 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다. 따라서 실행 흐름이 함수에 도달했을 때부터 함수를 사용할 수 있는 것이다.
예시를 살펴보자면,
console.log(add(3, 5)); // 8
function add(x, y) {
return x + y;
}이렇게 선언문을 사용했을 때는, 터미널을 통해 3과 5를 더한 값인 8이 반환된 것을 바로 확인할 수 있다.
그러나
console.log(add(3, 5)); // error!
let add = function (x, y) {
return x + y;
}이렇게 표현식을 사용할 경우 첫 줄에서는 아직 함수가 생성되지 않은 상태라 에러가 뜨는 것을 확인할 수 있다.
세 번째 차이점은 스코프이다.
함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있으나, 블록 밖에서는 접근할 수 없다.
예를 들어 if문 안에서 함수를 선언 해야 하는 경우, 해당 if문 블록 안에서는 자유롭게 접근할 수 있으나 밖에서는 접근할 수 없게 된다.
이런 경우에는 함수 표현식을 사용해 if문 밖에 변수를 선언한 뒤 해당 함수를 할당하여 해결할 수 있다.
함수 선언문 vs 함수 표현식
함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는 게 좋다고 한다.
함수 선언문으로 함수를 정의하면, 함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있다.
그리고 가독성 측면에서도 let add = function() {} 보다 function add() {}를 찾는게 더 쉽다.
그러나 마지막 if문 상황과 같이 적합하지 않은 이유가 있다면 함수 표현식을 사용해야 한다.
