<ES6> ES2015(ES6) Features (2)

 

1. 소개

 - 지난 포스팅에서 ES2015의 등장에 대해서 간단히 짚었다. ES2015(ES6)은 ES5가 소개된 후, 무려 6년이나 지나서 나타난 만큼 무수히 많은 기능들이 추가되었다.

 

 - 지난 번에 알아본 기능들을 나열해보면 Arrow Function, let, const, Default Parameters, Template Literals, Object Initialize, Destructuring Assignment 이 있다.

 

 

2. 기능

 이번 포스팅을 끝으로 ES2015의 소개를 마칠 것이므로 모든 기능을 소개할 수는 없을 것 같다. 대표적인 나머지 기능들을 알아보고, 그 외에는 기타로 빼두었다.

 

* Class

 - 대부분의 객체지향언어(C, Javs, Python)등과 달리 자바스크립트는 Class가 아닌 Prototype기반의 객체지향언어이다. 물론 멀티패러다임 언어이고, 다른 객체지향언어와의 차이에 대한 논쟁이 있지만 그 부분은 일단 넘어가자. 어쨌든 기존의 클래스기반 객체지향에 익숙해진 개발자들에게 프로토타입은 굉장이 불편했다. 하지만 ES2015에서 클래스가 도입되며 더욱 편하게 객체지향적으로 코딩을 할 수 있게 되었다.

 

// es5
var Monster = function(name, speed){
  this.name = name;
  this.run(speed);
}
Monster.prototype.run = function (speed){
  // ...
  this.speed = speed;
}

// es2015 (es6)
Class Monster {
  constructor (name, speed){
    this.name = name
    this.run(speed)
  }
  run (speed) {
  // ...
  this.speed = speed
  }
}

 

 - 클래스의 constructor로 편리한 관리가 가능해졌으며, 불편한 코드도 줄일 수 있게 되었다.

 

* Promise

 - 프라미스의 등장은 비동기작업을 훨씬 깔끔하게 처리할 수 있게 해준다.

 

 - 특히 기존의 콜백의 가장 문제점이었던 콜백지옥을 해결할 수 있다.

 

// es5
imAsyncFunc(x,y, function(data) {
  imAsyncFunc2(x, y, function(data) {
    //...
  });
});

// es2015 (es6)
imAsyncFunc(x, y)
  .then(data => imAsyncFunc(x, y))
  .then(data => {
   //...
})

 

 - 위 코드는 짧아서 콜백지옥이 선명하게 보이지 않지만, 그래도 promise then을 통해 간단하게 비동기 처리를 할 수 있음은 분명하다.

 

 - 이와 관련된 자세한 내용은 프라미스 포스팅을 참고하길 바란다.

 

 

* Spread Operator

 - 스프레드 연산자를 통해 이터러블한 객체를 더 간결하게 작성할 수 있게 되었다.

 

// es5
var arr = [1, 2, 3, 'harry'];
var newArr = ['x', 'y'].concat(arr);
console.log(newArr); // ["x", "y", 1, 2, 3, "harry"]

// es2015 (es6)
var arr = [1, 2, 3, 'harry']
var newArr = ['x', 'y', ...arr]
console.log(newArr); // ["x", "y", 1, 2, 3, "harry"]

 

* Rest Parameter

 - 나머지 매개변수는 함수를 더 간결하게 사용할 수 있도록 돕는다.

 

// es5
function f (a, b) {
  var leng = Array.prototype.slice.call(arguments, 2);
  return a + b + leng
}
f(1, 1, 'harry', 'hello'); // 4

// es2015 (es6)
function f (a, b, ...args) {
  return a + b + args.length
}
f(1, 1, 'harry', 'hello); // 4

 

 - 함수식에 스프레드 연산자를 사용하면 그 부분의 나머지 변수들을 배열로 받아올 수 있다.

 

* Array Element Finding

 - 배열에 find와 findIndex가 추가되어 검색이 용이해졌다.

 

// es5
[1, 2, 3, 4].filter(function (x) {
  return x > 3
})[0] // 4

// es2015 (es6)
[1, 2, 3, 4].find(x => x > 3) // 4

 

 - 기존에는 원하는 값을 찾으려면 filter를 사용해야 했다. 심지어 findIndex와 완전히 대응하는 것은 없다.

 

 - 참고로 배열의 forEach, map, filter, reduce 등의 고차함수는 2009년에 ES5에서 추가되었다.

 

 

* Set & Map

 - ES2015에서 Set과 Map 객체가 추가되었다. 기존에 이들을 구현하려면 object를 만들고, 내부적으로 반복문이나 조건문을 작성하며 해결해야 했다. 이 부분에 대해서 자세히 알고 싶다면 필자의 맵과 셋 포스팅을 참고하길 바란다.

 

 Set이 추가됨으로써 중복없는 집합자료구조를 표현할 수 있게 되었고, Map이 추가됨으로써 순서가 있는 키와값을 저장하고 빠른 성능의 추가 삭제가 가능해졌다.

 

 

 

* 기타

 - 위에서 소개했던 기능 외에도 수많은 기능이 추가되었다.

 

 - Module : import와 export로 Module을 정식으로 JS에서 지원할 수 있게 되었다.

 

 - String Repeating : repeat메서드로 간단하게 반복되는 문자열을 만들 수 있다.

 

 - String Searching : 문자열에 startWith, endWith, includes 메서드가 추가되었다. 기존에는 indexOf로만 구해야했다.

 

 - Number Type Checking : 숫자타입에 isNaN, isFinite 메서드가 추가되었다. 

 

 

---

 

 

참고

 

 

Object-Oriented Programming | PoiemaWeb

 

 

ECMAScript 6: New Features: Overview and Comparison

 

---