var, let, const, Hoisting

var - 재선언 o, 재할당 o, 범위 function-level scope
let - 재선언 x, 재할당 o, 범위 block-level scope
const - 재선언 x, 재할당 x, 범위 block-level scope

재선언

var a;
var a; // 재선언 가능

let b;
let b; // 에러

const c;
const c; // 에러

재할당

var a = 1;
a = 2;   // 재할당 가능

let b = 1;
b = 2;   // 재할당 가능

const c = 1;
c = 2;   // 에러

function-level scope

function myFnc(){
  var a = 1;
  console.log(a);  // 가능
} 

console.log(a);  // 에러

block-level scope

for(let i=0; i<10; i++){
  console.log(i); // 가능
}

console.log(이름); //에러

Hoisting 호이스팅

변수나 함수선언문, 함수표현식이 유효범위의 최상단으로 끌어올려지는 것처럼 보여지는현상

정확히 말하면 실행 컨텍스트가 활성화 되었을때 해당 영역에서 변수의 이름을 메모리에 먼저 수집해서 발생하는 현상

변수

console.log(name);
var name = 'Kim';

위 코드는 아래처럼 해석 됨

var name;  // 변수의 선언부분을 분리시켜서 위로 올림.

console.log(name);
name  = 'Kim'; // 할당부분만 있음.

확인을 해보면

//var = name;
console.log(name);   // name은 undefined, 선언은 되어있지만 할당은 되어있지 않음.

var name = 'Kim';
//name = 'Kim';
console.log(name);  // name 은 'Kim'

*let, const는 undefined가 할당 되지 않고 그냥 빈공간 상태로 에러남
(temporal deadzone / uninitialized)

함수선언문

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

a();

위 코드는 선언 후 호출이라서 호이스팅 없이 됨.

a();

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

이번 코드는 a(); 함수 호출을 먼저 읽기 때문에 호이스팅이 필요함.

var a = function a(){ 
  console.log('Hello');
}

a();

위 처럼 함수 전체를 끌어올려 해석함(호이스팅)

함수표현식

console.log(a);

var a = function a(){ 
  console.log('Hello');
}

위 코드를 풀어보면 아래처럼 해석함.

var a; // 선언부분 분리

console.log(a); // 따라서 a는 undefiend

a = function a(){ 
  console.log('Hello');
}
console.log(a); // function a()..