요약
| var | let | const | |
|---|---|---|---|
| Scope | Function | Block | Block |
| 호이스팅 | O | O | O |
| 선언문 이전 접근 | O | X | X |
| 중복 선언 | O | X | X |
| 재할당 | O | O | X |
비교에 사용되는 개념을 알아보고 비교를 해보자.
스코프(Scope)란?
-
특정 식별자에 접근할 수 있는 범위
-
스코프 밖에서는 스코프 안의 값에 접근할 수 없다.
Function Scope : var
-
함수 내부 범위
-
함수 내부에 여러 블록이 있어도 블록을 무시하고 함수 내부 범위인 것으로 해석된다.
-
함수 외부에서는 접근 불가
function Scope() {
var x = 1;
console.log(x); // 1
if (true) {
var x = 2;
}
console.log(x); // 2,
}
Scope();
console.log(x); // ReferenceError: x is not definedBlock Scope : let, const
-
블록은 ‘{ }’범위를 의미
-
블록 외부에서는 접근 불가
Global Scope
-
프로그램 전체 범위
-
프로그램 전체에서 접근 가능
-
변수 이름 충돌, 프로그램 전 생애 주기 동안 존재하여 메모리 차지 등 여러 문제가 발생할 수 있으므로 사용을 최소화해야 한다.
호이스팅이란?
-
변수의 선언이 해당 스코프의 최상단으로 끌어올려지는 것이다.
-
변수에 값을 할당하는 과정은 선언과 초기화 2단계가 있다. 이 중 선언 단계에서 스코프 최상단으로 올려지는 것이 호이스팅이다.
-
var, let, const 모두 호이스팅이 발생한다.
var
console.log(num); //undefined
var num = 10;
console.log(num); //10-
var로 선언된 변수는 스코프의 최상단으로 호이스팅되며,
-
호이스팅 시점에 undefined로 초기화된다.
-
이는 var 변수를 실제 코드에서 선언 및 초기화하기 전에 접근해도, ReferenceError 대신 undefined 값을 반환하는 이유이다.
let, const
-
변수 선언은 스코프 최상단으로 끌어올려진다. (호이스팅 발생)
-
그러나 초기화 코드에 도달하기까지 TDZ(Temporal Dead Zone)에 위치하여 선언문 이전 접근을 방지한다.
-
TDZ에 위치한 변수에 접근하면
ReferenceError가 발생하며 호이스팅이 안되는 것 처럼 보인다. -
즉, let, const는 선언은 호이스팅되지만 TDZ에 의해 접근이 제한된다.
중복 선언이란?
- 동일한 변수명을 다시 선언 하는 것
var x = 'hi';
//...
var x = 'hello';
console.log(x); //hello
-
var 키워드는 중복 선언이 가능하다.
-
해당 변수명이 앞에서 사용됐는지 모르고 선언하는 일이 발생할 수 있다.
-
let과 const는 중복 선언이 안된다. SyntaxError가 발생하여 안전한 코드를 작성할 수 있게 해준다.
재할당이란?
-
선언과 초기화가 완료된 변수에 다른 값을 할당하는 것
-
var, let, const 키워드 없이 값을 할당하는 코드이다.
let x = 1;
x = 2;
console.log(x); // 2, 재할당 가능
const y = 1;
y = 2; // TypeError: Assignment to constant variable. 재할당 불가능-
const는 값의 변경(재할당)이 불가능
-
하지만 객체로 선언한 경우 객체의 속성은 변경할 수 있다.
const a = {
x: 1,
y: 2,
}
a.x = 3; // 가능
console.log(a);
//{ x: 3, y: 2 }
a = 10; // 불가능- const로 선언된 변수는 재할당이 불가능하다. 이는 변수에 새로운 값을 할당할 수 없음을 의미하지만, 객체나 배열과 같은 참조형 데이터는 해당 객체 내부의 속성을 변경할 수 있다.
참조형 데이터 특징과 const
- 메모리 주소를 통해 데이터 접근.
- const 선언: 변수가 가리키는 메모리 주소 변경 불가. 내부 속성(객체, 배열) 변경 가능.
- 이유: const는 변수에 할당된 메모리 주소를 고정하지만, 해당 주소에 저장된 데이터 구조 내부는 수정 가능.
더 알아볼 개념
기본형 데이터value copyreference copy
