2018.07.28

初心者がなにこれ(´・ω・｀)？ってなりそうな新しめのJavaScript文法まとめ

JavaScript

アロー関数

まずはアロー関数です。アロー関数は ES2015 の目玉機能だったのでご存知の方も多いかもしれません。ただ最近でも初心者向けの入門書では紹介されていなかったりしますね。

アロー（矢印）関数は「矢印関数」の名前の通り、function キーワードの代わりに矢印を使った無名関数の定義記法です。以下の2つは同じ意味です。

(a, b) => {
  return a + b
}

function(a, b) {
  return a + b
}

そんなアロー関数ですが、記法のバリエーションがいくつかあります。

まず、{} の中が1行しかない場合は省略して以下のように書けます。return も省略可能です。=> の先の式の結果が返却されます。

(a, b) => a + b

引数がひとつしかない場合は () も省略できます。

a => a * 2

逆に引数がない場合は () は省略できません。

() => console.log('ha ha')

こんな風に使われます。初めて見るとどこからどこまでが関数なのか分かりづらいですね。

// 配列操作メソッドの引数に
const arr = [1, 2, 3].map(num => num * 2)

// カンマまでの第一引数がアロー関数
setTimeout(() => console.log('ha ha'), 2000)

// 変数に格納
const func = (a, b) => a + b

// オブジェクトの値に指定
const obj = {
  greeting: name => `Hello, ${name}`
}

function関数とアロー関数はほとんど同じですが、ひとつ大きな違いがあります。this のスコープです。

普通の関数は関数の内部と外部でthisのスコープが違います。そのため関数内部から外部の this を参照させる場合は一度変数に入れて参照させるテクニックが必要でした。

var that = this
someArray.forEach(function(item) {
  that.someFunc(item)
})

アロー関数内部のthisのスコープはアロー関数の外側と同じです。

someArray.forEach(item => {
  this.someFunc(item)
})

オブジェクトの展開代入

オブジェクトから、あるキーの値だけを別の変数に入れる記法です。

const data = {
  firstName: 'David',
  lastName: 'Bowie',
  email: 'starman@gmail.com'
}

const { email } = data
console.log(email) // -> 'starman@gmail.com'

複数の値を取得することも可能です。

const { firstName, lastName } = data
console.log(`${firstName} ${lastName}`) // -> 'David Bowie'

別の名前の変数に代入することもできます。

const obj = { a: 123, b: 456 }
const { a: num } = obj
console.log(num) // -> 123

配列の展開代入

配列から、ある要素の値だけを別の変数に入れる記法です。

const arr = [1, 2, 3, 4]

const [one, , three] = arr

console.log(one) // -> 1
console.log(three) // -> 3

ヘンな機能ですが、配列の先頭の要素だけ取り出すのに使うと便利そうです。

const [firstUser] = users

配列の展開

ドット3つで配列が展開される書き方です。

const arrOne = [1, 2, 3]
const arrTwo = [9, 8, 7]

const arrThree = [
  ...arrOne,
  ...arrTwo,
  "JavaScript"
]
console.log(arrThree) // -> [1, 2, 3, 9, 8, 7, "JavaScript"]

配列型のメソッドなどを使用しなくても要素をマージできますね。

引数の展開

関数でオブジェクトを引数に取る場合、引数のオブジェクトの中から特定のキーの値のみ取り出す書き方があります。

const data = {
  firstName: 'David',
  lastName: 'Bowie',
  email: 'starman@gmail.com'
}

function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`
}

console.log(getFullName(data))

ちなみに取り出すキーが実引数に存在しなくても、特にエラーにはなりません。undefined として扱われます。

const obj = { hello: 'world' }
const func = ({ name }) => {
  console.log(name)
}
func(obj) // -> undefined

オブジェクトの値の省略記法

オブジェクトのキーと値を記述するときに使えるシンタックスシュガーです。

関数

これ↓は、

const objTwo = {
  greeting(name) {
    return `Hello, ${name}`
  }
}

これ↓と同じです。

const objOne = {
  greeting: function(name) {
    return `Hello, ${name}`
  }
}

: function を省略できるということですね。

キー名と値の変数名が同じ場合