let, const

앞서 다룬 내용은 var키워드로 전역변수로 선언하면 중복 선언 및 예상치 못한 문제를 야기해서 사용하지 않는게 좋다고 했다. let, const 키워드를 알아본다.

let

변수 중복 선언 금지

var 키워드는 변수 중복 선언이 가능했으나 let 키워드는 중복 선언시 문법 에러가 발생하게 된다.

let test = 'hi'
let test = 'bye'	// syntaxError 발생

블록 레벨 스코프

var 키워드는 코드블록 사이에 선언된 변수도 전역 변수로 선언됐다. let키워드는 모든 코드 블록에서 지역 스코프로만 인정하는 블록 레벨 스코프를 따른다.

let test = "hi"
if(true){
	let test = "bye"
    console.log(test)	// "bye" 같은 식별자명을 가진 변수지만 문맥상 지역 스코프의 변수 값을 참조
    let test2 = "hello"	//	코드 블록내에서 선언한 변수
}
console.log(test)	// "hi"
console.log(test2)	//	ReferenceError 코드 블록 내에서 선언한 변수는 지역 스코프를 가지기에 참조 못함

변수 호이스팅

변수 호이스팅에 대해 공부할때 let키워드로 선언한 변수는 호이스팅이 안되는것처럼 보였다.

console.log(test)	// 레퍼런스 에러
let test

let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 자바스크립트 엔진이 암묵적으로 선언단계를 진행하나 초기화 단계가 런타임시 선언문에 도달해야 진행된다. 선언 단계와 초기화 단계까지 참조 할 수 없는 구간을 일시적 사각지대라 부른다.
결국 먼저 선언 단계를 진행하니 호이스팅은 발생했다.

const

const 키워드는 상수를 선언할때 사용한다. 선언시 변수는 동시에 초기화를 해 줘야한다.

const test	// SynataxError const로 선언 했지만 초기화를 하지 않았다

const test = 1;

let 키워드와 마찬가지로 블록 레벨 스코프를 가지고 호이스팅이 발생하지 않는것 처럼 보인다.

재할당 금지

const 키워드는 상수로 사용한다 했다. const 키워드로 선언한 변수는 재할당이 불가능하다.

const test = 1
test = 2	// typeError

상수

상수는 재할당이 금지된 변수를 뜻한다. const 키워드로 선언된 변수에 원시값을 할당시 그 값은 변경이 불가능한 값이 된다. 상수는 대문자로 선언하거나 여러 단어로 이뤄진 경우는 언더코어(_)로 구분한다.

const TAX_COST = 1.1	// 상수에 두 단어로 이뤄졌기에 언더코어로 상수명을 정했다. 세금율은 변하지 않기에 상수로 선언
function taxPrice (x) {	// 기본 가격에 세금 10%를 더해서 계산하는 함수
	return x * TAX_COST 	
}
console.log(taxPrice(100))	// 110  기본 가격인 100에 10%인 10을 더한 값이 나온다

const 키워드와 객체

const 키워드로 원시값을 할당시 변경이 불가능하다. 하지만 객체를 할당시 변경이 가능하다.

const test = {
	x : 1
}
test.x = 2
console.log(test.x)	// 2

const 키워드는 재할당이 금지일뿐 불변이 아니다.

정리

우선순위 const > let > var(애는 안쓰는게 좋다.)
let 키워드를 쓰더라도 변수의 스코프를 최대한 좁게 만들어서 영향을 최소화 한다.
최대한 const 를 사용하다 나중에 문제시 바꾸자