function 과 const 로 선언한 함수의 차이

배경

// function 으로 선언한 경우
function func1 () {
	...
}

// const 로 선언한 경우
const func2 = () => {
	...
}

그냥 문득 이런 궁금증이 들었다. function 과 const 로 선언한 함수의 차이가 무엇일까.

지금까지 일반적으로 이런 케이스의 함수는 function 으로 선언하니까 function 으로, 어떤 케이스는 const 로 선언해도 될 거 같으니까 const 로 선언하자는 어이 없는 규칙에 따라 개발해왔다는 것을 인지하고 제대로 알아보아야겠다는 생각을 하게 되었다.

호이스팅 지원 여부

알아본 바에 의하면 가장 중요한 차이점은 호이스팅 지원 여부 에 있다는 것 같았다.

const 로 선언한 함수는 호이스팅이 지원되지 않는다.

그래서 해당 함수가 선언되기 전 시점에 호출하면 Reference 에러가 발생한다.

참조 에러 (ReferenceError) 선언하지 않은 식별자에 접근하면 발생

Hoisting

모던 자바스크립트 Deep Dive 4장 변수 p. 42 참조

자바스크립트에서 변수 선언의 실행 시점

런타임 (runtime) : 소스코드가 한 줄씩 순차적으로 실행되는 시점

• 자바스크립트 엔진은 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거치면서 소스코드로 실행하기 위한 준비를 한다.
  • 이때 변수 선언문, 함수 선언 문 등 모든 선언문을 먼저 실행한다.
  • 평과 과정이 끝나면 비로소 모든 선언문을 제외한 소스코드를 순차적으로 한 줄씩 실행한다.
• 이걸 호이스팅 이라 부른다.

호이스팅 (Hoisting) 이란?
선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

호이스팅 예제

변수 선언은 런타임이 아니라 그 이전 단계에서 먼저 실행되므로 아래 코드는 에러가 뜨지 않는다.

console.log(score);

var score; 

본론 예제

아래 코드는 전통적인 function 선언 방식이고 호이스팅이 지원되므로 에러가 뜨지 않는다.

myFunction(); // This is a traditional function.

function myFunction() {
  console.log("This is a traditional function.");
}

반면에, 아래 코드는 const 화살표 함수로 선언하였고 호이스팅이 지원되지 않아 에러가 발생한다.

const myFunction = function() {
  console.log("This is a function expression.");
};