[JavaScript] - Hoisting🏗

Hoisting이란, 선언들을 모두 끌어올려서 스코프의 최상단에 선언하는 것이다.

Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope (to the top of the current script or the current function)

'let, const' vs. 'var'

let과 const를 사용하면, 변수를 선언하기 전에 사용하려 할 때 에러가 일어난다.

carName = "Volvo";
let carName; //ReferenceError

carName = "Volvo";
const carName; //ReferenceError

x;  //ReferenceError
let x = 3;

반면, var로 변수를 선언하면 선언하기 전에도 사용할 수 있다.

carName = "Volvo";
var carName; //Volvo

x; //undefined
var x = 3;
x; //3

왜 이럴까? var로 선언한 변수는 끌어올린다는 뜻의 hoisting 메커니즘을 따르기 때문이다. 자바스크립트는 함수나 전역 스코프 전체를 살펴보고, var로 선언한 변수를 맨 위로 끌어올린다. 하지만 선언만 끌어올려지고, 할당은 끌어올려지지 않는다.

var의 이러한 특성 때문에 혼란스러운 코드가 생길 수 있다. 그래서 ES6에서 let이 등장했다. 아직은 ES5가 완전히 ES6로 대체된 건 아니기 때문에 var을 알기는 해야 하지만 나중에는 완전히 없어질 수도 있다.

함수 표현식(Function expressions) vs. 함수 선언문(Function declarations)

1. Function expressions are NOT hoisted.

• 함수 표현식은 호이스팅되지 않는다.

expression(); //Output: "TypeError: expression is not a function

var expression = function(){
	console.log('Will this work?');
}

2. Function declarations are hoisted.

• 함수선언문은 코드를 구현한 위치와 관계 없이, 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

hoisted(); //This function has been hoisted.

function hoisted() {
	console.log('This function has been hoisted.');
};

호이스팅 우선순위(Order of precedence)

1. Variable assignment takes precedence over function declaration
2. Function declarations take precedence over variable declarations

함수 선언은 변수 선언보다 상위에 있지만, 변수 할당보다는 하위에 있다.

Function declarations are hoisted over variable declarations but not over variable assignments.

1. Variable assignment over function declaration

var double = 22;

function double(num) {
	return (num*2);
}

console.log(typeof double); // Output: number

2. Function declarations over variable declarations

var double;

function double(num) {
	return (num*2);
}

console.log(typeof double); // Output: function

JavaScript Hoisting

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

Understanding Hoisting in JavaScript | DigitalOcean