オブジェクトから取り出す

01 / 06

同じような行が縦に並ぶ

オブジェクトから値を取り出すときは user.name と書いてきた。何度も使うなら、いったん変数に入れておくよね。

でも項目が増えるほど、ほとんど同じ行が縦に積み上がっていく。読むほうも「で、結局どれを使うんだ」と分かりにくい。

const user = {  name: "ゆい",  age: 20,};const name = user.name;const age = user.age;console.log(name);console.log(age);

実行結果

ゆい
20

02 / 06

= の左側に { } を書いて、その中に欲しい項目の名前を並べる。それだけで、さっきの2行が1行になるよ。

この書き方を分割代入と呼ぶ。オブジェクトを分解して、必要なところだけ変数として受け取る、という意味だね。

const user = {  name: "ゆい",  age: 20,};const { name, age } = user;console.log(name);console.log(age);

実行結果

ゆい
20

03 / 06

{ } の中に書けるのは、そのオブジェクトが持っているプロパティの名前だけだよ。好きな名前をつけられるわけではない。

無い名前を書いてもエラーにはならず、undefined が入る。下の prise は price の打ちまちがえだけど、止まってくれないんだ。

const book = {  title: "そらのほん",  price: 800,};const { prise } = book;console.log(prise);

実行結果

undefined

04 / 06

全部を取り出す必要はないよ。この先で使う項目だけを書けばいい。

逆に言うと、{ } の中を読めば「ここから先どの項目を使うのか」が分かる。短く書けるだけでなく、読む人への合図にもなるんだ。

const cat = {  name: "もふ",  color: "しろ",  age: 3,};const { color } = cat;console.log(color);

実行結果

しろ

05 / 06

この書き方がいちばん効くのが関数の引数だよ。受け取る場所に直接 { } を書くと、中で使う項目が関数の見出しに出る。

他人のコードでとてもよく見かける形なので、まずは読めるようにしておこう。

function introduce({ name }) {  return `${name}さん`;}const user = { name: "ゆい" };console.log(introduce(user));

実行結果

ゆいさん

06 / 06

ここまでを整理しておこう。

それじゃあ、実際に取り出してみよう。