Javascript ES6 (ECMAScript 2015) 에서 추가된 기능 정확히 알자

ES6은 자바스크립트의 6번째 표준안이다. 아마도 자바스크립트를 가장 모던하게 보이도록 만드는 버전이 아닐까 생각한다. 그동안 무심코 사용했거나 아니면 몰라서 못쓴 문법이 있을 수 있을 것이다. 여기에서 새로운 기능들을 정리하고 간단히 설명해본다.

let

블록 scope 변수 선언을 할 수 있다.

{
  var a = 10
  let b = 20
}

console.log(a) // 10 출력
console.log(b) // 에러발생 ReferenceError: b is not defined

var 로 선언한 변수는 블록내부에 선언되더라도 전역적으로 접근 가능하다. 하지만 let 으로 선언하면 블록내부에서만 유효하다.

 

const

let 과 같지만 값을 변경할 수 없는 상수로 만든다.

const a = 20
a = 30 // 에러발생 TypeError: Assignment to constant variable.

 

* let과 const 로 인해 더이상 var 은 사용을 안하게 되었다.

 

Arrow Function (화살표 함수)

아래와 같이 함수 선언을 짧게 할 수 있다.

const func = (x, y) => x * y

콜백으로 특정 지점에서만 사용되는 함수에 자주 사용하게 된다. 

 

일반 함수와의 가장 큰 차이점은 this를 바인딩하지 않는다는 것이다.

const obj = {
  x: 10,
  regFunc: function () { console.log(this.x)},
  arrowFunc: () => { console.log(this.x)}
}

obj.regFunc()    // 10
obj.arrowFunc()  // undefined

샘플코드에서 보듯이 regFunc에서는 obj 객체가 바인딩되어 호출되지만, arrowFunc는 그렇지 않다.

 

spread operator (전개 구문) (...)

배열을 다음과 같이 펼칠 수 있다.

...변수명

const a = [1, 2, 3]

console.log(a)                  // [ 1, 2, 3 ]

console.log(...a)               // 1 2 3
// 아래의 결과와 동일

console.log(a[0], a[1], a[2])   // 1 2 3

 

for ~ of 반복문

반복가능한 객체에 대한 반복문을 제공

for (변수명 of 반복가능한 객체) {
}

아래 코드를 보자

const items = [1, 2, 3]

for (const n of items) {
  console.log(n)
}

// --- output ---
1
2
3

배열을 반복할 때 정말 많이 사용한다.

이게 없을때는 아래처럼 코드를 짰을것이다. 

for (var i=0; i < a.length; i++) {
	console.log(a[i])
}

확실히 for ~ of  를 사용하면 코드가 훨씬 간결해진다.

 

Map 객체

키 - 값 쌍의 집합을 다룰 수 있는 객체이다. 키는 유일한 값이다.

Map 객체가 있기전에는 Object를 Map과 같은 용도로 사용해왔다.

// Map 객체 사용
const m = new Map()

m.set('name', 'analogcoder')
console.log(m.get('name'))


// Object 사용
const obj = {}

obj['name'] = 'analogcoder'
console.log(obj['name'])

Map의 키는 모든 값이 올 수 있다. 성능 및 사용성면에서 Object보다 뛰어나고 데이터를 키-값쌍으로 저장하려는 본래의 용도에 충실한 기능을 제공하는 객체이다.

 

Set 객체

고유한 값의 집합이다. 어떤 데이터 타입이던지 추가할 수 있지만, 그 값은 Set 객체내에서유니크하게 유지한다.

const a = new Set()
a.add('아메리카노')
a.add('카페라떼')
a.add('카푸치노')
a.add('아메리카노') // 중복된 값이라 추가되지 않는다.
console.log(a) // Set(3) { '아메리카노', '카페라떼', '카푸치노' }

Set이 없었다면, 이러한 기능을 만들기 위해 Array를 사용하여 저장하고 추가할때마다 값이 이미 있는지를 체크하고 넣어주는 코드를 짰어야 했다. 성능이나 사용성면에서 Set 객체가 훨씬 우수하다.

 

⭐ Class

드디어 자바스크립트에서도 OOP의 기본이 되는 class 구문을 사용할 수 있게 되었다.

// class 선언
class ClassName {
    constructor () { ... } // 생성자
}

// 객체 생성
const c = new ClassName()

OOP에 익숙한 분들에게는 가장 환영할만한 문법이다. 개인적으로 class 문법이 추가된게 가장 기뻤다.

 

⭐ Promise 

비동기 처리를 위한 기능을 제공하기 위한 객체이다. 자바스크립트의 콜백방식을 더 편하게 만들어 주기 위한 용도라고 볼 수 있다.

아마도 가장 많이 어려워하는 기능일 거라 생각이 된다.

async/await 가 나오기 전에 Promise를 가지고 많이 씨름을 하셨을 것이다.

아래와 같이 사용한다.

const a = new Promise(function (resolve, reject) {
  setTimeout(function() {
    resolve('ok')
    // resolve('fail')
  }, 1000)
})

a.then(function (val) {
  console.log(val)
}).catch (function (err) {
  console.log(err)
})

 

비동기로 이미지 리소스를 받아오는 함수를 만든다고 가정해보자.

// Promise를 리턴
function loadImage (url) {
  return new Promise(function (resolve, reject) {
    var req = new XMLHttpRequest()
    req.open('GET', url);
    req.responseType = 'blob';
    req.onload = function () {
      resolve (req.response)
    }
    req.onerror = function () {
      reject(Error('loadImage error'))
    }
    req.send()
  })
}

loadImage('/img/a.jpb').then(function(data) {
// 성공시 코드
}).catch(function (err) {
// 실패시 코드
})

프로미스를 리턴하는 함수를 만듬으로써 비동기 처리를 then과 catch 로 일원화시킬 수 있다.

 

Symbol

자바스크립트의 기본 타입중에 하나이며, 객체의 프로퍼티로 사용할 수 있다.

다른 Ruby, Object-C 등 프로그래밍언어에도 심볼과 비슷한 개념들이 있다.

아래와 같이 심볼을 만들 수 있다. 

const sm = Symbol()
const id = Symbol('id')

 

심볼은 고유한 식별자를 만들 때 사용한다. 

const a = Symbol('id') // 파라미터로 들어가는 값은 심볼값에 영향을 주지 않는다.
const b = Symbol('id')

a === b // false

프로퍼티의 숨겨진 키로 사용

const obj = {
  id : 1
  name: 'IamObj',
  age: 20
}

let id = Symbol('id')
obj[id] = 100   // 위에서 정의된 id 속성과는 별개, 외부에는 숨겨진 프로퍼티

console.log(JSON.stringify(obj)) // {"name":"IamObj","age":20}

또한 심볼은 항상 유니크하므로 프로퍼티의 키로 사용시 중복될 일이 없다.

 

기본적으로 이러한 특정을 가지고 있지만, 나도 아직 Symbol 을 사용한 적은 없다. 언젠가 유용하게 사용하게 되면 포스팅을 해야겠다.

 

매개변수 기본값

함수의 파라미터에 디폴트 값을 줄 수 있다.

function sum (x, y = 0) {
  return x + y
}

sum(10) // 10

 

나머지 매개변수 (Rest Parameter)

함수로 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.

function funcName (...args) { }

 

⭐ 모듈 (Module)

모듈시스템은 자바스크립트에서 가장 필요한 변화가 아닐까 생각한다. ES6에 정식으로 포함이 되었다.

아래와 같이 외부의 모듈을 import 할 수 있다.

import name from 'modulePath'
import { attr1, attr2 } from 'modulePath'

여기서는 간단히 소개만 하지만, 모듈 시스템은 좀 더 자세히 공부하길 바란다.

 

 

그외 메소드

아래와 같은 메소드들이 추가되었다.

String

String.includes ()

String.startWith()

String.endWith()

Array

Array.from()

Array.keys()

Array.find()

Array.findIndex()

Math

Math.trunc()

Math.sign()

Math.cbtr()

Math.log2()

Math.log10()

Number

Number.isInteger()

Number.isSafeInteger()

Global Method

isFinite()

isNaN()

Object

Object.entries()

 

 

결론

자바스크립트가 ES1, ES2, ES3, ES5, ES6 의 표준안을 거치면서 ES6가 가장 모던한 변화의 시작이 아닐까 생각한다.

 

보다보면 ⭐를 표시해준게 있었는데 아래 3가지이다.

• Promise
• Module
• Class

이 3가지의 도입으로 자바스크립트 코드가 훨씬 더 퀄리티가 올라간다고 해도 과언이 아닐 것이다.

그외 다른 것들은 한번 보면 쉽게 이해가 가능할 것이다.

그러나 이 3가지는 제대로 알아야 사용할 수가 있다.

 

특히나 Promise 는 더 기존의 자바스크립트의 콜백지옥 (callback hell)을 탈출할 수 있는 방법이므로 꼭 알고 넘어가자.

추후에 asyn / await 가 나오지만 그래도 Promise를 먼저 알아야 한다.

 

 

다음 포스팅에서는 ES7 부터 ES10 까지 새로 도입된 것들을 정리해보겠다.