Help us understand the problem. What is going on with this article?

JavaScript省略形多すぎ問題

More than 1 year has passed since last update.

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

アロー関数

アロー関数 - JavaScript | MDN

基本形
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)
}

// 引数が2つ以上の場合は省略不可
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
})
// 2つは同じ
[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 }
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした