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

저번 장에서 공부했던 var 과 함수 레벨 스코프를 이어 let, const, 블록 레벨 스코프에 대해 공부했다.

var 키워드의 문제점

1. 변수의 중복을 허용한다.
2. 함수 레벨 스코프
3. 변수 호이스팅

셋 다 이미 알고 있는 내용이기 때문에 따로 적지는 않으려고 함.
결론적으론 의도치 않은 할당이 일어날 수 있고 가독성을 떨어뜨리며 오류를 발생시킬 여지가 있다는 것이 문제!

✔️ let 키워드

1. 변수 호이스팅

var 과 달리 선언보다 먼저 접근하면 참조오류를 낸다.

console.log(foo);//참조오류
let foo;

호이스팅이 일어나지 않는 것처럼 보이는데 일단 런타임 전 변수가 실행컨텍스트에 담기긴 한다. 다만 초기화, 할당 과정이 이 때 일어나는 것이 아니라 변수 할당문에 도달하면 그 때 일어나기 때문에 참조 오류가 나는 것이다.
선언->초기화->할당 과정에서 초기화 전에 접근하면 접근할 수 없는 부분을 일시적 사각지대 라고 한다.
즉, 호이스팅이 일어나지 않는 것은 아니다!
자스는 let,const 포함 모든 선언을 호이스팅하지만 초기화 할당 과정이 동시에 일어나지 않는 경우가 있어 호이스팅이 일어나지 않는 것처럼 보이는 것이다.

2. 변수 중복 선언 금지

ES6 에서 새로 나온 키워드로 재선언이 불가능한 키워드이다.

let a=10;
let b=20;//Syntax Error

3. 블록 레벨 스코프

코드 블록(function,if,for,while,try/catch문 등) 을 지역스코프로 인정하는 것이다. 블록은 중괄호로 구분한다.

let foo=1;
{
  let foo=2;
  let bar=3;
}
console.log(foo);//1
console.log(bar);//참조오류

{} 안에 들어간 변수는 지역변수기 때문에 전역에서 호출하면 접근 불가능하다.

4. 전역 객체과 let

var, 암묵적 할당, 함수는 전역 객체 window 의 프로퍼티가 된다.
하지만 let 은 놉! 실행 컨텍스트에서 더 자세히 알아본다고 함.

var x=1;
y=2;
function foo(){}
console.log(window.x);
console.log(window.y);
console.log(window.foo);
// 이건 다 접근 가능

let z=3;
console.log(window.z);//undefined
console.log(z);//3

const 키워드

let 과 const 는 공유하는 특징이 많기 때문에 const 의 특징만 정리하고 넘어가야겠당

1. 변수 호이스팅

2. 전역객체와 const

3. 재선언 불가능

4. 재할당 불가능

const 는 선언과 할당이 동시에! 일어나야 한다. 할당만 하면 에러를 뱉어냄. 다만 const 로 선언한 객체의 프로퍼티는 변경이 가능하다. 객체는 변경 간응한 값이기 때문~~~

const a=10;
a=20;// nope!!!!!!!!!!!!

const foo={
  name:"park";
}
foo.name="Kim";
console.log(foo);//{name:"Kim"}

var, let, const 🥊

기본적으로는 const 를 사용하자. 다만 재할당이 필요한 경우 let 을 한정해서 쓰자구 넹