[Javascript] Function Declaration과 Function Expression의 차이

JavaScript에서 함수를 정의하는 방법에는 함수 선언형(Function Declaration)과 함수 표현식(Function Expression) 두 가지가 있습니다. 

 

 

함수 선언형 (Function Declaration)

• 함수 선언형은 함수 이름과 함수 본문으로 구성됩니다.
• 함수 선언은 전역 스코프 또는 함수 스코프에서 사용할 수 있으며, 호이스팅(hoisting)이 발생합니다. 이는 함수를 선언하기 전에 호출해도 오류가 발생하지 않는다는 것을 의미합니다.
• 함수 선언형은 함수 이름이 필수이며, 함수 표현식과 달리 이름을 가지고 있기 때문에 재귀적인 함수 호출에 유용합니다.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('Star'); // 함수 선언을 호출

 

 

함수 표현식 (Function Expression)

• 함수 표현식은 함수를 변수에 할당하여 정의하는 방식입니다.
• 함수 표현식은 변수 스코프나 함수 스코프 내에서 정의될 수 있으며, 호이스팅은 변수 선언만 호이스팅되며 함수 본문은 호이스팅되지 않습니다.
• 함수 표현식은 익명 함수로 정의할 수도 있지만, 이름을 붙일 수도 있습니다. 이름이 없는 경우 해당 함수를 익명 함수로 사용할 수 있습니다.

const greet = function(name) {
  console.log(`안녕, ${name}!`);
};

greet('Star'); // 함수 표현식을 호출

 

 

주요 차이점

	함수 선언형(Declaration)	함수 표현식(Expression)
호이스팅	함수 전체가 호이스팅되어 선언 이전에 호출	변수만 호이스팅되어 함수 본문은 호이스팅되지 않음
함수 이름	항상 이름을 가지고 있음	이름을 가지거나 익명 함수로 정의

 

두 가지 방식은 다양한 상황에서 사용될 수 있으며, 선택은 코드 구조와 요구 사항에 따라 달라질 수 있습니다.

 

 

호이스팅

자바스크립트에서 변수 및 함수 선언이 코드의 맨 위로 끌어올려지는 동작을 가리키는 개념입니다. 이것은 코드 실행 순서와 관련된 중요한 동작 중 하나이며, 초기에는 직관적이지 않을 수 있습니다. 호이스팅은 코드의 이해와 디버깅을 돕기 위한 목적으로 도입되지 않았지만, 자바스크립트 엔진의 동작 방식 중 하나입니다.

 

1. 변수 호이스팅

var 키워드로 선언된 변수는 해당 변수가 선언된 스코프 내에서 맨 위로 끌어올려지며, 초기화 단계에서 undefined로 초기화됩니다. 즉, 변수가 선언되기 전에 변수에 접근하더라도 오류가 발생하지 않고 undefined를 반환합니다.

console.log(x); // undefined
var x = 5;

 

2. 함수 호이스팅

함수 선언문(function)은 해당 함수가 선언된 스코프 내에서 맨 위로 끌어올려지며, 함수를 선언하기 전에 함수를 호출할 수 있습니다.

sayHello(); // "Hello"
function sayHello() {
  console.log("Hello");
}

 

주의해야 할 중요한 점은 호이스팅은 변수 및 함수 선언만을 끌어올리며, 변수에 할당된 값 또는 함수의 내용은 끌어올려지지 않습니다. 예를 들어, 변수 초기화 전에 변수에 접근하면 undefined가 반환되고 함수 호출은 가능하지만 함수 내용은 호이스팅되지 않으므로 정의되지 않은 변수 또는 함수 내용에 접근하려고 하면 오류가 발생합니다.