var, let, const 차이

Javascript 변수, 상수

Javascript를 공부하던 중 변수를 선언하는 방식이 크게 var, let 그리고 const가 존재하는 것을 알게 되었다. 기존에 공부했던 C, C++, Java 와는 다른 방식의 변수 선언을 보고 차이점이 궁금하여 각 변수 키워드의 차이를 알아보고자 한다.

var 이란?

- ES5까지 사용된 변수 선언 키워드

- 중복 선언 가능

- 재할당 가능

- 함수 레벨 scope

- 호이스팅

- 전역 개체 프로퍼티

var 은 Javascript에서 ES5까지 변수를 선언할 수 있는 유일한 키워드이다. 비교적 let에 비해 과거에 사용했던 키워드라고 해서 현재 사용 불가능하진 않다. 많은 JS 코드들이 var로 구성되어 있는 경우도 많고 현재도 var을 키워드로 사용 가능하다.

1. 중복 선언 가능

var a = 'hello';
console.log(a); // hello 출력

var a = 'bye';
console.log(a); // bye 출력

변수를 한번 선언한 뒤 또 선언해도 다른 값이 출력된다. 이러한 특성은 필요할 때마다 변수를 수정하여 사용할 수 있어서 편리한 장점이 있지만 같은 이름으로 변수를 남용하여 혼란을 야기할 수 있기 때문에 단점이 더 크다. 이를 보완하기 위해 ES6에서 let, const가 등장하였다.

2. 재할당 가능

var a = 'hello';
console.log(a); // hello 출력

a = 'bye'; // 새로 재할당 
console.log(a); // bye 출력

변수를 최초 선언 한 뒤 새로운 값으로 재할당이 가능하다. 초기화 이후 반복해서 다른 값으로 변경이 가능하다.

3. 함수 레벨 스코프

let test = () => {
	var a = 5;
    console.log(a);
 }
test(); // 5
console.log(a); // Uncaught ReferenceError: a is not defined <- 에러 메시지

var는 함수 내부에 선언된 변수만 지역변수로 한정하고 나머지는 모두 전역 변수로 간주한다. test 함수 내부에서 할당된 변수 a는 함수 내부에서만 참조 가능하고 외부에서는 참조 불가능하다.

4. 호이스팅 방식

console.log(a); // undefined
var a = 5;
console.log(a); // 5
// 문제 없음, 에러 동작 X

자바스크립트는 소스 코드 실행 과정에서 2단계로 실행하는데 1번째가 변수 기록 및 실행 컨택스트 생성, 2번째가 소스 코드를 한 줄씩 실행하는 단계이다. 이 과정에서 var과 let, const 간의 호이스팅 방식이 다르다. var는 미리 선언하지 않은 변수를 출력해도 에러 없이 JS에서 undefined로 고정시켜둬 문제가 발생하지 않는다.

5. 전역 객체 프로퍼티(O)

var a = 10;
console.log(window.a); // 10
console.log(a); // 10

var로 선언된 변수는 전역 객체의 프로퍼티다.

let 이란?

- ES6부터 등장한 키워드

- 중복 선언 불가능

- 재할당 가능

- 블록 레벨 스코프

- 호이스팅

let 은 Javascript의 ES6에 새로 나온 변수를 선언할 수 있는 키워드이다. var가 가지고 있는 단점들을 보완하고자 등장하였고 현재 var 보다 let 사용을 권장한다.

1. 중복 선언 불가능(X)

let a = 'hello';
console.log(a); // hello 출력

let a = 'bye'' // Uncaught SyntaxError: Identifier 'a' has already benn declared <- 에러 메시지

변수를 최초 한번 설정하면 또 다시 선언이 불가능하다. var 변수가 가진 같은 이름의 변수를 여러 번 남용하는 것을 방지해주는 단점을 보완하고 있다.

2. 재할당 가능

let a = 'hello';
console.log(a); // hello 출력

a = 'bye'; // 새로 재할당 
console.log(a); // bye 출력

변수를 최초 선언 한 뒤 var처럼 재할당이 가능하다.

3. 블록 레벨 스코프

if(true) { // if문 블록 안에서 선언(지역변수)
	let a = 5;
    console.log(a); // 5
}

console.log(a); // Uncaught ReferenceError: a is not defined <- 에러 메시지

let은 함수뿐만 아니라 모든 코드 블록(for, if, while, try/catch 등등) 안에서 선언된 변수는 모두 지역변수로 취급하고 마찬가지로 내부에서 선언된 변수는 외부에서는 참조되지 않는다.

4. 호이스팅 방식

console.log(a); // Cannot access 'a' before initialization <- 에러 메시지 
var a = 5;
console.log(a); // 5

let의 경우 호이스팅 방식이 var 과는 달라 에러가 발생한다. let의 호이스팅 방식은 변수 선언만 해두고 코드 실행 과정에서 변수 선언문을 만났을 때 수행하여 이러한 에러를 발생시킨다.

이와 관련하여 변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)이 있는데 이는 다음에 다뤄고 보자 한다.

5. 전역 객체 프로퍼티(X)

let a = 10;
console.log(window.a); // undefined
console.log(a); // 10

let으로 선언된 변수는 전역객체 프로퍼티가 아니다.

const 란?

- 재할당 불가능

- 그 외 부분 모두 let과 동일

const는 최초 선언 시 새로운 값으로 재할당이 불가능한 상수이다. 절대 변하지 않는 파이값, 날짜, 퍼센트 등을 const로 지정한다. const 또한 ES6에 새로 등장하여 재할당 부분을 제외하고 모두 let과 동일하다

+ 추가로 const를 사용한다고 해서 아예 수정 불가능한 것은 아니다. 배열, object 의 값을 변경하는 것은 가능하다

const arr = ["apple", "banana", "peach"];
arr.push("pineapple");

// 추가 및 수정 가능 
console.log(arr) // ["apple", "banana", "peach", "pineapple"]

그래서 어떤 키워드를 사용해야 되나?

=> var 대신 let, const를 이용하자

var 이 가지고 있는 단점들을 보완한 부분이 let, const이기 때문에 var 보다 let, const를 사용을 권유한다.

Google의 Javascript 스타일 가이드에서도 var 대신 let, const을 사용하라고 하는데 링크 또는 아래의 직접 번역한 문구 참고.

[ Google Javascript 스타일 가이드 일부 ]

5.1 지역 변수 선언

5.1.1 const와 let을 사용해라

모든 지역 변수 선언은 const 또는 let으로만 선언해라. const를 디폴트로 사용하고 재할당이 필요한 경우 let을 사용해라. var 은 절대 사용되어서는 안 된다.

Summary

	var	let	const
중복 선언 가능 여부	O	X	X
재할당 여부	O	O	X
변수 스코프	함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
변수 호이스팅 방식	초기화 전 참조 가능	초기화 전 참조 불가능	초기화 전 참조 불가능
전역객체 프로퍼티	전역객체 O	전역객체 X	전역객체 X

Ref

https://ko.javascript.info/

https://google.github.io/styleguide/jsguide.html#features-local-variable-declarations

'FrontEnd > Javascript' 카테고리의 다른 글

JS 정렬(sort) 방법 (0)	2021.06.16
JS 화살표 함수(arrow function) (0)	2021.06.05