TIL no.9 - JS 호이스팅

김종진·2020년 12월 12일
0

JavaScript

목록 보기
2/18

호이스팅(Hoisting)

코드에 선언된 변수 및 함수를 코드의 유효범위의 최상단으로 끌어 올리는 것

  • 전역 스코프인지 함수 스코프인지에 따라 다르게 수행된다.
  • 함수 내에서 선언된 함수 스코프 변수는 해당 함수의 최상위
  • 함수 밖에서 선언된 전역 범위(global scope)는 스크립트의 최상위

호이스팅의 대상

var 변수와 함수 선언문에서만 호이스팅이 발생한다.

  • let과 const는 호이스팅이 발생하지 않는다.

변수 호이스팅

console.log(a); undefined
var a = "hoisting";
console.log(a); 'hoisting'

변수 선언이 최상단으로 끌어 올려졌기 때문에 console.log의 값이 다르게 나옵니다.
var a = "hoisting"; 이 구문이 var a를 호이스팅 하기 때문에 undefined로 처리됩니다.

함수 호이스팅

foo();
function foo(){
	console.log('hoisting')
}
> hoisting

foo 함수의 선언을 global scope의 상단으로 호이스팅하기 때문에 hoisting이 출력됩니다.

foo();
var function foo(){
	console.log('hoisting')
}
> Syntax Error!

이와 같은 함수 표현식의 경우는 호이스팅이 발생하지 않기 때문에 에러가 발생합니다.

호이스팅 주의점

코드의 가독성과 유지보수에 있어 혼란을 방지하기 위해 호이스팅이 일어나지 않도록 한다.

  • 변수는 let과 const를 사용합니다.
profile
FE Developer

0개의 댓글