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

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

15.1.1 변수 중복 선언 허용

var x = 1;
var y = 1;

var x = 100;	//중복선언허용, var 키워드가 없는 것처럼 동작(재할당)
var y;	//무시됨

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

 

15.1.2 함수 레벨 스코프 : 함수의 코드블록만을 지역 스코프로 인정

var x = 1;

if(true){
  var x = 10;	//중복선언, 전역변수
}

console.log(x);	//10


var i = 10;

for(var i=0; i<5; i++){	//중복선언
  console.log(i);	//0, 1, 2, 3, 4, 5
}

console.log(i);	//5

 

15.1.3 변수 호이스팅 : var 키워드로 선언시 변수 호이스팅에 의해 변수 선언문이 스코프의 선두에 있는 것처럼 동작, 단 할당문 이전에 변수 참조시 undefined 반환

console.log(foo);	//error가 아닌! 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;	//SyntaxError, 중복선언 허용x

 

15.2.2 블록 레벨 스코프 : 모든 코드 블록(함수, if문, for문, while문, try/catch문 등)을 지역스코프로 인정

let foo = 1;	//전역 변수
{
  let foo = 2;	//지역 변수
  let bar = 3;	//지역 변수
  
  console.log(foo);	//2
  console.log(bar);	//3
}
console.log(foo);	//1
console.log(bar);	//ReferenceError

 

15.2.3 변수 호이스팅 : let으로 선언한 변수는 호이스팅이 발생하지 않는 것처럼 동작

console.log(foo);	//ReferenceError
let foo;

 

//var로 선언한 변수는 런타임 이전 선언단계와 초기화단계 실행

console.log(fooo);	//undefined
var fooo;
console.log(fooo);	//undefined
fooo = 1;
console.log(fooo);	//1

//let으로 선언한 변수는 런타임 이전 선언단계 실행

console.log(foo);	//ReferenceError
let foo;
console.log(foo);	//undefined
foo = 1;
console.log(foo);	//1

 

let foo = 1;	//전역 변수
{
  console.log(foo);	//ReferenceError, 호이스팅이 발생하는 것을 알 수 있음
  let foo = 2;	//지역 변수
}

JS는 모든 선언(var, let, const, function, function*, class 등)을 호이스팅 하지만 ES6에서 도입된 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작

 

15.2.4 전역 객체와 let

var x = 1;	//var로 선언한 전역 변수
y = 2;	//암묵전 전역
functin foo(){}	//전역 함수

//위는 모두 전역 객체 window의 프로퍼티
//전역객체 window의 프로퍼티는 전역변수처럼 사용가능

console.log(window.x);	//1
console.log(x);	//1

console.log(window.y);	//2
console.log(y);	//2

console.log(window.foo);	//foo(){}
console.log(foo);	//foo(){}


let x = 1;

//let, const로 선언한 전역변수는 window의 프로퍼티가 아님

console.log(window.x);	//undefined
console.log(x);	//1

 

15.3 const 키워드

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

const foo = 1;

const foo;	//SyntaxError

let과 마찬가지로 블록레벨 스코프를 가지며 변수 호이스팅이 발생하지 않는 것처럼 동작

{
  //변수 호이스팅이 발생하지 않는것처럼 동작
  console.log(foo);	//ReferenceError
  const foo = 1;
  console.log(foo);	//1
}

//블록레벨 스코프를 가짐
console.log(foo);	//ReferenceError

 

15.3.2 재할당금지

const foo = 1;
foo = 2;	//TypeError

 

15.3.3 상수 : const로 선언한 변수에 원시값을 할당한 경우 변수값 변경 불가, 상태유지와 가독성, 유지보수를 위해 활용 가능

//세전
let preTaxPrice = 100;
//세후
let afterTaxPrice = preTaxPrice + (preTaxPrice * 0.1);

console.log(afterTaxPrice);	//110


//0.1의 의미파악, 고정값 설정
const TAX_RATE = 0.1;

let preTaxPrice = 100;
let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);

console.log(afterTaxPrice);	//110

 

15.3.4 const 키워드와 객체 : 변수에 객체를 할당할 경우는 재할당없이 직접 변경이 가능하기때문에 값 변경 가능

const person ={
  name:'Lee'
};

//객체는 변경가능한 값으로 재할당없이 변경 가능
person.name = 'Kim';
console.log(person);	//{name: 'Kim'}

 

15.4 var / let / const

- ES6를 사용한다면 var 키워드 사용x

- 재할당이 필요한 경우에 한정해 let 키워드 사용, 변수의 스코프는 최대한 좁게

- 변경이 발생하지 않고 읽기전용으로 사용하는 원시값과 객체는 const 키워드 사용, 재할당을 금지하므로 안전