[JavaScript] var / let / const

0후·2022년 3월 3일
0

프론트엔드

목록 보기
25/41

변수 선언할 때 원래는 var만 있었으나 ES6 부터 letconst가 추가되었다. 쓰려고 보니 용어마다 미묘한 차이점이 있어 정리하고자 한다.

var

재선언 가능

var 변수는 중복해서 선언이 가능하다. 똑같은 변수명일 경우 마지막에 할당된 값이 저장된다.

var a = 1;
console.log(a);
// 결과
// 1

var a = 2;
console.log(a);
// 결과
// 2

재할당 가능

var 변수는 선언 및 초기화 이후에 다른 값을 재할당 시킬 수 있다.

var a = 1;
a = 5;
console.log(a);
// 결과
// 5

함수 레벨 스코프

var 변수는 함수 내부에 선언된 변수만 지역변수로 한정하고, if문, for문, while문, try/catch문 등을 포함한 나머지는 모두 전역변수로 간주한다.

function test(){
	var a = 1;
    console.log(a);
}
test();
// 결과
// 1

console.log(a); 
// 결과
// ERROR : a is not defined
if(true) {
	var a = 1;
  	console.log(a);
}
// 결과
// 1

console.log(a);
// 결과
// 1

호이스팅

변수를 생성할 때는 호이스팅이라는 현상이 일어난다. 호이스팅(Hoisting)이란 변수의 선언을 변수 범위 맨 위로 끌고 오는 현상 혹은 var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다. 따라서 전역 변수로 var 나이 = 30; 이라고 선언했다 치면, JavaScript는 선언 부분과 할당 부분을 해체해서 해석한다. 순서대로 해석하다가 변수를 만나면 var 나이;의 선언 부분을 페이지 맨 위로 끌고 올라오고, 나이 = 30;의 할당 부분은 변수를 직접 선언한 위치에서 할당하는 것이다.

console.log(나이);
// 결과 : 아직 변수를 선언하기 전인데도 에러를 뱉어내는 것이 아니라 undefined가 뜬다. 바로 호이스팅 현상 때문이다.
// undefined

var 나이 = 30;

console.log(나이);
// 결과
// 30

let

재선언 불가능

let으로 선언한 변수는 중복 선언이 불가능하다. 이미 선언한 변수를 다시 선언할 경우 이미 선언됐다고 에러메세지를 뱉는다.

let a = 1;
let a = 2; 
// 결과
// ERROR : Identifier 'a' has already been declared

재할당 가능

변수 선언 및 초기화 이후에 반복해서 다른 값을 재할당 할 수 있다.

let a = 1;
a = 2;
console.log(a);
// 결과
// 2

블록 레벨 스코프

var 변수와 다르게 함수 뿐만 아니라, if문, for문, while문, try/catch문 등의 코드 블록 {...} 에서 선언된 변수도 지역변수로 인식한다.

if(true) {
	let a = 1;
  	console.log(a);
}
// 결과
// 1

console.log(a);
// 결과
// ERROR : a is not defined

호이스팅

JavaScript는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, class)을 호이스팅한다. var 키워드로 선언된 변수와는 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다. 이는 let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다. 즉, 쉽게 말하면 letvar처럼 undefined를 자동으로 할당해주지 않는다.

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.
console.log(나이); // ReferenceError: 나이 is not defined

let 나이; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(나이); // undefined

나이 = 1; // 할당문에서 할당 단계가 실행된다.
console.log(나이); // 1

const

재선언 불가능

const로 선언한 변수는 중복 선언이 불가능하다. 이미 선언한 변수를 다시 선언할 경우 이미 선언됐다고 에러메세지를 뱉는다.

const a = 1;
const a = 2; 
// 결과
// ERROR : Identifier 'a' has already been declared

재할당 불가능

변수 선언 및 초기화 이후에 반복해서 다른 값을 재할당 할 수 없다. const는 상수다. 또한, 처음 선언할 때 반드시 값 할당을 해주어야 한다.

const a = 1;
a = 2;
console.log(a);
// 결과
// ERROR : Assignment to constant variable.

블록 레벨 스코프

var 변수와 다르게 함수 뿐만 아니라, if문, for문, while문, try/catch문 등의 코드 블록 {...} 에서 선언된 변수도 지역변수로 인식한다.

if(true) {
	const a = 1;
  	console.log(a);
}
// 결과
// 1

console.log(a);
// 결과
// ERROR : a is not defined

호이스팅

JavaScript는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, class)을 호이스팅한다. var 키워드로 선언된 변수와는 달리 const 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다. 이는 const 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다. 즉, 쉽게 말하면 constvar처럼 undefined를 자동으로 할당해주지 않는다.

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.
console.log(나이); // ReferenceError: 나이 is not defined

const 나이; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(나이); // undefined

나이 = 1; // 할당문에서 할당 단계가 실행된다.
console.log(나이); // 1

결론

ES6를 사용한다고 가정했을 때, 재할당 해야하는 경우가 아니면 기본적으로 const를 사용하고, 웬만해선 constlet을 사용하자. var 변수는 역사의 뒤안길로 사라질 때이다.

profile
휘발방지

0개의 댓글