javascript 호이스팅(hoisting) 이란

자바스크립트에서 호이스팅한다 뭐 요런말 들어보셨을텐데요

자바스크립트에서 호이스팅은 끌어올린다는 뜻입니다.

뭘끌어올리느냐

바로 변수선언과 함수선언을 최상단으로 끌어올립니다

확인해봅시다

1.변수선언

	

console.log(a)
var a;

콘솔에 찍으면 에러가 아니라 undefined 가 나옵니다

변수가 호이스팅 됬기 때문이죠

*실제로 호이스팅된 코드

	

var a;
console.log(a)

자바스크립트는 이렇게 읽은 거죠

이렇게 변수를 함수 바깥에서 선언한 경우에는 전역컨테스트 최상위로 끌어올립니다.

그럼 함수 내에서 선언해볼까요 ??

	

function test(){
    console.log(a)
    var a = 'b';
}
console.log(test(),a) //undefined , referenceError

test 함수내의 a 는 undefined 결과가 나오는데

함수 바깥에서 a는 에러가 나옵니다.

*실제로 호이스팅된 코드

	

function test(){
    var a;
    console.log(a)
    var a = 'b';
}
console.log(test(),a) //undefined , referenceError

위와같이 자바스크립트는 동작하고 있어요.

함수 내에서 선언한 변수는 함수내에서만 호이스팅한다는 것을 알수있습니다.

2.함수선언

함수는 선언식만 호이스팅해요

함수 표현식은 호이스팅 하지 않습니다.

확인해볼까요

	

console.log( test() )

function test(){
    return 2
}

이 결과는 무엇일까요

사실 호이스팅을 모르고 자바스크립트는 위에서 부터 읽는다만 알고있으면

에러 난다고 생각하겠죠

하지만 함수 호이스팅이 되서 2를 리턴해줍니다.

선언문을 사용할경우 아무데서나 불러도 함수는 값을 리턴해줍니다..ㅎㅎㅎ

함수표현식을 살펴볼까요

	

console.log( a() )

var a = function(){
    return 2
}

이 결과는 에러가 나옵니다.

*실제로 호이스팅된 코드

	

var a;
console.log( a() )

var a = function(){
    return 2
}

변수 a를 호이스팅하고 아직 함수를 할당하지 않았으니

함수가 아직 정의되지 않았다고 에러가 떠요 .

표현식밑에서 a 함수를 불러오면 정상작동합니다.

호이스팅을 알고 있어야 여러 함수가 막 쌓여 오류가 났을때 좀 더 수월하겠죠?

es6에서는 이런 문제를 많이 개선하였는데요.

그래도 아주 중요한 것이니 알고있도록 합시다 ~ !