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가 반환되고 함수 호출은 가능하지만 함수 내용은 호이스팅되지 않으므로 정의되지 않은 변수 또는 함수 내용에 접근하려고 하면 오류가 발생합니다.
