ES6란 무엇인가?

ECMAScript란 다양한 환경에서 운용가능한 확장성을 가지고 있는 자바스크립트의 코어스크립트 언어이고, JavaScript는 아래와 같이 나타낼 수 있다.

JavaScript = ECMAScript + DOM(Document Object Model) + BOM(Browser Object Model)

ES6은 2015년에 나온 버전으로 이전 버전과 큰 변화가 있다.

ES6의 특징

var 그리고 let, const

ES5에서 까지는 var라는 키워드를 사용했는데 이 녀석은 변수를 호이스팅(변수 선언부를 맨위로 끌어올림)하게 된다. 좀더 다른 방법으로 쉽게 이야기 하면 var의 유효 범위는 함수이고 let은 블럭({ .. })이다.

처럼 코트를 작성했다 친다면 실제로는 아래코드처럼 실행되는것이다.

물론 호이스팅을 막기 위해 ‘use strict’를 사용해도 되지만 고맙게도 ES6에서는 let과 const가 추가되었다. +_+

쉽게 풀어 보자면 let은 호이스팅이 안되는 변수 const는 상수라고 생각하면 되겠다.

let은 어디서 진가를 발휘할까? 다음과 같이 코드를 작성해보자.

결과는 호이스팅으로 인해 undefined이다. 하지만 let을 사용한다면..

결과는 “Global”이 출력된다.

디폴트 파라미터

ES5에서 함수에 넘겨주는 파라미터의 기본값을 위해서는 아래처럼 함수내부에서 따로 처리를 해주어야 했다.

하지만 ES6에서는 디폴트값을 매개변수 선언시 처리가 가능하다.

템플릿 리터럴

ES5에서는 문자열과 변수를 함께 활용할때 아래와 같이 사용한다.

하지만 ES6에서는 키보드의 ESC 키 아래에 있는 벡틱(`)키를 사용하여 아래처럼 사용할 수 있다.

클래스

ES6에서는 class키워드가 추가되어 ES5보다 명확하게 class를 정의하고 사용할 수 있다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다