Hoisting

Hoisting은 hoist라는 끌어올리다는 단어에서 비롯된 용어이다.

MDN에서는 hoisting이라는 용어에 대해 이렇게 설명하고 있다.

 

"호이 스팅은 JavaScript에서 실행 콘텍스트(특히 생성 및 실행 단계)가 어떻게 동작하는가에 대한 일반적인 생각으로 여겨집니다. 하지만 호이 스팅은 오해로 이어질 수 있습니다.

예를 들어, 호이 스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다."

 

즉 변수 및 함수에 값을 먼저 할당한 후에 선언해도 동작한다는 뜻이다.

a = 12;
console.log(a);
var a;

hello();

function hello(){
  console.log("hello");
}

//hello

*함수 hoisting은 선언 방식이 함수 선언식인 경우에만 적용된다.

*함수 범위의 변수와 전역 범위의 변수 모두 hoisting 되더라도 같은 범위를 갖게 된다.

*hoisting이 적용될 경우 변수의 범위는 변수가 선언된 위치를 기준으로 정해진다. ==> 변수의 값은 할당된 위치의 범위 안에서만 유효하다.

*Javascript는 초기화가 아닌 선언에만 hoisting을 적용한다.

*var을 이용하여 변수를 선언 후 초기값을 할당해 주지 않는다면 javascript는 자동으로 해당 변수에 undefined값을 할당한다.

 

checkHoist();

function checkHoist(){
  console.log("before: " + elem);
  elem = 12;
  console.log("after: " + elem);
  var elem;
}

console.log("outside: " + elem);

//before: undefined
//after: 12
//ReferenceError: elem is not defined...

 

 

checkHoist();

function checkHoist(){
  console.log("before: " + elem);
  elem = 12;
  console.log("after: " + elem);
}

var elem;
console.log("outside: " + elem);

//before: undefined
//after: 12
//outside: 12

checkHoist();

function checkHoist(){
  console.log("before: " + elem);
  console.log("after: " + elem);
  var elem = 12;
}

console.log("outside: " + elem);

//before: undefined
//after: undefined
//ReferenceError: elem is not defined...

checkHoist();

function checkHoist(){
  console.log("before: " + elem);
  console.log("after: " + elem);
}

elem = 12;
console.log("outside: " + elem);
var elem;

//before: undefined
//after: undefined
//outside: 12

 

함수 내에서 값 할당 후 변수의 선언이 없을 경우 해당 변수는 전역 범위를 갖게 된다.

checkHoist();
ifElem();

function checkHoist(){
  //elem에 21의 값을 할당했지만 변수를 선언하지는 않았다. ==> 전역변수
  elem = 21;
  console.log("before: " + elem);
  elem = 12;
  console.log("after: " + elem);
}

console.log("outside: " + elem);

function ifElem() {
  if (elem === 12){
    console.log(true);
  }
}

//before: 21
//after: 12
//true
//outside: 12

 

다른 예시들

checkHoist(elem);

function checkHoist(elem){
  elem = 21;
  console.log("before: " + elem);
  elem = 12;
  console.log("after: " + elem);
}

elem = 1212; //함수의 바깥에서 변수가 선언되었기 때문에 변수 elem은 전역범위를 갖게 된다.
console.log("outside: " + elem);
var elem;

//before: 21
//after: 12
//outside: 1212

//전역범위를 갖는 변수 elems, 변수 선언을 끝까지 하지 않은 상태
elems = 21;
checkHoist(elems);

//변수 elem는 checkHoist 함수의 매개변수이므로 지역범위를 갖게 된다.
function checkHoist(elem){ 
  console.log("before: " + elem);
  elem = 12;
  console.log("after: " + elem);
  //지역범위를 갖는 변수 elems, 값 할당을 하지 않은 상태
  console.log("after2: " + elems);
  var elems;
}

console.log("outside: " + elems);
console.log("outside2: " + elem);

//before: 21
//after: 12
//after2: undefined
//outside: 21
//ReferenceError: elem is not defined...

checkHoist(elems);

function checkHoist(elem){
  console.log("before: " + elem);
  elem = 12;
  console.log("after: " + elem);
}

elems = 21;
console.log("outside: " + elems);
console.log("outside2: " + elem);
var elems;

//before: undefined
//after: 12
//outside: 21
//ReferenceError: elem is not defined...

checkHoist(elems);

function checkHoist(elem){
  console.log("before: " + elem);
  elem = 12;
  console.log("after: " + elem);
}

elems = 21;
console.log("outside: " + elems);
console.log("outside2: " + elem);
var elems;
var elem;

//before: undefined
//after: 12
//outside: 21
//outside2: undefined