모던 자바스크립트 : let, const 키워드와 블록 레벨 스코프

let, const 키워드와 블록 레벨 스코프에 대해서

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

a. 변수 중복 선언 허용

• var 키워드로 선언한 변수는 중복 선언 가능
• 초기화 문 : 변수 선언과 동시에 초기값을 할당하는 문
• 초기화문이 있는 변수 선언 문 : 자바스크립트 엔진에 의해 var 키워드가 없는것 처럼 동작
• 초기화문이 없는 변수 선언문 무시, 에러 발생 ✕

b. 함수 레벨 스코프

• var 키워드로 선언한 변수는 오로지 함수 코드 블록만 지역 스코프로 인정
• 함수 레벨 스코프는 전역 변수 남발 가능성 ↑ => 의도치 않게 전역 변수 중복 선언

c. 변수 호이스팅

• 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조 가능
• 할당문 이전에 변수 참조하면 언제나 undefined

 

2. let 키워드

a. 변수 중복 선언 금지

• let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러 발생

b. 블록 레벨 스코프

• let은 모든 코드 블록(함수, if문, for문, while문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨스코프를 따름
• 함수도 코드 블록이므로 스코프를 만들고 함수내의 코드블록은 함수 레벨 스코프에 중첩됨

c. 변수 호이스팅

• let 키워드 선언 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작
• 변수 선언문 이전에 참조하면 참조 에러 발생

• let 키워드로 선언한 변수는 선언단계와 초기화 단계가 분리되어 진행
• 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문 도달했을 때 실행
• 초기화 단계 이전에 변수에 접근하려고 하면 참조 에러 발생
• 일시적 사각지대 TDZ : 스코프의 시작지점부터 초기화 시작 지점(변수 선언문)까지 변수를 참조할 수 없는 구간

• 그렇다고 호이스팅을 안 하는게 아님

d. 전역 객체와 let

d-1. var 키워드

• var 선언 전역변수와 전역함수, 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역 객체 window 프로퍼티
• 전역객체의 프로퍼티 참조할 때 windoe 생략 가능

d-2. let 키워드

• let 선언 전역변수는 전역 객체의 프로퍼티가 아님
• window.foo로 접근 불가능
• let 전역 변수는 보이지 않는 개념적인 블록 내(전역 렉시컬 환경의 선언적 환경 레코드)에 존재

 

3. const 키워드

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

a. 선언과 초기화

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

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

b. 재할당 금지

c. 상수

c-1. const는 상수를 표현함

• const 키워드로 선언한 변수에 원시값을 할당한 경우 변수 값을 변경할 수 없음
• 원시값은 변경 불가능한 값이므로 재할당 없이 값을 변경할 수 있는 방법이 없어서 상수 표현하는데 사용

c-2. 상수

• 변수의 상대개념인 상수는 재할당이 금지된 변수임
• 상수도 값을 저장하기 위한 메모리 공간이 필요하기때문에 변수라고 할 수 있음
• 상수는 상태 유지와 가독성, 유지보수의 편의를 위해 적극 사용
• 일반적으로 상수의 이름은 대문자, 스네이크 케이스로 선언해 상수임을 명확이 타나낸다

d. const 키워드와 객체

• const 키워드로 선언된 객체는 값 변경 가능
• 객체는 재할당 없이도 직접 변경 가능때문
• const 는 재할당이 불가능한거지 프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체 변경 가능
• 객체가 변경되더라도 변수에 할당된 참조 값은 변경되지 않음

4. var / let / const

• ES6 이상이라면 var 사용 금지
• 재할당 필요 => let 사용, 변수의 스코프는 최대한 좁게
• 변경 ✕, 읽기전용, 재할당 ✕, 원시값, 객체 =>const 사용

 

 

 

 

모던 자바스크립트 딥다이브 책을 정리한 내용입니다!!!