ES6의 특징

ES6의 특징

 

 

 

 

let과 const

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

 

┌ 위의 코드는 블록 스코프를 따르는 다른 언어들에서는 에러를 발생시켰지만,

├ 함수스코프와 전역스코프를 따르는 자바스크립트에서는 문제없이 작동한다.

└ 그러나, 이는 많은 에러와 버그의 원인이었으며, let과 const가 도입된 이유였다.

 

 

┌ let을 사용하면 선언한 변수는 블록안에서만 유효하게 된다.
├ 따라서, 블록 밖에서 접근했더니 ReferenceError를 발생시킨다.

├ const 역시 마찬가지로 블록스코프를 따른다.
├ const와 let의 차이점은 const는 상수로 값을 할당한다는 점이다.

└ 따라서, 값을 변경시키려고하면 에러를 발생시킨다.

 

 

┌ 이는 정확한 표현이 아니다.

├ const와 바인딩 된 값은 상수가 되지만, 할당된 값은 변경이 가능하다.

└ 따라서, 아래와 같은 코드도 정상적으로 동작한다.

 

 

 

 

 

화살표 함수 (Arrow Function)

 

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

 

다음은 화살표 함수로 작성한 위와 동일하게 작동하는 코드이다.

 

┌ function 키워드가 사라지고 함수의 인자 다음에 => 가 나오고 본문을 작성한다.

├ 본문이 return 문 하나만 있을 경우 { }는 생략이 가능하다.

└ 또한, 함수의 인자가 하나일 경우 ( ) 역시 생략이 가능하다.

 

 

 

클래스 구문

 

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

 

아래는 위의 클래스 구문을 통해 작성한 동일한 코드이다.

 

┌ 클래스 구문을 통해 표현하면 훨씬 이해하기 쉽고 간결하다.

├ 생성자를 명시적으로 기술하고 있고, static 메서드를 선언할 수도 있다.

├ 클래스 구문의 유용한점은 extends 키워드와 super 키워드를 통해 Person 프로토타입을 확장할 수 있다는 것이다.

└ 이는 아래와 같이 확장이 가능하다.

 

┌ 여기서 주목해야 할 점은 다른 객체지향언어에서 일반적으로 나타나는 모습과 유사하다는 점이다.

├ 확장하고자 하는 클래스로부터 새로운 클래스를 선언하고,

└ super 키워드를 사용하여 부모 생성자를 호출하는 새로운 생성자를 정의하였으며, 기존의 메서드를 오버라이딩했다.

 

 

 

향상된 객체 리터럴

 

• 속성과 할당하고자 하는 값이 일치하는 경우 생략이 가능하다.

 

 

• 함수를 속성으로 가지는 경우 function 키워드는 생략이 가능하다.

 

 

• 객체의 속성을 동적으로 할당할 수 있다.

 

 

• 새로운 getter, setter 구문이 추가되었다.

 

 

 

Template 표기법

 

• 빽틱( ` )으로 둘러싸고 원하는 문자열을 입력하면 된다.
• ${ }안에 넣고 싶은 변수를 넣으면 알아서 해당 위치에 매핑된다.

 

 

 

 

비구조화 할당 (구조 분해 할당)

 

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.

 

ⓐ 배열 구조 분해

 

 

 

ⓑ 객체 구조 분해