소개

분할 대입이라든지 스프레드 구문이라든지 잘 듣지만, 결국 사용도를 모르는 분에게
ES5라면 이런 느낌으로 쓸게-라는 비교 기사.
자주 사용하는 것만 소개합니다.

ES6과 ES5의 구문 비교

Arrow Functions / 애로우 함수

() => {}

ES6

const arrowFunctionSample = args => args * 2
arrowFunctionSample (2)  // output: 4

ES5

var arrowFunctionSample = function(args) {
  return args * 2   
}
arrowFunctionSample (2)  // output: 4

설명

애로우 함수는 Java나 C# 의 람다 식의 생략계와 같은 것입니다.this 의 참조가 바뀌므로 주의가 필요.

Default Args / 인수의 초기값 설정

function(a = 1, b = 2)

ES6

const defaultParams = (a = 1, b = 2) => a + b
defaultParamsES6()  // output: 3

ES5

var defaultParams = function(a, b) {
  if (a == undefined) {
    a = 1
  }
  if (b == undefined) {
    b = 2
  }
  return a + b
}
defaultParams()  // output: 3

설명

인수가 있는 경우는 그 인수를 사용해, 그렇지 않은 경우는 초기치를 세트 할 수가 있습니다.

Destructuring Assignment / 분할 대입

function({ args }) {}
객체

const profile = {
  name: "Ross",
  age: "30"
}

ES6

const getName = ({name}) => name
getName(profile)  // output: Ross

ES5

var getName = function(profile) {
  return profile.name
}
var name = profile.name
getName(profile))  // output: Ross

설명

객체의 속성을 직접 전달할 수 있습니다.getName 와 같이, 함수에 객체의 인수를 건네줄 때에 자주 사용됩니다.

분할 대입을 응용하면 값 교체 등도 편하게 할 수 있습니다.[value1, value2] = [value2, value1]

Spread Syntax / 스프레드 구문

...array ...object

ES6

const movies = ["Whiplash", "LaLaLand", "FirstMan"]
console.log(...movies)

output

Whiplash LaLaLand FirstMan

ES5

var movies = ["Whiplash", "LaLaLand", "FirstMan"]
movies.forEach(function(movie) {
  console.log(movie)
}

output

Whiplash LaLaLand FirstMan

설명

for 문을 사용하지 않고 순서대로 값을 얻을 수 있습니다.
아래와 같이 config 파일 등의 객체를 확장할 때 자주 사용됩니다.

const baseConfig = {
   basicAuth: true,
   ignoreHTTPSErrors: true
}

const extendConfig = {
  ...baseConfig,
  URL: 'http://localhost:8080'
}

또한 스프레드 구문은 분할 할당과 함께 사용하면 매우 유용합니다.

객체

const profile = {
  name: "Ross",
  age: "30",
  friend1: {
    name: "Joey",
    age: "33",
  },
  friend2: {
    name: "Rachel",
    age: "28"
  },
  bestFriend: {
    name: "Chandler",
    age: "31"
  }
}

ES6

const {name, age, ...friends} = profile
console.log(friends)

output

{"friend1": { "name": "Joey", "age": "33" }, "friend2": { "name": "Rachel", "age": "28" }, "bestFriend": { "name": "Chandler", "age": "31" } }

ES5

var friends = {}
friends.friend1 = profile.friend1
friends.friend2 = profile.friend2
friends.bestFriend = profile.bestFriend
console.log(friends)

output

{"friend1": { "name": "Joey", "age": "33" }, "friend2": { "name": "Rachel", "age": "28" }, "bestFriend": { "name": "Chandler", "age": "31" } }

설명

const {name, age, ...friends} = profile 와 같이, name , age 이외의 프로퍼티을 friends 에 정리할 수가 있습니다.

Playground

See the Pen ES6-sample by qwerty8t ( ㅎㅎ )
on CodePen .