[FE 면접 대비] 자바스크립트 함수 선언식과 표현식의 차이

1. 자바스크립트 함수 정의 방식

• 함수 선언식
• 함수 표현식
• Function 생성자 함수
• 화살표 함수(ES6)

// 함수 선언식
function func(x,y){
  return x+y;
}

// 함수 표현식
const func = function(x,y){
  return x + y;
}

// Function 생성자 함수
const func = new Function('x','y', 'return x+y');

// 화살표 함수(ES6)
const func = (x,y) => x+y;

2. 함수 선언식과 표현식의 차이

Hoisting(호이스팅)
호이스팅은 유효범위 (전역 변수라면 최상단, 지역 변수라면 변수가 선언된 영역의 최상단) 안에서 최상단으로 끌어올려진다. 하지만, 실제로 코드의 선두로 끌어올려진 것은 아니고 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.

 

호이스팅에 의한 영향

함수 선언식은 호이스팅의 영향을 받지만, 함수 표현식은 호이스팅의 영향을 받지 않는다.

호이스팅에 의해 영향을 받는 것은 전역 변수에서 함수가 선언된 경우, 함수의 중복이 발생해 코드가 중복되는 문제가 발생할 수 있다.

호이스팅이 발생하지 않는 함수 표현식의 경우, 함수의 실행이 함수의 선언보다 먼저 일어난 경우에는 에러가 발생한다.

➡️ 함수와 변수를 가급적 코드 상단에 선언함으로써, 호이스팅에 의한 문제 발생을 방지할 수 있다.

 

함수를 생성하는 시점

함수 선언문은 코드 블록이 실행되기도 전에 처리되므로, 블록 내에서 활용이 가능하다.

함수 표현식은 실행 흐름에 맞게 생성된다.

 

스코프

함수 선언문은 코드 블록 내에 위치하면 블록 밖에서 함수에 접근할 수 없다.

함수 표현식을 이용하여 코드 블록 밖에서 선언한 변수에 함수를 할당하면 외부에서도 접근 가능하다.