키워드 정리

함수 선언식 vs 함수 표현식

함수 선언식 - Function Declarations

일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다

function name([param[, param,[..., param]]]) { [statements] }

• name : 함수 이름
• param : 함수로 전달되는 인수(argument)의 이름. 인수의 최대 개수는 엔진마다 다름.
• statements : 함수의 몸통(body)을 구성하는 문(statement).

function 함수명() {
  구현 로직
}

함수 선언식 특징

• 호이스팅 가능. 선언 전에도 호출 가능.
• 실행 전 초기화 단계에서 함수선언 방식으로 정의한 함수가 생성됨. (실행 컨텍스트)
• 함수가 선언된 코드블록 안에서만 유효함

함수 선언식 호이스팅

hoisted(); // logs "foo"

function hoisted() {
  console.log("foo");
}

함수 표현식 - Function Expressions

유연한 자바스크립트 언어의 특징을 활용한 선언 방식

var myFunction = function [name]([param1[, param2[, ..., paramN]]]) { statements };

• name : 함수 이름. 함수가 이름 없는(anonymous) 함수인 경우, 생략될 수 있음. 이 함수 이름은 함수의 몸통 내에서만 사용할 수 있습니다.
• paramN : 함수로 전달되는 인수(argument) 의 이름.
• statements : 함수 몸통을 구성하는 문(statement).

var 함수명 = function () {
  구현 로직
};

함수 표현식 특징

• 함수 표현식이 호이스팅에 영향을 받지 않는다
• 클로져로 사용 가능
• 콜백으로 사용 (다른 함수의 인자로 넘길 수 있음)
• IIFE 즉시실행 함수 사용 가능

차이점?

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

함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

호이스팅?

호이스팅이란 모든 선언문이 해당 Scope의 최상위로 옮겨진 것처럼 동작하는 특성이다.
호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말한다.
따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다.
다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 된다.

함수 호이스팅

함수 호이스팅이란 함수의 선언 위치와 상관없이 코드 내 어느 곳에서든 호출이 가능한 것이다.

변수 호이스팅

변수 호이스팅이란 변수의 선언 위치와 상관없이 코드 내 어느 곳에서든 호출이 가능지만 초기화는 undefined다.

reference

• 함수 표현식 vs 함수 선언식
• javaScript. 함수선언식 vs. 함수표현식
• MDN : 함수 선언
• MDN : 함수 표현식
• MDN : 호이스팅
• 함수호이스팅과 변수호이스팅