[JS] var/let/const 그리고 Hoisting

var/let/const

1. 변수 선언 방식

1-1. var는 변수 중복 선언을 허용하기에 의도치 않은 변수값의 변경이 일어날 가능성 존재

var test = "test";
console.log(test); // test

var test = "varvar";
console.log(test) // varvar

1-2. let과 const는 변수 중복 선언 불가

let test = "test";
console.log(test); // test

let test = "varvar";
console.log(test) 
// Uncaught SyntaxError: Identifier 'test' has already been declared

1-3. let과 const의 차이점은 변수값 재할당 여부

let은 변수에 재할당 가능!

let test = "varvar";
console.log(test); // varvar

test = "testtest";
console.log(test); // testtest

const은 변수에 재할당 불가능!!

const test = "varvar";
console.log(test); // varvar

test = "testtest";
console.log(test); 
// Uncaught TypeError: Assignment to constant variable

표로 정리하자면, 아래 내용과 같다.

호이스팅(Hoisting)

1. 개념

• var 선언문이나 함수 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성

2. 특징

• 자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언을 호이스팅 함
• 하!지!만! var로 선언된 변수와 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError) 발생

3. var와 let

• 변수는 3단계에 걸쳐서 생성됨: 선언 단계 / 초기화 단계 / 할당 단계
• var로 선언된 변수는 선언 단계와 초기화 단계(undefined로 초기화)가 한번에 이루어짐
  ➡️ 따라서 변수 선언문 이전에 변수에 접근하여도, 스코프에 변수가 존재하기 때문에 에러가 발생하지 않음
• let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됨
  ➡️ 따라서 초기화 이전에 변수에 접근하려고 하면 참조 에러 발생

참고 블로그

• [JavaScript] 호이스팅(Hoisting)이란
• Javascript의 변수와 호이스팅에 대해 (let, var, const...)
• var, let, const 차이점
• 6.1 let, const