ECMAScript6 | ES6 | let & const | Block-scope | Temprol Dead Zone

모든 포스팅은 인프런 ECMAScript6: 빠르게 배우는 ES6 스킬과 비동기 프로그램 의 내용을 담고 있으며

출처는 아래의 주소로 "김형태"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

www.inflearn.com/course/es6-ecmascript-6

ECMAScript 6: 빠르게 배우는 ES6 스킬과 비동기 프로그래밍 - 인프런

---

1. ECMA Script

 

#ECMAScript

- Core 스크립트 언어

- 객체 타입 키워드 연산자 등 언어의 핵심이 되는 부분임.

- 브라우저 뿐 아니라 node.js를 통해 서버 개발 환경에서도 사용된다.

 

#JavaScript

- ECMAScript

- Document ObjectModel

- Brower Object Model

위 세가지 요소가 Javascrip가 Brower에서 사용될 때 필요한 요소이다.

 

#ECMS(European Computer Manufacturers Assciation) Script 표준

Javascript의 호환성 문제가 발생하였고, 표준 규격 필요해졌다. 이 표준 규격이 바로 ECMS Script 표준이다.

최근 여러 개발환경에서 도입하고 있는 TypeScript도 ECMA표준을 따른다.

 

 

화살표 함수, 이터레이터, 제너레이터, 프로미스, 클래스, 모듈 등이 포함되어 유용한 기능 추가와 더 나은 프로그래밍 언어의 모습을 보여주었다.

 

자바스크립트는 ES6의 출시로 언어적 한계가 개선되었으며, ES6는 하위 호환성을 지원한다.

 

 

2. let & const

위 개념들을 이해하기에 앞서 Javascript에 scope, hoisting, excution context에 대해 알고가자.

 

#scope (유효범위)

프로그래밍 언어에서 유효범위는 어느 범위까지 참조하는 지를 나타낸다.

즉 "변수와 매개변수의 접근성과 생존기간을 의미한다."

lucete1230-cyberpolice.tistory.com/348

[Js] 함수지향 | javascript 함수 | 유효범위 | 지역변수 전역변수

위 주소를 참고하여 scope의 개념을 익히도록 하자.

 

유효범위는 크게 두 가지 종류로 분리할 수 있다.

1. 전역 유효범위 (Global Scope)
2. 지역 유효범위(Local Scope)

 

#hoisting

호이스팅은 함수 안에 있는 선언들을 모두 끌어올려서, 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

이는, var 변수 선언과 함수 선언문에서만 일어나며, 할당은 해당되지 않는다.

gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

위 블로그 내용을 참고해보면 좋을 것 같다.

 

#excution context

코드가 실행되고 있는 구역과 범위의.대한 개념으로 코드가 실행되면 excution context 내부에서 실행이 되는 것이다.

velog.io/@stampid/Execution-Context실행-컨텍스트란

Execution Context(실행 컨텍스트)란?

위 자료를 참고하면 좋을 듯 하다.

 

그렇다면 let과 const를 알아보도록 하자!

 

es5에서는 변수나 상수를 선언할 때 var 키워드를 통해 선언하였다.

es6에서는 이 둘을 구분하기 위해 let과 const를 사용하였다.

 

원시형에서 변수는 let, 변경되지 않는 상수는 const선언자를 사용하면 된다.

 

 

# let 과 const

- ES6표준에서 처음으로 추가된 특징

- 변수와 상수 구분자

- let 선언된 변수는 다시 선언 불가

- const는 선언하면서 초기화 필수, 재할당 불가능.

 

두 선언자는 이미 선언되었다면 다시 선언할 수 없고, 구문 에러가 발생한다.const변수가 참조형인 경우는 객체의 프로퍼티는 변경이 가능하다.

 

 

3. Block-scope

 

- Block-scope : {} 로 감싸진 유효범위

- 기존의 var는 function scope 레벨 hoisting

- let 키워드를 사용해 변수의 유효범위를 블록 스코프 처리할 수 있다.

let선언자를 사용하는 예시를 들어보자면:

결과는 두번 다 tv가 나온다

위 코드처럼 지역 스코프에 선언된 product가 호이스팅 되어, 전역 스코프에 선언된 product 값을 바꿔 버리는 현상이 발생한다.
이러한 문제를 해결하기 위해 let 선언자를 사용하면 블록 스코프와 전역 스코프로 두 변수가 분리가 될 수 있다.

결과는 tv, phone이 나온다.

 

4. Temporal Dead Zone

- let, const는 TDZ에 의해 제약된다.

 

let은 var와 달리 변수가 초기화 되기 전에 접근하면 참조에러(reference error)가 발생한다.

var는 선언동시에 초기화 되지만, let은 먼저 변수가 스코프에 선언되지만, 초기화가 한번에 이루어지지 않고 선언문에 도달해야 이루어 진다.

 

이처럼 let으로 선언된 변수가 초기화 되기 전에 엑세스 할 수 없는 구역을 "TDZ(temporal dead zone)"라고 한다.

 

 

5. 정리하기

- let은 변수의 유효범위가 블록스코프

- 원시형 변수는 let, 상수는 const

- 참조형은 const