[JavaScript] 호이스팅이란?

호이스팅

변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것.

예를 들면, 함수코드를 작성하기 전에, 함수선언을 먼저할 수 있다.

catName("Chloe");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
위 코드의 결과는: "My cat's name is Chloe"
*/

 

이런 일이 가능한 것은 JavaScript에서 컨텍스트 실행이 작동하기 때문이다.

위의 코드는 아래와 같이 실행된다.

function catName(name) {
  console.log("My cat's name is " + name);
}

catName("Chloe");

 

호이스팅은 다른 데이터 타입 및 변수도 가능하다.

var

var로 선언된 변수 범위는 현재 실행 컨텍스트다.

num = 6;
num + 7;
var num; 
/* num이 선언되지 않더라도 에러를 내지 않습니다 */

 

 

자바스크립트는 선언만 위로 올린다(hoist). 만약 변수 선언 후 나중에 초기화시켜 사용하면 undefined로 지정된다.

// 선언과 초기화를 동시에.
var x = 1; // x 초기화
console.log(x + " " + y); // '1 undefined'
var y = 2;

 

위의 예제들은 선언을 한 y변수가 컴파일로 실행될 때, 실행되는 코드 아래에서 초기화를 시켜버리면 undefined로 나타나는 걸 볼 수 있다.

위의 코드는 아래처럼 동작한다. 그렇기에 y변수가 사용되기 전에 선언과 초기화를 해줘야한다.

// 선언과 초기화를 동시에.
var x = 1; // x 초기화
var y; // y 선언
console.log(x + " " + y); // '1 undefined'
y = 2;

 

 

ES6이후부터 변수에는 let, const로 선언하는 값은 호이스팅에 관련되지 않는다. var만 호이스팅된다.

let

let으로 선언된 변수는 블록 범위다.

변수의 범위가 변수가 선언된 블록에 바인딩되었고 변수가 선언된 함수가 아니다.

var처럼 호이스팅X.

console.log(hoist); // Output: ReferenceError: hoist is not defined ...
let hoist = 'The variable has been hoisted.';

-----------------------------------------------------

let hoist;

console.log(hoist); // Output: undefined
hoist = 'Hoisted'

 

const

불변한 변수를 사용할 떄 쓰며, 할당된 값도 수정할 수 없다.

function getCircumference(radius) {
  console.log(circumference)
	// const로 선언된 PI가 getCircumference내부에서 호이스팅되지 않아,
  // ReferenceError 에러가 난다.
  circumference = PI*radius*2;
  const PI = 22/7;
}

getCircumference(2) // ReferenceError: circumference is not defined

 

함수선언식(Function Declaration)과 함수표현식(Function Expression)

함수표현식은 변수를 만들고, 해당 함수를 할당해주는 표현식. 함수선언식은 호이스팅 가능하다.

//함수표현식으로 사용할 때, 호이스팅이 되지않음.
expression(); //Output: "TypeError: expression is not a function

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

-----------------------------------
//함수선언식은 호이스팅 가능.
hoisted(); // Output: "This function has been hoisted."

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

 

new Fucntion 객체

new Function으로 생성되어도 호이스팅되지 않는다.

showName();	// ERROR
var showName = new Function("", console.log("David Kwon"));

 

---

호이스팅 우선순위

 

같은 이름의 변수와 함수

같은 이름으로 변수와 함수가 선언되었을 때, 변수가 호이스팅된다.

var a = 1;

function a(){
    console.log('123');
}

console.log(a);	//1

 

같은 변수와 함수에서, 초기화 유무의 호이스팅 우선순위

위와 같은 상황에서, 만약 변수가 초기화가 안되었다면?
→ 초기화가 안된 변수는 함수선언문이 변수를 덮어쓴다. 고로 이때는 함수가 호이스팅된다.

var a = 1;
// 초기화가 안되어서, 함수 b가 변수 b를 덮어쓴다.
var b;

function a() {
    console.log("123");
}
function b() {
    console.log("123");
}

console.log(a); // 1
console.log(b); // function b

 

호이스팅 주의사항

• 코드의 가독성과 유지보수를 위해 호이스팅이 발생되지 않도록 관리
• 호이스팅을 잘 몰라도 함수와 변수를 되도록 상단부에 선언하면, 호이스팅으로 스코프 꼬임 현상을 방지 가능
• let, const를 사용하자.

참고사이트

surim014.log - 호이스팅에 대해 알아보자