[Javascript] 함수 선언문 vs 함수 표현식

1. 함수 선언문

function HW(){
  console.log("Hello World");
}
HW();

2. 함수 표현식

let HW function(){
  console.log("Hello World");
}
HW();

3. 차이점

둘의 차이가 무엇일까? 둘의 차이를 이해하기 위해서는 javascript의 언어적 특성을 이해할 필요가 있다.

javascript는 인터프리터 언어이다. 인터프리터 언어는 순차적으로 실행되고 즉시 결과를 반환하는 언어이다. 따라서 다음과 같은 코드는 실행되지 않는다.

console.log문 전에 변수를 선언하지 않고 사용해 버렸기 때문이다. 코드를 순차적으로 읽어나가는 인터프리터 언어의 특성 때문에 벌어지는 일이다. 그렇다면 다음의 코드에서도 같은 일이 벌어지리라고 예상할 수 있다.

HW();
function HW(){
  console.log("Hello World");
}

하지만 javascript에서는 가능한 문법이다. 다음과 같이 함수가 정상적으로 호출되어 값이 출력되는 것을 확인할 수 있다.

변수를 사용할 때는 가능하지 않았던 일이 함수를 호출할 때는 어떻게 가능한 걸까? 이는 javascript 만의 독특한 알고리즘 때문이다.

hoisting 기능

javascript는 실행 전 초기화 단계에서 코드의 모든 함수를 찾아 생성해 둔다. 이를 hoisting이라고 한다.
겉보기에는 함수 호출을 선언문 다음에 할 수 있을 것 같지만, 실제로 호출 가능 범위는 위로 끌어 올려진다.

단 코드 자체가 위로 재배치되는 것은 아니다!

따라서 함수 선언문은 비교적 위치에 상관없이 자유롭게 사용할 수 있고 에러의 가능성도 작다. 따라서 함수 표현식보다는 함수 선언문을 활용하는 것이 더 편하고 안전하다.