ES6 [ TIL ] [ Javascript ]

 

ES6 문법

 

 

ES6 는 ECMAScript(JS 표준 규격을 정의하는 기구) 2015 를 가리키는 용어이고 JS 의 버전 중 하나이다.

ES6 는 ES5 의 후속 버전이다.

---

ES5 vs ES6

 

변수 선언

- ES5: var 키워드를 사용하여 변수를 선언

- ES6: let, const 키워드를 도입해 블록 스코프 변수를 선언

 

화살표 함수

- ES5: function 키워드를 사용하여 함수를 정의

- ES6: 화살표 => 를 사용하여 간결한 함수 표현식을 만든다.

 

클래스

- ES5: 프로토타입 기반 상속을 사용하여 클래스를 정의

- ES6: class 키워드를 도입하여 클래스 기반 상속을 지원

 

모듈

- ES5: 모듈 시스템을 기본적으로 지원하지 않는다. 주로 전역 객체를 통해 모듈을 정의

- ES6: import 와 export 키워드를 사용하여 모듈을 정의하고 가져올 수 있다.

 

디스트럭처링

- ES5: 객체나 배열의 요소에 접근하기 위해 개별적인 변수를 할당

- ES6: 객체나 배열에서 값을 추출하여 변수에 할당하는 드스트럭처링 구문을 도입

 

기타

- ES6: 프로미스, 제너레이터, 확장된 객체 리터럴, 템플릿 리터럴 등의 새로운 기능이 추가

 

---

조금 더

 

var :

- 함수 스코프를 가지고 있어서 함수 내에서 선언된 변수는 함수 내부에서만 접근 가능

- 변수 재선언 가능, 재할당 가능

- 호이스팅 현상이 발생하여 변수 선언문이 스코프 상단으로 끌어올려진다.

 

let :

- 블록스코프를 가지고 있어 중괄호 내에서 선언된 변수는 해당 블록 내에서만 접근 가능

- 변수 재선언은 허용되지 않지만 재할당은 가능

- 호이스팅은 발생하지만, 선언 이전에 변수에 접근하려면 TDZ(Temporal Dead Zone) 에러가 발생

 

const:

- 블록 스코프

- 상수를 선언, 재할당 불가 즉, 선언 후에 값이 변하지 않는다.

- 선언과 동시에 초기화해야 하며, 이후에 값을 변경할 수 없다.

- 객체 또는 배열일 경우, 객체 또는 배열의 내용을 변경하는 것은 가능, 하지만 변수 자체에 새로운 값을 할당하는 것은 불가능

 

 

 

https://muyeon95.tistory.com/105

Javascript 호이스팅(Hoist)

---

What I Learned

 

ES5 와 ES6 의 차이를 넓게 특징만 알아봤다. 내용이 자세하지 않은데 자세히 한단계 씩 정리하고 이해해야 한다.

호이스팅, 화살표 함수와 함수의 차이점, 클래스, 모듈 등 자세히 알아볼 내용이 많다.