ES6以降の構文とES5の構文の比較

17486 ワード
JavaScript es6 JavaScript テキストリンク

はじめに

分割代入とかスプレッド構文とかよく聞くけど、結局使い道がわからない方へ
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 }) {}

object
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'
}

また、スプレッド構文は分割代入と併用するととても便利です。

object
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 (@qwerty8t) on CodePen.