JavaScript(ES6以降)、省略形が多くてわけがわからない。

アロー関数

基本形

const printMessage = (msg) => {
  console.log(msg)
}
printMessage('hogehoge')


const sum = (x, y) => {
  return x + y
}
sum(1, 2) // 3

引数が一つなら`()`省略可

const printMessage = msg => {
  console.log(msg)
}

// 引数が２つ以上の場合は省略不可
const sum = x, y => { // シンタックスエラー！
  return x + y
}
// デフォルト引数を使う場合は省略不可
const hoge = msg = 'hogehoge' => { // シンタックスエラー！
  console.log(msg)
}
// スプレッド演算子を使う場合は省略不可
const hoge = ...args => { // シンタックスエラー！
  console.log(args)
}
// 引数がない場合は省略不可
const fuga = () => {
  console.log('hoge')
}

式の場合は`{}`省略可

// console.log(msg)はundefinedを返す式(expression)なので省略可
const printMessage = msg => console.log(msg)
printMessage('hogehoge')

// 「return x + y」は式(expression)ではなく、文(statement)なので省略不可
const sum = (x, y) => return x + y // シンタックスエラー！

式の場合は`return`省略可

// 「x + y」は式なので{}省略可でreturn省略可
const sum = (x, y) => x + y
sum(1, 2) // 3

[1, 2, 3].every((x) => { // true
  return x > 0
})
// ２つは同じ
[1, 2, 3].every(x => x > 0) // true

こんなこともできる(実用的かどうかは別として)

const hoge = (x) => {
  return (y, z) => {
    return x * y * z
  }
}
hoge(2)(3, 4) // 24

const hoge = x => (y, z) => x * y * z
hoge(2)(3, 4) // 24

よ、読めねえ！

プロパティ名省略代入

正式名称不明。
引数の変数名がそのままオブジェクトのプロパティ名になる。
JSONデータ作るときとかに重宝してる。

基本形

const i = 1
const str = 'hogehoge'
const arr = [1, 2, 3]
const obj = {
  i: i,
  str: str,
  arr: arr,
}

console.log(obj) // { i: 1, str: 'hogehoge', arr: [ 1, 2, 3 ] }

省略形

const i = 1
const str = 'hogehoge'
const arr = [1, 2, 3]

const obj = {i, str, arr}

console.log(obj) // { i: 1, str: 'hogehoge', arr: [ 1, 2, 3 ] }

分割代入

オブジェクトの分割代入

基本形

const obj = {
  hoge: 'hogehoge',
  fuga: 'fugafuga',
  piyo: 'piyopiyo',
}
const hoge = obj.hoge
const piyo = obj.piyo
console.log(hoge) // hogehoge
console.log(piyo) // piyopiyo

省略形

const obj = {
  hoge: 'hogehoge',
  fuga: 'fugafuga',
  piyo: 'piyopiyo',
}
const {hoge, piyo} = obj
console.log(hoge) // hogehoge
console.log(piyo) // piyopiyo

配列の分割代入

こっちはあまり使わなさそうなのでMDN見てね
分割代入 - JavaScript | MDN


const hoge = [1, 2, 3]

const [one, two, three] = hoge
console.log(one) // 1
console.log(two) // 2
console.log(three) // 3

モジュール使う時に便利に使えます

/*
const util = require('util')
const fs = require('fs')
const pStat = util.promisify(fs.stat)
*/
const { promisify } = require('util')
const { stat } = require('fs')
const pStat = promisify(stat)

引数にも使えます

const Oct1 = new Date(2018, 9, 1) // 2018-10-01
const myData = {now: Oct1, count: 1}

/*
const yesterday = (obj) => {
  const now = obj.now ? obj.now : new Date()
  return new Date(now.getFullYear(), now.getMonth(), now.getDate()-1)
}
*/
const yesterday = ({now = new Date()}) => new Date(now.getFullYear(), now.getMonth(), now.getDate()-1)
yesterday(myData) // 2018-09-30


/*
const countUp = (obj) => {
  let count = obj.count ? obj.count : 1
  return ++count
}
*/
const countUp = ({count = 1}) => ++count

countUp(myData) // 2
console.log(myData.count) // 1　

// 参照オブジェクトの操作ではなく、あくまで「代入」なので以下とは異なる
const countUp2 = (obj) => {
  return ++obj.count // ここでobj.countが+1される
}

countUp2(myData) // 2
console.log(myData.count) // 2

スプレッド演算子

スプレッド構文 - JavaScript | MDN

スプレッド演算子...で配列やオブジェクトが展開できちゃう。

関数呼び出し

const sum = (x, y, z) => x + y + z

const arr = [1, 2, 3]
sum(...arr) // 6

Array リテラル

const arr1 = [1, 2, 3]
const arr2 = [4, 5]
const merged_arr = [...arr1, ...arr2, 6, 7]
console.log(merged_arr) // [ 1, 2, 3, 4, 5, 6, 7 ]

可変長引数

const sum = (...args) => args.reduce((x, y) => x + y)
sum(1, 2, 3, 4, 5) // 15
sum(2, 4, 6, 8) // 20

Object リテラル

ES9からの新機能
今までObject.assign()を使ってやっていたオブジェクトのクローンが簡単に書けちゃう

const obj = { hoge: 1, fuga: 2 }
const objClone = { ...obj, piyo: 3 }
const objRef = obj

obj.hoge++
console.log(obj) // { hoge: 2, fuga: 2 }
console.log(objClone) // { hoge: 1, fuga: 2, piyo: 3 }
console.log(objRef) // { hoge: 2, fuga: 2 }

JavaScript省略形多すぎ問題