【JavaScript】仮引数の括弧{}の挙動を理解した

概要

ES2015の{}←コイツの記法で惑わされたので自分の理解の範囲でまとめる。
CやJavaは嗜んでいた私。JavaScriptを勉強し始めて現れた{ hoge }の表記。{}ってナニ？
で、調べた。{}を利用すると基本的にふたつ挙動がある。

分割代入

{}で囲うとそのプロパティの値を代入できる

const { a } = { a: 1, b: 2 } //a=1
const { a, b } = { a: 1, b: 2 } //a=1, b=2

なお分割代入は配列でも使える。
分割代入 - JavaScript | MDN

プロパティ名の省略

変数やメソッドをオブジェクトに入れると、プロパティを省略できる。
プロパティ名はその変数名,メソッド名。

  const a = 1
  const b = {a} //b = { a: 1 }
  //const b = { a: a }と同じ

  const c = x => {
    console.log({x})
  }
  c(a) //{ x: 1 }
  c(b) //{ x: { a: 1 } }

仮引数で{}を使うと分割代入

分割代入もプロパティ名省略も理解したぞーと思ったらここがややこしい。

  const a = 1
  //プロパティ名省略
  const b = { a }


  //仮引数の{}は分割代入
  const c = ({ a }) => {
    console.log(a) //1

    //プロパティ名省略
    console.log({ a }) //{ a: 1 }
  }

プロパティ名省略の部分が分割代入のに見えたり見えなかったりでつまずいたのでした。