hoisting에 대해

1 분 소요

hoisting이란?

코드가 실행되기전에 JavaScript Engine이 선언된 변수와 함수를 메모리에 기억을해둠. 나중에 그 변수가 호출되었을때 메모리에있는 값을 불러서 반환해줌.

var란?
ES6 이전에쓰이던 변수 선언문이다. 여러 문제들을 알아보자

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

결과값은 undefined, 1이 나온다.
변수가 할당되기 전인데 에러가 안나온다고?
hoisting시 특성상 변수의 선언과 초기화를 같이 시키기 때문이다.
변수안에 undifined라는 값을 우선적으로 주고, 코드가 있는 그 줄 가서 할당을 한다.

전역변수와 지역변수 개념이 확실치않다.

for (var i = 0; i < 5; i++) {
  console.log(i);
}

이건 당연히 1 2 3 4가 나온다.

for (var i = 1; i < 5; i++) {
  console.log(i);
}
console.log(i);

지역변수인 i가 for문바깥에서 선언되어서 에러가 날것같지만 엥? 1 2 3 4 5까지 나와버린다!!

또 다른예로

function scope(){
    if(true){
        var a = 123
    }
    console.log(a)
}
scope()

if문을 빠져나와 console.log를 입력해도 123이라는 결과값이 나온다

함수만 지역변수로 hoisting이되고 if,for나머지는 다 전역변수로 취급하면서 문제가 발생한다.

var a = 2;
console.log(a);
var a = 9;
console.log(a);

이런 말도안되는 로직에도 2 9로 결과값이 반환된다.

let?

console.log(a);
let a = 20;
console.log(a);

에러반환이된다!

선언된라인이 나오기 전까지 a에 접근할수없음, 사용할수없다.(TDZ)

let a = 2;
console.log(a);
let a = 9;
console.log(a);

당연히 에러가 반환된다.

for (var i = 1; i < 5; i++) {
  console.log(i);
}
console.log(i);

마지막줄의 i는 지역변수에 접근 할 수 없어서 에러반환.

상수를 저장함. ID,PASSWARD등.

const id = "sua";
const passward = "drama";

id = "brush";

이렇듯 값을 바꾸려고 하면 에러발생