[자바스크립트] 딥다이브) let, const 키워드 / 블록레벨 스코프

1) var키워드로 선언한 변수의 문제

  - 1) 변수의 중복선언 허용

var x = 1;
var x = 2; //중복선언을 허용함
console.log(x); // 2

  - 2) 함수레벨스코프
ㄴ함수의 코드블록만 지역스코프로 인정해줌
ㄴif문, for문과 같은 함수아닌 코드블록 안에서 선언하면 전역변수됨 

var x = 100;
if(true){
	var x = 200;
}
console.log(x); //200

  - 3) 변수 호이스팅
ㄴvar키워드로 선언된 변수는 변수선언 이전에 참조됨 (런타임전 참조되어 undefined로 초기화함)

console.log(x); //undefined
x = 100;
console.log(x); //100

 

 

2) let 키워드 

  - 1) 변수 중복 선언 금지됨 

let x = 1;
let x = 2; //syntaxError 이미 식별자 x는 선언되어있는뎁?

  - 2) 블록레벨 스코프 
ㄴ모든 코드블록(함수, if문, for문, try/catch문...etc)을 지역스코프로 인정함

let x = 1;  //전역변수
{
let x = 2;  //지역변수
}
console.log(x); //1

   - 3) 변수 호이스팅
ㄴlet으로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작함 
ㄴlet으로 선언한 변수는 '선언단계'와 '초기화단계'가 분리되어 진행됨 => 초기화 실행전에 변수접근시 참조에러 뜸
(런타임이전에 자바스크립트엔진이 암묵적으로 선언단계를 먼저 실행하지만 undefined로 초기화 하는 단계는 변수선언문에 도달했을때 실행)

console.log(x);  //ReferenceError
//런타임전 선언단계실행 ~ 초기화 되기 전 사이를 일시적사각지대라고 부름
let x; //변수 선언문에서 초기화 됨 
console.log(x);  //undefined
x = 100;   //할당
console.log(x);  //100

  - 4) 전역객체와 let 
ㄴ전역객체의 프로퍼티 ? var로 선언한 전역변수, 전역함수, 선언하지 않은 변수에 값을 할당하는 암묵적 전역 => 참조시 window생략가능

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

console.log(window.x);  //x는 전역객체 window의 프로퍼티임
console.log(x);         //1 전역객체 프로퍼티는 전역변수처럼 쓸수 있음

console.log(window.y);  //암묵적 전역 y는 전역객체 window의 프로퍼티임
console.log(y);         //2

console.log(window.foobao);  //선언함수 foobao는 전역객체 window의 프로퍼티임
console.log(foobao);         //function foobao(){}

ㄴlet으로 선언된 전역변수는 전역객체의 프로퍼티가 아님

let x = 1;   //전제: 브라우저 환경

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

 

3) const 키워드

  - 1) 선언과 초기화 
ㄴconst로 선언한 변수는 반드시 선언과 동시에 초기화 해야함
ㄴ블록레벨스코프를 가지고, 변수호이스팅이 발생하지 않는 것처럼 동작함

const Hi = 1; //good!
const foobao; // SyntaxError

  - 2) 재할당 금지 
ㄴlet, var는 재할당가능하지만, const키워드로 선언한 변수는 재할당이 금지됨 

const x = 1;
x = 2; //typeError

  - 3) 상수 
ㄴ재할당이 금지된 변수
ㄴconst키워드로 선언한 변수에 원시값(변경불가능한 값, immutable value)을 할당하면 변수값을 변경할 수 없음
   (원시값은 재할당 없이 값을 변경할 수 있는 방법이 없는데, const에 의해 재할당 금지되어 할당된 값을 변경할수 없게됨)

const TAX_RATE = 0.1;  //세율은 변하지 않는 값임을 나타냄 (상수이면 대문자, 스테이크케이스자주사용)

let prePrice = 100;
let afterPrice = prePrice + (prePrice * TAX_RATE);

console.log(afterPrice); //110

  - 4) const로 선언된 변수에 객체 할당하면 값을 변경할수 있음 
ㄴ객체는 재할당 없이도 직접 변경이 가능하기 때문
   (원시값은 재할당없이는 변경할수 있는 방법이 없어서 const 변수에 할당시 값 변경 불가 )

const person = {
	name: 'Kim'
  };

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

 

결론

- ES6사용시 var키워드는 사용하지 않음

- 재할당 필요한 경우 한정하여 let 키워드 사용 (변수의 스코프를 최대한 좁게 만들 것)

- 변경이 발생하지 않고 읽기 전용으로 사용하는 원시값과 객체에는 const사용

- 재할당 피룡한지 안필요한지 모르겠으면 우선 const로 쓰고 나중에 필요하다고 결론나면 let으로 변경하시옹