ES6의 특징

mangjell·2022년 5월 4일
0

let과 const
전통적으로 자바스크립트는 함수스코프와 전역스코프만을 지원하여 변수의 생명주기 및 접근을 제어해왔다. 하지만 ES6에서부터는 블록스코프도 지원하게 되었다. 이를 가능하게 해주는 것이 let과 const이다.

아래의 코드는 블록 스코프를 따르는 여타 언어에서는 에러를 발생시켰을 것이다. 하지만 함수스코프와 전역스코프를 따르는 자바스크립트에서는 문제없이 작동한다. 그러나 이는 많은 에러와 버그의 원인이었으며, let과 const가 도입된 이유이다.

화살표 함수 (Arrow Function)
ES6에서 소개된 가장 인상적인 기능중의 하나는 화살표 함수의 지원이다. 화살표 함수는 함수 정의를 보다 간결한 구문으로 콜백을 정의할 때 특히 유용하다. 아래는 고전적인 필터링의 예시이다.

클래스 구문
ES6에서 클래스 구문이 도입되었다. 하지만 자바스크립트 런타임에 의해 내부적으로 객체가 관리되는 방식이 바뀐 것은 아니어서 여전히 프로토타입을 통해 속성과 함수를 상속한다는 점이 중요하다. 클래스 구문의 도입은 개발자에게 유용하고 뛰어난 가독성을 제공하며, 단지 편의를 위한 것이다. 아래는 전통적인 프로토타입 기반의 Person 함수를 보여준다.

향상된 객체 리터럴
속성과 할당하고자 하는 값이 일치하는 경우 생략 가능하다.
함수를 속성으로 가지는 경우 function 키워드는 생략 가능하다.
객체의 속성을 동적으로 할당할 수 있다.
새로운 getter, setter 구문이 추가되었다.
Template 표기법
간단하다. 빽틱(키보드 Tab키 위에 1 왼쪽에 위치)으로 둘러싸고 원하는 문자열을 입력하면 된다. ${ }안에 넣고 싶은 변수를 넣으면 알아서 해당 위치에 매핑된다.

비구조화 할당 (또는 구조 분해 할당)
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.

profile
프론트엔드 개발자

0개의 댓글