자바스크립트에서 변수를 선언할 때 사용하는 var, let, const의 특징과 차이점에 대해 공부한 내용을 정리하였습니다.
변수란?
값을 저장할 수 있는 메모리상의 공간
선언
특정 이름(변수명,식별자)을 가지는 변수를 만들겠다고 컴퓨터에게 알리는 것.
let a;할당
변수에 값을 저장하는 것. 할당연산자=를 사용
let a= 10;
a = 20;초기화
변수 선언 후 처음으로 값을 저장하는 것
1. 자바스크립트 변수 선언 방식
1.1. let
-
let은 실행 중에 변할 수 있는 데이터(변수)를 저장하는 변수를 선언할 때 사용됩니다. -
let으로 선언된 변수는 같은 스코프 내에서재선언불가능
let a = 10;
let a = 20; // SyntaxError 발생
const a = 20; // SyntaxError 발생
- 같은 변수명이여도 스코프가 다르면 재선언할 수 있습니다.
let a= 10; // 전역 스코프
if(true){
let a = 20; // if문이 a의 스코프
console.log(a); // 20 출력
}
console.log(a) // 10 출력
스코프(scope)란 변수의 유효 범위입니다.
let으로 선언된 변수의 값은재할당가능
let a= 10;
a = 20; 1.2. const
-
const는 실행 중 변하지 않는 데이터(상수)를 담는 변수를 선언할 때 사용됩니다. -
const으로 선언된 변수도 let과 마찬가지로 같은 스코프 내에서재선언불가능다른 스코프 내에서는 가능합니다.
const a = 10;
const a = 20; // SyntaxError 발생
let a = 20; // SyntaxError 발생
const로 선언된 변수의 값은재할당불가능
const a = 10;
a = 20; // SyntaxError 발생- 따라서
const로 변수를 선언할 때는 선언과 동시에 초기화해줘야 합니다.
const a;
a = 20;
//Uncaught SyntaxError: Missing initializer in const declaration 1.3. var
let과 const말고 var를 사용하여 변수를 선언할 수 있습니다.
-
var는 let과 const가 등장하기전까지 사용된 선언 키워드입니다. 사용방법은 동일합니다. -
하지만
var는 여러 문제점을 가지고 있어 권장되지 않습니다.
2. var의 문제점
2.1. 재선언 가능
var로 선언한 변수는 같은 스코프 내에서 재선언해도 에러가 발생하지 않습니다.
var a = 10;
var a = 20; 2.2. 상수 선언 불가
const가 없었을 때는 var만으로 변수를 선언하였습니다. var는 재할당이 가능하기 때문에 상수를 선언할 수 없었습니다.
2.3.선언되기 전에 사용 가능
var로 선언된 변수가 호이스팅될 때, 선언과 동시에 undefined로 초기화됩니다.
console.log(a); // undefined 출력됨
var a=20;// 이 코드를 만날때 값이 20으로 할당됨
console.log(a); // 20 출력호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에(변수 선언 코드를 만나기 전에) 미리 할당하는 것을 의미합니다.
let과const의 경우, 호이스팅될 때 선언만 됩니다. (초기화 x)
console.log(a); // Cannot access 'a' before initialization
console.log(b); // 동일 에러 발생
let a=20;// 이 코드를 만날 때 값이 20으로 초기화됨
const b=20;let의 경우, 변수 선언 코드를 만날 때 undefined로 초기화되거나 값이 할당됩니다.
let a;
let b=20;
console.log(a); // undefined 출력됨
console.log(b); // 20 출력됨호이스팅 되고 난 후 변수 선언 코드를 만나 초기화 되기까지를 TDZ(Temporal Dead Zone,시간상 사각지대) 라고 합니다.
2.4. var는 블록 스코프가 아니다
var로 선언한 변수의 스코프는함수 스코프or전역 스코프입니다. 따라서 블록 밖에서 접근 가능합니다.
if(true){
var a = 10;
}
console.log(a); // 10으로 출력됨
var는 블록을 무시하기 때문에 a는 전역변수가 됩니다. 따라서 a가 정상 출력됩니다.
const랑let로 선언한 변수의 스코프는블록 스코프입니다.
if(true){
let a = 10;
}
console.log(a);
// Uncaught ReferenceError: a is not defined 에러 발생
따라서 a는 if문 안에서만 접근 가능하고 ReferenceError가 발생합니다.
2.5. 정리
위와 같은 var의 특징으로 인해, var로 변수를 선언할 시 예상치 못한 오류나 의도하지 않은 결과를 야기할 수 있습니다.
참고
