[JS] 함수 선언식과 함수 표현식 (feat. 호이스팅)

JavaScript

_doit 2024. 7. 29. 17:31

728x90

// 함수 선언식(Declaration) : function으로 시작
function hello() {}

// 함수 표현식(Expression) : const or let으로 시작
const hello = function () {}

호이스팅은 말 그대로 끌어 올린 다는 것이다.

자바스크립트 에서 끌어 올리는 것은 변수 '선언'과 함수 '선언' 을 끌어올리는 것이다.

함수 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성(=선언)(Instantiation)과 초기화(Initialization)의 작업이 분리돼서 진행되기 때문이다.

// 1번
count();

var count = function() {
    console.log('count는 1이다.');
}

// 2번
var count = function() {
    console.log('count는 1이다.');
}

count();

// 3번
count();

let count = function() {
    console.log('count는 1이다.');
}

1번의 결과는 TypeError error : count is not function

변수 선언과 함수 할당이 함께 이루어지는 표현식이다. 하지만 호이스팅 관점에서 변수 선언과 함수 할당은 서로 다른 시점에 이루어짐

왜냐하면 호이스팅에 의해서 실제 자바 컴파일은 이런식으로 이루어 지기 때문이다.

var count;    // undefined

count();      // count는 함수가 아닌데 왜 함수를 호출하니?

var count = function() {
    console.log('count는 1이다.');
}

보는 바와 같이 변수 선언이 위로 호이스팅 돼서 정의가 되었기 때문에, 그러므로 아래와 같이

var count; 가 가장 먼저 실행된다. 변수에 아무 값도 담지 않았으므로

undefined 상태이다.

그 후로 count()가 호출되면 위에 선언한 count 가 호출되므로 변수를 호출하는 격이된다.

그러므로 not function 이라는 에러 메시지가 나타난다.

2번의 결과는 정상적으로 console.log가 동작한다.

var count 가 호이스팅으로 인해 위로 끌어올려지지만, count() 호출 전 count에 함수를 담으므로

count() 를 호출하였을 때 정상 작동한다.

3번의 결과는 ReferenceError 이다.

세번째 예시는 첫번째 예시에서 var 를 let으로 바꾼 것이다.

세번째도 역시 에러를 발생하지만, 첫번째와 다른 Referecne Error가 발생한다.

let 은 호이스팅의 영향을 받지 않기 때문에, 예시 작성한 코드 순서대로 실행된다.

그러므로 count()라는 함수가 정의되지 않았는데 호출하였기 떄문이다.

// 1번
count();

function count() {
    console.log('count는 2이다.');
}

// 2번
function count() {
    console.log('count는 2이다.');
}

count();

1번, 2번 모두 정상 작동한다. 호출이 함수선언문의 위에 있든 아래쪽에 있든 함수 선언문은 호이스팅 영향으로 끌어올려지기 때문이다. 그러므로 아래와 같이 자바 컴파일러가 해석한다고 보면된다

// 1번
function count() {
    console.log('count는 2이다.');
}

count();

-끝-

728x90