15장 let, const 키워드와 블록레벨 스코프

15.1 var 키워드로 선언한 변수의 문제점

15.1.1 변수 중복선언 허용

var 키워드로 선언한 변수는 중복선언이 가능하다.

var x = 1;
var y = 1;

var x = 100;
var y; // 초기화문이 없는건 무시

console.log(x); // 100
console.log(y); // 1

중복선언, 값할당됬다면 의도치않게 먼저 선언된 변수값이 변경되는 부작용이 발생한다.

15.1.2 함수 레벨 스코프

var 키워드로 선언한 변수는 오직 함수블록만을 지역스코프로 인정한다.

var x = 1;

if(true) [
	var x = 10;
}

console.log(x); // 10

코드블록내에서는 모두 전역변수가 되므로 값이 변경되었다.

15.1.3 변수호이스팅

console.log(foo) // undefined

foo = 123;

console.log(foo); // 123

var foo; // 선언은 런타임이전에 실행

 

15.2 let 키워드

15.2.1 변수 중복 선언금지

var foo = 123;
var foo = 456;
let bar = 123;
let bar = 456; // SynstaxError: Idendifier 'bar' has already been declared

let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복선언을 허용하지 않는다.

15.2.2 블록 레벨 스코프

let foo = 1; // 전역변수

{
	let foo = 2; // 지역변수
	let bar = 3; // 지역변수
}

console.log(foo); //1
console.log(bar); // ReferenceError: bar is not defined

블록 레벨 스코프를 따르기때문에 전역선언된 foo변수와 지역에서 선언된 foo 변수는 다른 별개의 변수이다.

15.2.3 변수 호이스팅

let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는것처럼 동작한다.

console.log(foo); // refereceError : foo is not defined
let foo;

let키워드는 선언, 초기화, 할당단계 3단계가 다다르게 분리된다.

console.log(foo); // Reference Error. 선언( TDZ ) 단계
 
let foo;
console.log(foo); // undefined . 초기화 단계

foo = 1;
console.log(foo); //1 . 할당 단계

15.2.4 전역객체와 let

var 키워드로 선언한 전역변수, 전역 함수는 전연 객체의 window 프로퍼티가 된다.

var x = 1;       // 전역변수
y = 2;           // 암묵적 전역
function foo() {} // 전역함수

// window 객체 선언
console.log(window.x) // 1
console.log(window.y) // 2
console.log(window.foo)  // f. foo() {}

let키워드로 선언한 전역 변수는 보이지않는 개념적인 블록내에 존재하게 된다.

let x = 1;
console.log(window.x);
console.log(x);

 

15.3 const 키워드

const 키워드는 상수를 선언하기 위해 사용한다.

15.3.1 선언과 초기화

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.

{
	console.log(foo); // ReferenceError // 변수호이스팅이 일어나지않는것처럼 동작한다.
	const foo = 1;  
	console.log(foo); // 1
}

console.log(foo); // ReferenceError

15.3.2 재할당 금지

const 키워드로 선언한 변수는 재할당이 금지된다.

const foo = 1;
foo = 2; // TypeError : Assignment to constant variable.

15.3.3 상수

const 키워드로 선언한 변수에 값을 할당한경우 변수값을 변경할수없다.

let preTaxPrice = 100;

let afterTaxPrice = preTaxPrice + (preTaxPrice * 0.1);

console.log(afterTaxPrice); // 110

정확히 어떤역활을 하는지 모르는 코드이다.

 

const TAX_RATE = 0.1; 

let preTaxPrice = 100;

let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);

console.log(afterTaxPrice); // 110

이렇게 TAX_RATE 를 상수로 입력해줘서 추후에 정책이 변경된다면 저 상수만 고치면

된다는 이점이있다.

15.3.4 const 키워드와 객체

const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.

const person = {
	name: 'Lee'
};

person.name = 'Kim';
console.log(person) {name: "Kim"}

이때 객체가 변경되더라도 변수에 할당된 참조값은 변경되지않는다.

 

필자는 const키워드로 객체를 많이사용했는데 무심코 썻던 부분인데 객체는 const가 상수인데 왜 할당이 가능하지? 라는 의문이없었던거같다. 이글을 읽고 할당은 여전히 불가능하고 객체 변경은 가능하다는사실, 변경 되도 주소값은 같은 곳을 가르킨다는 것을 알게되었다.

 

15.4 var vs. let vs. const

변수를 선언할때는 일단 const로 선언하고

재할당이 정말 필요한 상황에서는 let을 사용하는것을 추천한다.