[JavaScript] 호이스팅

호이스팅

• hoisting : 끌어올리기
• 실제 호출하기 이전으로 끌어 올라간 것처럼 동작

변수 호이스팅

console.log(a); //undefined
// console.log(b); //ReferenceError
// console.log(c); //ReferenceError

var a = 'var는 호이스팅이 발생한다';
let b = 'let은 호이스팅이 발생하지 않는다.';
const c = 'const도 호이스팅이 발생하지 않는다.';

• var : 변수의 선언만 끌어올려짐. 할당값은 끌어올려지지 않음.
• const vs let : const는 선언시 반드시 값을 할당해야하고 이후에 재할당을 할 수 없음.

함수 호이스팅

Func(); // 함수 호이스팅

console.log(Func2); //undefined
Func2(); // TypeError 

// 선언식 함수
function Func(){
	console.log('함수 호이스팅');
}

// 익명함수(표현식 함수)
var Func2 = function(){
	console.log('함수 호이스팅2');
}

• 선언식 함수만 끌여올려짐.
• 익명함수(표현식 함수)는 끌어올려지지 않음. Func2의 경우 변수 선언만 끌어올려짐.

정리

• 호이스팅은 var로 선언한 변수와, 선언식 함수가 최상단으로 끌어올려지는 현상을 말한다. 변수는 상단으로 끌어올릴뿐, 할당된 값은 끌어올려지지 않는다.
• 이러한 문제점은 let, const로 변수,상수를 선언하고, 함수 표현식(익명함수)를 사용하여 해결한다!