[JavaScript] var, let, const의 차이점

var, let, const 차이점 5가지 Preview

1. 중복선언 가능 여부
2. 재할당 가능 여부
3. 변수 스코프 유효범위 (유효한 참조 범위)
4. 변수 호이스팅 방식
5. 전역객체 프로퍼티 여부

	var	let	const
중복 선언	O	X	X
값의 재할당	O	O	X
Scope	function-level	block-level	block-level
변수 호이스팅	발생	발생	발생
전역객체의 프로퍼티	O	X	X

---

1. 중복선언 가능 여부

• var: 중복 선언이 가능

//1st var declare & initialize
var a = 10;
console.log(a) //10

//2nd var declare & initialize
var a = 20;
console.log(a) //20

//3rd var declare
var a;
console.log(a) //20

var로 선언한 변수는 중복해서 선언과 초기화가 가능하다.

이 경우, 마지막에 할당된 값이 변수에 저장된다.

 

단, 초기화 없이 선언만 한 경우에는 선언문 자체가 무시되고 에러는 발생하지 않는다.

• const, let : 중복 선언 불가능

//let 중복 선언
let a = 10;
let a = 20; //SyntaxError

//const 중복 선언
const b = 10;
const b = 20; //SyntaxError

let과 const로 선언한 변수는 중복 선언이 불가능 하다.

위의 예시와 같이 이미 선언한 변수를 재선언 할 경우 에러가 발생한다.

2. 재할당

• var, let: 값 재할당 가능한 변수

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

let b = 11;
b = 22;
console.log(b); //22

var과 let은 변수를 선언하는 키워드이다.

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

• const : 값 재할당 불가능한 상수

const c = 11;
c = 22; //TypeError

const는 상수를 선언하는 키워드이다.

선언 및 초기화를 하고나면 다른 값을 재할당 할 수 없다.

⚠️const는 처음 선언할 때 반드시 초기화를 해주어야 한다.

3. Scope

스코프란 유효한 참조 범위를 말한다.

예를 들어, 함수 내부에서 선언된 변수는 함수 내부에서만 참조가 가능하다.

• var: 함수 레벨 스코프

var은 함수 내부에 선언된 변수만 지역변수로 한정하며 나머지는 모두 전역변수로 간주한다.

function hello() {
	var a = 10;
    console.log(a);
}

hello(); //10

console.log(a); //ReferenceError

hello 함수 내부에서 선언된 a 변수는 함수 내부에서만 참조가 가능하며 외부에서는 에러가 발생한다.

 

하지만 함수를 제외한 영역(ex. if, for, while, try/catch)에서 var로 선언한 변수는 전역변수로 취급된다.

if(true) {
	var a = 10;
    console.log(a); //10
}

console.log(a); //10

• const, let : 블록 레벨 스코프

function block_level() {
	if(true){
    	let a = 123;
        console.log(a); //123
    }

console.log(a); //ReferenceError
}

console.log(a); //ReferenceError

function, if, for, while, try/catch 등 모든 코드블록 내부에서 선언된 변수는 코드 블록 내부에서만 유효하다.

4. 호이스팅 방식

호이스팅 Hoisting이란?

자바스크립트 함수는 실행되기 전에 함수 내 필요한 변수 값들을 모두 모아 유효범위의 최상단에 선언한 것 처럼 동작한다.

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

• var 선언문 호이스팅

console.log(a); //undefined

var a = 123;
console.log(a); //123

변수 a가 선언되기 전에 참조시, 에러가 발생하지 않고 undefined가 출력된다.

이는 코드 실행 전에 자바스크립트 내부에서 미리 a변수를 선언하여 undefined로 초기화 해두었기 때문이다.

 

• const, let 선언문 호이스팅

console.log(a); //ReferenceError

let a = 123;
console.log(a); //123

let의 경우 변수 a가 선언되기 전에 참조하면 에러가 발생한다.

var 변수 선언은 선언과 동시에 초기화가 이루어지지만 let, const 변수는 선언만 해놓고 초기화기화하기 전까지 TDZ에 머물러 있어 참조가 불가능하다.

 

5. 전역객체 프로퍼티 여부

• var: 전역객체(브라우저 환경의 경우 window)의 프로퍼티이다.브라우저 환경(크롬 콘솔 등)에서 실행 시, var로 선언한 변수 a는 브라우저 전역 객체인 window의 프로퍼티로 할당된다.

var a = 10;

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

• const, let: 전역객체 프로퍼티가 아니다.

var a = 10;

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

 

결론!

그냥 const를 쓰자