0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-25

#概要
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 }
  }

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?