호이스팅

호이스팅

• 호이스팅 이란?

• 자바 스크립트 에서 변수와 함수선언이 실행전에 해당 범위의 맨 위로 끌어올려지는 행동이다.
  호이스팅은 코드 작성시 유연성을 제공하지만, 이해하지 못하고 사용하면 예기치 않은 오류가 발생할 수 있다.

 

• 변수 호이스팅

• 변수선언 은 코드 실행전에 해당 범위의 맨 위로 호이스팅 되지만 변수 할당은 호이스팅되지 않는다.
  특히 Var 키워드로 선언된 변수에서 중요하게 작용한다.

• 변수 호이스팅 예시

console.log(a) // undefined var a = 5 console.log(a) // 5

위 값은 아래와 같이 해석할수있다.
▼

var a console.log(a) // undefined a=5 console.log(a) // 5

추가 설명

var 키워드가 호이스팅 되어 var a 가 맨 위로 올라가지만 a의 할당값은 호이스팅 되지않아 1번 콘솔은 undefined값을 출력하고, a=5의 값이 할당된 2번 콘솔에서는 5 를 출력한다.

let 과 const 키워드로 선언된 변수도 호이스팅 되지만 초기화 되기 전에는 접근할수 없다.
이것을 일시적 사각지대 (Temporal Dead Zone, TDZ) 라고 한다.

 

• 함수 호이스팅

• 함수 선언식과 함수 표현식으로 나누어 진다.

• 함수선언식

• 전체 함수가 호이스팅 된다.
  따라서 함수 선언 전에 호출할수 있다.

• 함수 선언식 예시

name() // '홍길동' function name(){ console.log('홍길동')}

▼ 위 코드는 아래와 같이 해석할수있다.

function name(){ console.log('홍길동')} name()// '홍길동'

추가설명

함수 선언 자체가 호이스팅 되어 위로 올라가기 때문에 문제 없이 name() 은 '홍길동' 을 출력한다.

 

• 함수 표현식 

• 함수 표현식은 호이스팅 되지 않기 때문에 변수에 할당되기전에는 호출할 수 없다.

• 함수 표현식 예시

name() // TypeError var name = function(){ console.log('홍길동') }

▼ 위 코드는 아래와 같이 해석할수있다.

var name name()// TypeError name=function(){ console.log('홍길동') }

추가설명

var name 이 호이스팅 되어 위로 올라가지만 함수 표현식은 호이스팅 되지 않기 때문에 변수에 할당되지않은 name() 은 TypeError 에러를 일으킨다.

 

• 결론

이처럼 호이스팅은 잘 이용하면 코드작성이 더 유연해 질수는 있지만 예상치 못한 오류를 방지하기 위해 신중하게 사용 하여야 한다.