자바스크립트 const, let, var 의 차이점과 사용 예제

const

const 는 블록의 문맥 내에서 재할당 할 수 없는 변수.
즉 한 번 선언하면 변경할 수 없다.
* const 사용 시 이점: 값이 변경되지 않으므로 긴 소스를 읽을 때 해당 변수가 변경될 염려가 없으므로 코드 읽기가 쉬워짐.

const 예제

const gstRate = 0.2;
const total = 100 + (100 * gstRate);
// after 100 lines
return `Total amount to pay is ${total}.`;

var 예제

var gstRate = 0.2;
var total = 100 + (100 * gstRate);
// after 100 lines
return `Total amount to pay is ${total}.`;

var를 이용해서 값을 할당한 경우 total 이 어떤 값이 될 지 알 수 없음.



그러나 배열의 항목은 변경 가능함. (변수를 재할당할 수는 없지만, 값을 바꿀 수는 있음) const 의 배열 변경 예제

const availableForSale = [];

// …

for (let i=0; i<items.length; i++) {
	if (items[i].availableForSale) {
		availableForSale.push(items[i]);
	}
}

let

값이 변경되는 경우 let을 사용
let은 값을 재할당 할 수 있다는 점에서 var와 유사하지만 var는 어휘적 유효 범위(lexical scope)을 따르는 반면, let은 블록 유효 범위(block scope)를 따른다.
즉 var로 선언한 변수는 같은 블록이 아닌 곳에서 재선언이 되어도 값이 변경되며, let은 같은 블록 내에서만 영향을 받는다.

var 를 사용한 경우 예제

function getCheapestPrice(product) {
	var count = product.inventory;
	var price = product.price;
	if (product.salePrice) {
		var count = product.saleInventory;
		if (count > 0) {
			price = product.salePrice;
		}
		if (count) {
			return price;
		}

		return 0;
	}
}

위의 예제와 같이 count가 중복으로 선언된 경우 var를 이용하면 아래에 선언된 값으로 count 값이 변경되어 오류가 발생할 수 있다.

let을 사용한 경우 예제

function getCheapestPrice(product) {
	let count = product.inventory;
	let price = product.price;
	if (product.salePrice) {
		let count = product.saleInventory;
		if (count > 0) {
			price = product.salePrice;
		}
		if (count) {
			return price;
		}

		return 0;
	}
}

let은 블록 유효 범위를 따르므로 블록 내부에 선언한 변수는 블록 외부에 존재하지 않음. 따라서 위의 예제에서 count 값이 변경되지 않으므로 오류를 피할 수 있다.


var를 사용하면 같은 유효 범위에서 같은 이름의 변수를 다시 선언할 수도 있다. 그러나 let과 const는 같은 이름의 변수를 다시 사용할 수 없다.
따라서 let을 사용하면 의도치 않게 변수 이름을 재사용하게 될 때 큰 문제를 피할 수 있다.