함수 선언식과 함수 표현식

자바스크립트에서는 함수를 정의하는 두 가지 주요 방법이 있다: 함수 선언식과 함수 표현식.
이 두 가지 방법의 차이와 호이스팅이 어떻게 작용하는지에 대해 살펴보면,

 

1. 함수 선언식 (Function Declaration)

함수 선언식은 함수 이름과 함께 정의한다. 자바스크립트는 코드 실행 전에 함수 선언을 자동으로 "호이스팅"한다. 이는 함수 선언이 코드의 맨 위로 끌어올려지는 것처럼 작동하여, 함수가 정의되기 전에도 호출할 수 있게 한다.

예시:

sayHello(); // "Hello" 출력

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

여기서 sayHello 함수는 선언하기 전에 호출해도 문제없다. 자바스크립트가 코드 실행 전에 함수 선언을 호이스팅하기 때문에, sayHello 함수의 정의가 코드의 맨 위로 끌어올려진 것처럼 동작한다.

 

 

2. 함수 표현식 (Function Expression)

함수 표현식은 함수를 변수에 할당하는 방식으로 정의한다. 이 경우, 함수는 변수에 할당된 후에만 호출할 수 있다. 호이스팅이 함수 표현식에는 적용되지 않기 때문에, 함수 표현식을 정의하기 전에는 함수 이름을 사용할 수 없다.

예시:

let greet = function() {
    console.log("Hello");
};

greet(); // "Hello" 출력

여기서 greet 변수에 함수가 할당되었기 때문에 greet()를 호출할 수 있다. 그러나 함수 표현식의 이름을 직접 참조하는 것은 불가능하다.

 

 

3. 문제 발생 예시:

let varB = function funcB() {
    console.log("funcB");
};

varB(); // "funcB" 출력
funcB(); // 오류 발생

1. varB(): 잘 작동한다. varB는 함수 표현식으로 정의된 함수이기 때문에 호출할 수 있다.
2. funcB(): 오류가 발생한다. funcB는 함수 표현식 내부에서만 사용 가능한 이름이다. 함수 표현식의 이름 funcB는 varB 변수에 할당된 후에만 사용할 수 있으며, 외부에서는 참조할 수 없기 때문에 오류가 발생한다.

 

4. 호이스팅 요약

• 함수 선언식은 호이스팅되어, 함수가 코드의 상단으로 끌어올려진 것처럼 동작하여 함수 정의 전에도 호출할 수 있다.