JS | var, let, const 차이

차이점

var는 함수 범위를 가지며, 호이스팅의 특성 때문에 혼란을 줄 수 있다
중복선언과 재할당 모두 가능하다

 

let과 const는 블록 범위의 특징을 갖는다
특정 블록(if, for) 내에서 선언된 변수가 해당 블록 밖에서 접근 불가능하다는 것을 의미
let은 중복선언은 불가능하다 재할당은 가능하다

 

const는 let과 var와 달리 한번 값을 할당하면 그 값을 변경할 수 없다

 

let과 const를 사용함으로써, 변수의 재할당과 재선언에 관련된 일반적인 문제점들을 피할 수 있는데 이로 인해 코드의 버그 발생 확률이 줄어들고, 코드의 안정성이 향상된다

 

현재 개발에서는 var의 한계와 문제점들을 피하기 위해 let과 const를 주로 사용하며,
변수의 재할당이 필요하지 않은 경우 const,
필요한 경우에는 let을 사용하는 것이 권장된다

---

var - 변수를 선언하는 옛날 방식

ES6(ES2015) 이전의 자바스크립트에서 변수를 선언하는 유일한 방법

- 함수 스코프 : var로 선언된 변수는 함수 스코프를 가짐
                        즉, 함수 내부에서만 유효하며, 블록({}) 내부에서 선언되어도 함수 전체에서 접근 가능

- 재선언 가능 : 같은 이름의 변수를 여러 번 선언할 수 있음

- 호이스팅 : var로 선언한 변수는 선언 전에 접근할 수 있음
                   변수 선언이 코드의 맨 위로 끌어 올려지는 것처럼 동작하지만, 초기화는 끌어올려지지 않음
                   따라서 선언 전에 접근하면 undefined가 나옴

 

예시

console.log(x); // undefined(호이스팅)
var x = 5;

if (true) {
  var y = 10; // 함수 스코프
}

console.log(y); // 10 (블록 밖에서도 접근 가능)

 

문제점

변수의 중복 선언 가능

이미 선언했던 변수명을 모르고 또 사용할 경우, 기존에 있던 변수는 전혀 다른 값을 가지게 됨
그 경우, 그 변수를 사용하는 다양한 로직들에 치명적인 문제가 생김

for문에서의 문제점

var는 function-scoped이기 때문에, for문에서 순회를 위해 i라는 변수를 var로 선언한 경우, 이 변수는 for문이 종료되어도 접근이 가능하게 됨

만약 for문의 함수 내부가 아닌, 함수 외부에 전역적으로 돌아갈 경우 for문에서 사용한 var변수들은 전역 변수로서 역할을 하므로, 전역 변수가 남발될 수 있다

 

호이스팅

var키워드를 사용해 변수 선언 시, 해당 변수의 선언부를 최상단으로 올리는 것
JavaScript의 변수 생성과 초기화의 작업이 분리되어 진행되기 때문에 이런 현상 발생

var는 기존 c나 java의 Block-scoped가 아니라 Function-scoped
따라서 코드 전체의 최상단이 아닌 함수 내부의 최상단으로 이동함

( function-scoped는 중괄호로 구분된 영역의 범위를 갖는 것이 아닌 함수 내부의 영역을 범위로 갖는 것을 의미 )

 

---

let - 변수를 선언하는 현재 방식

ES6에서 도입된 변수 선언 방법, var의 단점을 해결하기 위해 만들어짐

- 블록 스코프 : let으로 선언된 변수는 블록 스코프를 가짐
                        즉, 변수가 선언된 블록({})내부에서만 유효

- 재선언 불가능 : 같은 스코프 내에서 같은 이름으로 변수를 다시 선언할 수 없음

- 호이스팅 : let 변수도 호이스팅이 일어나지만 TDZ(Temporal Dead Zone)라는 보호 구역이 있어 선언 전에 변수에 접근하려 하면 ReferenceError가 발생

 

예시

console.log(a); // ReferenceError (TDZ 때문에 선언 전 접근 불가)
let a = 5;

if (true) {
  let b = 10; // 블록 스코프
  console.log(b) // 10
}

console.log(y); // ReferenceError (블록 밖에서는 접근 불가)

 

---

const  - 상수를 선언하는 방식

ES6에서 함께 도입된 상수 선언 방법, 변경되지 않는 값을 선언할 때 사용

그러나 객체나 배열과 같은 참조 자료형은 내부 상태가 변경될 수 있음

- 블록 스코프 : const도 let처럼 블록 스코프를 가짐

- 재선언 불가능 : let과 마찬가지로 같은 이름으로 변수를 다시 선언할 수 없음

- 재할당 불가능 : 한 번 값을 할당하면, 재할당이 불가능
                           다만, 참조 자료형(객체, 배열 등)은 내부 값을 변경할 수 있음

- 호이스팅 : const 역시 호이스팅이 발생하지만, 선언 전에 접근하려면 ReferenceError가 발생

 

---

var, let, const - 한눈에 알아보자

	중복선언	재할당	스코프(Scope)	호이스팅(Hoisting)	전역객체 프로퍼티
var	가능	가능	함수레벨 스코프	호이스팅 시 undefined로 변수 초기화 (호이스팅 수행)	할당
let	불가능	가능	블록레벨 스코프	선언 단계-TDZ-초기화 단계-할당 단계로 분리되어 진행 호이스팅되지만 TDZ로 보호	undefined
const	불가능	불가능	블록레벨 스코프	초기화 이전 접근 시 ReferenceError 발생 호이스팅되지만 TDZ로 보호	undefined