概要

Reactのソースを読んでいる際に、あれ、この文法どうなってるんだ？というものがいくつかありました。
今まで自分が使ってたのはES2015の古いJavaScriptで、JSはES2016を界にJavaScriptの仕様が大幅に変更されてよりモダンな書き方が可能になったそうです。
それにあたって、よく使う新しい文法※について備忘録を作りました。

※ECMAScript 2018の基本文法

変数の宣言

const: 定数の変数宣言に利用
let: 再代入のありうる変数について利用

アロー関数

基本構文

// アロー関数の宣言1
const testFunc =  (n) => { return n + 1}

// アロー関数の宣言2
// 引数が一つだけの場合は括弧を省略可能
// 本文がreturn文だけの時は省略可能※
const testFunc = n => n + 1

// ※ただし、 objectリテラルを返す時は{}が必要なのでそれに伴い()をつけます
const testFunc2 = () => ({ foo: bar})

// 引数がない場合は()は省略不可
() => {  statements }

Reactでよく出てくる例

reduxの StateとDispatchをそれぞれPropsにマッピングさせるための関数
mapStateToProps、mapDispatchToPropsがあります。

const mapStateToProps = state => ({ value: state.count.value })

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement())
})

参考： MDN web docs アロー関数

スプレッド構文

const arr1 = ['A', 'K', 'B']
const arr2 = [...arr1, '4', '8']
console.log(arr2) // ["A", "K", "B", "4", "8"]

const obj1 = { first_name:'Kouji', num:'19'}
const obj2 = { ...obj1, positioon: 'pitcher', last_name: 'Uehara' }
console.log(obj2) //{first_name: "Kouji", num: "19", positioon: "pitcher", last_name: "Uehara"}

上のように、配列やオブジェクトの名前の前に「...」をつけるとそれらの中身が展開されます

非同期処理

前提

JSでは時間のかかる処理はほぼ非同期になります。

非同期処理のプロセスを待ってもらうやり方

const sleep = ms => new Promise(resolve=>setTimeout(resolve,ms))

const greet = () => {
  console.log("Jony!!")

  sleep(2000)
    .then(()=>{
      console.log('Horinouchi!')
      console.log('Megurono Sanma!!')
    })
    .catch(err=>{
      console.log('Danshi Exception', err)
    })
}

greet()

実行結果

Jony!!
(2秒sleep)
Horinouchi!
Megurono Sanma!!

ES2017のasync/awaitを使った上と同様な非同期処理のプロセスを待ってもらう実装

const sleep = ms => new Promise(resolve => setTimeout(resolve,ms))

const greet = async()=>{
}

const greet = async()=>{
  console.log("Jony!!")

  try{
    await sleep(2000)
    console.log('Horinouchi!')
    console.log('Megurono Sanma!!')
  }catch(err){
    console.log('Danshi Exception', err)
  }
}

greet()

まとめ

基本かつよく出てくるECMAScript特有のものについてまとめました。
随時追加削除更新をしていきたいとおもいます。

モダンなJavaScript「ECMAScript」でよく使う文法の備忘録

概要