<ES6> ES2015(ES6) Features (1)

 

1. 소개

 이번 글을 시작으로 ECMA Script의 변화들을 정리해볼 예정이다. 먼저 ES6로 흔히 알려진 ES2015의 변화들과 그 기능들로 시작해보려한다.

https://engineering.carsguide.com.au/javascript-context-ecmascript-84d709ef9165

 

  ES6은 위와 같은 짤이 있을정도로 자바스크립트에 엄청난 진화를 이루어냈다. 이 때를 시작으로 JQuery의 몰락이 시작되기도 했다. JQuery가 2006년 소개된 이후로 프론트 생태계에 엄청난 영향을 끼친 것은 사실이나, JS를 완전히 대체할 수 없었던 점, 노드JS의 등장과 리액트와 뷰와 같은 Virtural DOM의 사용등은 ES5를 사용한 Jquery를 누르기에 충분했다. 필자는 Jquery를 사용해본 적이 없으므로 이 내용은 일단 넘어가자...

 

https://caniuse.com/?search=es6

 

 ES6은 이미 모든 브라우저(IE는 브라우저가 아니다. 응가다.)에서 지원할 정도로 표준화되었다.

 

https://node.green/#ES2015

 

 노드JS에서도 ES2015는 대부분 지원한다. 참고로 ES2015가 공식 명칭이다. 2015년 6번째 ECMA Script가 소개된 후, TC39는 매년 새 버전을 출시할 것이라고 밝혔고 버전 명칭을 ESX 에서 ES20XX으로 변경하였다. 따라서 아래에서 부터는 ES6이아닌 ES2015라고 사용하겠다.

 

2. 기능

 위에서 간단히 ES2015를 알아봤다. 그렇다면 도대체 얼마나 좋은 기능들이 생겼길래 ES2015에 열광하는 것일까. 하나씩 알아보자.

* let & const

 - 먼저 가장 유명한 let과 const의 등장이다.

 

 - ES5에서는 var로써 변수를 선언하였다. 하지만 여기에는 단점들이 있다. var은 함수레벨의 스코프를 갖는다. 따라서 무수히 많은 전역변수가 생길 위험이있다. 그리고 변수를 재선언이 가능하다. 재선언시 오류가 나지 않는다는 것은 후에 많은 문제점들을 야기시킬 수 있다. 변수 선언과 초기화가 동시에 일어나므로 변수 호이스팅이 발생한다.

 

// es5
console.log(x); // undefined
var x = 'hi';

 

 - 위처럼 오류를 뱉지않고 변수 호이스팅이 발생한다. 하지만 let과 const를 사용하면 오류를 보여준다. 그리고 let과 const는 재선언이 불가능하여 문제를 미리 방지할 수 있다.

 

- const는 재할당도 불가능한 선언방식이다. 기존 es5에서 재할당이 불가능하도록 설정하려면 Object를 사용하여 writable과 configurable을 false로 설정해야했다.

 

* Arrow Functions

 - 화살표함수 또한 ES2015의 대표적인 기능이다. 화살표함수를 통해 함수를 보다 짧게 사용할 수 있게 되었고, 바인딩 되지 않은 this를 제공할 수 있게 되었다.

 

// es5
odds = evens.map(function (v) { return v + 1; });

// es2015 (es6)
odds = evens.map(v => v + 1);

 

 - 위처럼 화살표함수는 람다함수를 보다 짧고 분명하게 작성할 수 있게 되었다.

 

* Default Parameters

 - 기본 매개 변수를 함수에 작성할 수 있게 되었다.

 

// es5
function add (x, y) {
  if (y === undefined) {
    y = 2;
  }
  return x + y;
}
add(1) // 3

// es2015 (es6)
function add (x, y = 2) {
  return x + y
}
add(1) // 3

 

* Destruturing Assignment

 - 구조 분해 할당(비구조화 할당)이 가능할 수 있게 되었다. 

 

// es5
var list = ['x', 'hi', 'y'];
var a = list[0], b = list[2];
console.log(a,b) // 'x' 'y'

// es2015 (es6)
var list = ['x', 'hi', 'y'];
var [a, ,b] = list

 

 - 위처럼 위치에 맞게 작성하면 a와 b라는 변수에 배열의 값을 할당시킬 수 있게 되었다. 객체에서도 마찬가지로 사용할 수 있다.

 

 - 뿐만 아니라 아래처럼 교환도 간단해졌다.

 

var a = 'x';
var b = 'y';
// es5
var tmp = a;
a = b;
b = tmp;

// es2015 (es6)
[a, b] = [b, a]

 

* Object Initialize - Property Shorhand

- 객체초기자는 객체를 더 간단하게 만들 수 있도록 도와준다.

 

// es5
var x = 0, y = 0;
obj = { x: x, y: y };

// es2015 (es6)
var x = 0, y = 0
obj = { x, y }

 

 - 변수 명과 객체의 키 이름이 같을 때, 불필요한 코드를 줄일 수 있게 되었다.

 

* Template Literals

 - 템플릿리터럴은 `(백틱)의 사용으로 문자열을 더 간단하게 다룰 수 있게 도와준다.

 

// es5
var name = 'Harry';
var age = 20;
var message = name + ' is ' + age + ' years old.'
console.log(message); // Harry is 20 years old.

// es2015 (es6)
var name = 'Harry';
var age = 20;
var message = `${name} is ${age} years old.`
console.log(message); // Harry is 20 years old.

 

 - ${} 안에 변수를 넣어서 '+'의 무분별한 사용을 막을 수 있다.

 

 

---

 

 

참고

 

 

ECMAScript 6: New Features: Overview and Comparison

 

Javascript context : ECMAScript

"es6" | Can I use... Support tables for HTML5, CSS3, etc

 

Node.js ES2015/ES6, ES2016 and ES2017 support

JavaScript let, const 란? 그리고 왜 써야만 하는가? (ES6)

 

이제와서 jQuery를 쓰면 안되는 이유, 혹은 jQuery와 웹개발의 역사 - Tokyo Branch

 

 

---