JS hoisting

호이스팅

 

함수 선언과 변수 선언은 코드를 실행할 때 해당 선언 스코프 최상단으로 끌어올려집니다. 이런 현상을 호이스팅이라고 합니다.

알고가야하는 내용

 

함수에는 두 가지 리터럴 형태가 존재한다.

 

1. 함수 선언

 

• 함수 선언은 function 키워드 뒤로 함수 의 이름을 적어서 사용합니다.

 

function test() {
    return "test"
}

2. 함수 표현식

 

• 함수 표현식은 function 키워드 뒤로 이름을 적지 않고 사용합니다. 이름이 없기 때문에 익명 함수라고 부르기도 합니다.

 

var testValue = function() {
    return "testValue"
}

변수 관련내용

 

선언한 변수의 값 까지 끌어올려지지는 않고 선언만 끌어올려짐

 

console.log(testValue);        //undefined
console.log(undeclared);    // error
var testValue = 100;

함수 관련내용

 

함수 선언은 코드를 실행할 때 함수를 포함하는 스코프 최상단으로 끌어올려진다.

 

console.log(test( ));        // test
function test(){
 return "test"; 
}

 

※ 함수 표현식은 변수를 통해서 함수를 참조하고 변수는 값까지 끌어올리지 않기 때문에 호이스팅이 일어나지 않습니다.

 

console.log(testValueVar);        // undefined
console.log(testValueVar());    // error
var testValueVar = function testValue(){
 return "hoist test";
}

기타 내용

 

if 문안에서 선언 시

 

if 문의 스코프는 전역스코프로 생각하면 편함

 

console.log(test);        // undefined

var condition = false;
if(condition){
  var test = "this is test"; 
}

 

함수안에서 선언 시

 

함수안에 선언된 변수는 함수 스코프 안에서 최상단으로 끌어올려집니다

 

console.log(test());        // "hoist test"
console.log(value);            //    error

function test(){
 var value = "hoist";
 return value + " test";
}

 

호이스팅이 되지 않는 선언

 

블록 스코프를 생성하는 let, const 는 호이스팅이 일어나지 않습니다. class 및 그 인스턴스 또한 마찬가지 입니다.

 

var 로 선언된 변수는 호이스팅되지만 let, const 로 선언된 변수와 상수는 TDZ(Temporal Dead Zone. 임시 접근 불가구역) 구역에 배치됩니다. 이 값들은 선언이 실행된 후에 TDZ에서 제거되어 사용 가능한 상태가 됩니다

 

console.log(test1);        // error
console.log(test2);        // error
console.log(Tester);    // error
console.log(tester);    // error

let test1 = "let value";
const test2 = "const value";
class Tester{
 constructor(){
 this.name = "test";
 }
}
var tester = new Tester()

 

참고

https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9D%B8%ED%84%B0%EB%B7%B0-js-%EC%96%91%EC%84%B1%ED%95%99%EA%B5%90