소년코딩의 자바스크립트 강좌 24. 호이스팅(Hoisting)

함수 선언이 소스코드에서 해당 함수를 실행하는 부분보다 뒤에 있다 하더라도 함수 선언을 '끌어올리는 것(hoist)' 이다.

이것이 가능한 이유는 자바스크립트 변수 생성과 초기화의 작업이 불리되어 진행되기 때문인데,

앞서 배운바 있는 실행 컨텍스트 생성과정을 이해했다면 쉽다.

---

1. 함수 선언문에서의 함수 호이스팅

console.log(sum(10, 10));        // 20 
 
// 함수 선언문 방식
function sum(num1, num2) {
    return sum1 + sum2;
}

sum() 함수가 정의되지 않은 시점에서도 정의되기 이전의 sum() 함수를 호출하는 것이 가능하다. 함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효범위는 코드의 맨 처음부터 시작한다.

이것을 함수 호이스팅이라고 한다.

---

2. 함수 표현식에서의 함수 호이스팅

console.log(sum(10, 10));        // uncaught type error! 
 
// 함수 표현식 방식
var sum = function (num1, num2) {
    return sum1 + sum2;
}
console.log(sum(10, 10));        // 20

함수 표현식 형태로 정의되어 있으면 호이스팅이 일어나지 않는다. 따라서 sum() 함수가 정의된 이후에 호출이 가능하다.

---

3. 변수 생성 후 코드 실행

실행 컨텍스트 생성 순서

1. 활성 객체 생성
2. arguments 객체 새성
3. 스코프 정보 생성
4. 변수 생성
5. this 바인딩
6. 코드 실행

즉, 변수가 생성된 이후에 코드가 실행된다. 코드가 실행되기전 변수에는 undefined가 할당되는데,

함수 선언 시에는 변수 생성됨과 동시에 함수 객체의 참조가 할당된다.

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.