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

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

ES6 이전까지는 변수 선언은 var 키워드만 사용했다.

 

🟣 변수 중복 선언 허용

1. var 키워드로 선언한 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작.

2. 초기화문이 있는 변수 선언문은 JS엔진에 의해 var 키워드가 없는것처럼 동작.

3. 초기화문이 없는 변수 선언문은 에러는 발생하지 않지만 무시된다.

4. 변수를 중복 선언하면서 값까지 할당하면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 있다.

 

🟣 함수 레벨 스코프

1. var 키워드의 변수는 오로지 함수의 코드 블록만 지역 스코프로 인정한다.

2. 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.

var x = 1;

if(true){
   var x = 10;
}

console.log(x); // 10

3. for문의 변수 선언문에서 var 키워드로 선언한 변수도 전역 변수가 된다.

4. 함수 레벨 스코프는 전역 변수를 남발할 가능성이 크다.

 

🟣 변수 호이스팅

1. var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작.

2. 프로그램의 흐름상 맞지 않고 가독성도 떨어뜨리고 오류가 날 가능성이 있다.

 

👀  let 키워드

ES6에서는 var의 단점을 보완하기 위해 let과 const를 도입했다.

 

🟣 변수 중복 선언 금지

재할당만 가능하기 때문에 let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 난다.

 

🟣 블록 레벨 스코프

1. 모든 코드블록을 지역 스코프로 인정한다.

2. 함수도 코드 블록이여서 스코프를 만든다. 함수 내의 코드 블록은 함수 레벨 스코프에 중첩된다.

🟣 변수 호이스팅

1. 변수 호이스팅이 발생하지 않는것처럼 동작.

2. 그래서 let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 참조 에러가 발생한다.

3. 선언단계와 초기화 단계가 분리되어 진행한다.

4. 런타임 이전에 JS엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는

변수 선언문에 도달했을 때 실행

5. let 키워드로 선언한 변수는 스코프의 시작 지저머부터 초기화 단계 시작 지점까지 변수를

참조할 수 없어서 일시적 사각지대(TDZ)가 있다.

 

🟣 전역 객체와 let

1. let 전역 변수는 전역 객체의 프로퍼티가 아니여서 window.foo같이 접근할 수 없다.

2. let 전역 변수는 보이지 않는 개념적인 블록내에 존재한다.

 

👀 const 키워드

보통은 상수를 선언하기 위해 사용한다.

 

🟣 선언과 초기화

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

그렇지 않으면 문법에러가 뜬다.

2. 블록 레벨 스코프를 가지고 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

 

🟣 재할당 금지

const 변수는 재선언, 재할당 전부 금지된다.

 

🟣 상수

1. const 변수에 원시 값을 할당하면 값을 변경할 수 없다.(재할당 불가)

2. 상수는 상태 유지와 가독성, 유지보수의 편의성을 위해 적극적으로 사용된다.

3. 상수는 프로그램 전체에서 공통적으로 사용해서 나중에 값을 변경해야 할때

상수만 변경하면 되기때문에 유지보수성이 좋다.

4. 여러 단어로 이뤄져있으면 언더스코어로 구분해서 스네이크 케이스로 표현하는게 일반적.

 

🟣 const 키워드와 객체

1. 객체를 할당하면 재할당 없이도 직접 변경이 가능하기 때문에 const를 쓰더라도 값을 변경할 수 있다.

2. 프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능

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

 

👀 그래서 var? let? const?

변수 선언에는 기본적으로 const를 사용하고

let은 재할당이 필요할때 한정적으로 사용하는것이 좋다.