[JavaScript]分割代入とスプレッド構文の問題を作ってみました

記事の概要

今回は私が現場でJavaScriptのソースコードに触れてみて辛かった「分割代入」と「スプレッド構文＋残余引数」について自分の理解度を深めてみようと思います。

目的

分割代入とスプレッド構文の問題を解くことで理解を深める。

この記事はこういう方にオススメ

分割代入とスプレッド構文を読み慣れていない方。

分割代入とは？

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

関数の返値が「オブジェクト」や「配列」である時に、関数側に変更を加えず返値を受け取る側で使いやすい形する目的で使われることが多いです。

スプレッド構文とは？

スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

仕様したいオブジェクトや配列にある値を使いたいけど、「オブジェクトや配列としての塊」ではなく個々の値として欲しい時に使われます。

分割代入とスプレッド構文がなぜ辛いと感じるのか

私が理解するのに苦しんだのは以下の点でした。

1. 分割代入とスプレッド構文は組み合わさって使われることが多い
2. スプレッド構文と残余引数に使われる「…」が意味合いとして逆の使われ方をしている。

もし私と同じように辛いと感じる方でも公式のリファレンスを読むと書いてある事は理解できると思います。しかし、分割代入とスプレッド構文は同時に出てくることが大半でどちらかの使い方から慣れていくという手順が踏めません。

そこで今回は己の理解度を高めるのも兼ねて分割代入とスプレッド構文の課題をそれぞれ分けて問題を作ってみました。簡単な問題ですが、リファレンスを読む場合とまた違うインプットができると思います。

分割代入に関する問題

問　以下のconsoleで何が表示されますか？　

let hoge, poge;
[hoge, poge] = [10, 20];
console.log(hoge)

答え　10　　　　解説：単純な配列の分割代入です。pogeは20です。

問　以下のconsoleで何が表示されますか？

let hoge;
[hoge] = [10, 20];

console.log(hoge)

答え　10　　　　解説：代入される側の配列がhogeだけなので10が受け取れます。

問　以下のconsoleで何が表示されますか？

let hoge;
[,hoge] = [10, 20];

console.log(hoge)

答え　20　　　　解説：構文エラーのように見えるのが嫌らしいです。

問　以下のconsoleで何が表示されますか？

hoge = [10, 20];

console.log(hoge)

答え　[10,20]　　　　解説：分割代入はなく普通の代入ですね。（ひっかけ問題です）

問　以下のconsoleで何が表示されますか？

let hoge, poge
[hoge,,poge] = [10, 20, 30, 40, 50];

console.log(poge)

答え　30　　　　解説：ぱっと見構文エラーに見えますね。hogeは10

問　以下のconsoleで何が表示されますか？

let hoge, poge
[hoge,,poge,] = [10, 20, 30, 40, 50];

console.log(poge)

答え　30　　　　解説：これもぱっと見構文エラーに見えますね。

問　以下のconsoleで何が表示されますか？

let hoge, poge
[hoge=3,,poge] = [, 20, 30, 40, 50];
console.log(hoge)

答え　3　　　　解説：分割代入時に値が存在しないとき初期値を指定することができます。（右辺がエラーにならないのがとても違和感あります）

問　以下のconsoleで何が表示されますか？

let hoge, poge
[hoge=3,,poge] = [10, 20, 30, 40, 50];
console.log(hoge)

答え　10　　　　解説：初期値3を指定していますが右辺で10が指定されているので10です。

問　以下のconsoleで何が表示されますか？

const array = [10,20,30];
[array[2], array[0]] = [array[0], array[2]];
console.log(array);

答え　[30,20,10]　　　　解説：分割代入を利用した値の交換ができます。

問　以下のconsoleで何が表示されますか？

const user = {
    hoge: 10,
    poge: 100
};

const {hoge, poge} = user;

console.log(hoge);
console.log(poge);

答え　10 100　　　　解説：オブジェクトの分割代入です。右辺のキーに対応した変数に値が左辺に代入されます。

問　 以下のconsoleで何が表示されますか？

const user = {
    hoge: 10,
    poge: 100
};

const {a, b} = user;

console.log(a);
console.log(b);

答え　undefined undefined　　　　解説：左辺には右辺のオブジェクトに存在するキーを指定する必要があります。

問　以下のconsoleで何が表示されますか？

const X = {hoge: 100, poge: true};
const {hoge: foo, poge: bar} = X;


console.log(foo);
console.log(bar);

答え　100 true　　　　解説：分割代入した後に左辺で変数名を指定して受け取ることができます。（typescriptの型指定に似てて嫌いです。）

問　 以下のconsoleで何が表示されますか？

const X = {hoge: 100, poge: true};
const {hoge: foo, poge: bar} = X;


console.log(hoge);
console.log(poge);

答え　構文エラーになります　　　　解説：問12と似ていますがhogeとpogeは未定義になります。個人的に最もややこしく感じじます。

問　以下のconsoleで何が表示されますか？

const {a: hoge, b: poge = 5} = {a: 10};

console.log(hoge);
console.log(poge);

答え 　10 5　　　　解説：オブジェクトの分割代入でも初期値の指定ができます。

問　以下のconsoleで何が表示されますか？

let X = 'hoge';
let {[X]: foo} = {hoge: 'bar'};

console.log(foo);

答え　’bar’　　　　解説：右辺から受け取るキーを変数指定できます。

問 以下のconsoleで何が表示されますか？

const userHoge = {
  name:'Taro',
  age:20
}

function userId({name}) {
  return name;
}

console.log(userId(userHoge));

答え　’Taro’　　　　解説：関数の定義でオブジェクトを引数に取るときにも分割代入を使う事ができます。この形式も苦手です。

問　以下のconsoleで何が表示されますか？

const userHoge = {
  name:'Taro',
  age:20
}

function userId({name:hoge}) {
  return hoge;
}

console.log(userId(userHoge));

答え　’Taro’　　　　解説：関数の定義の時も変数名を指定した分割代入を行うことができます。

問　以下のconsoleで何が表示されますか？

const userHoge = {
  name:'Taro',
  age:20
}

function userId(user) {
  return user.name;
}

console.log(userId(userHoge));

答え　’Taro’　　　　解説：ただオブジェクト引数に取っているだけですね

スプレッド構文に関する問題

問 以下のconsoleで何が表示されますか？

let hoge = [0, 1, 2];
let x = 3;
let poge = [...hoge, x];

console.log(poge)

答え　[0, 1, 2, 3]　　　　解説：配列の一番簡単なパターンのスプレッド構文です。

問 以下のconsoleで何が表示されますか？

let hoge = {
  name:'Taro',
  age:20,
}

let poge = {...hoge}

console.log(poge)

答え { name: “Taro”, age: 20 }　　　　解説：オブジェクトの分割代入の基本の形です。この形だとスプレッド構文使う意味はないですね。

問 以下のconsoleで何が表示されますか？

function hogeFunc(A,B,C,D,E) {
  console.log(D)
}

let array = [3,4,5]
hogeFunc(1,2,...array)

答え　4　　　　解説：関数を呼び出す時にスプレッド構文（残余引数）を用いるパターンです。

問 以下のconsoleで何が表示されますか？

function hogeFunc(X,  Y, ...args) {
  console.log(args)
}

hogeFunc(1,2,3,4,5,6)
hogeFunc(1,2,3,4)

答え　[3, 4, 5, 6]　[3,4]　　　解説：関数定義の際にスプレッド構文（残余引数）を用いるパターンです。この関数に渡される変数の数は可変です。この「…」は引数をまとめるような役割になるので一瞬戸惑います。

問 以下のconsoleで何が表示されますか？

function hogeFunc(X,  Y, ...args) {
  console.log(args[0])
}

hogeFunc("TARO","JIRO",{A:100,B:200},{C:300})

答え　{ A: 100, B: 200 }　　　　解説：args[1]には{C:300}が入っています。

問 以下のconsoleで何が表示されますか？

function hogeFunc(X, ...args,Y) {

  console.log(args[0])
}

hogeFunc("TARO","JIRO",{A:100,B:200},{C:300})

答え　構文エラーになります。　　　　解説：残余引数は関数定義の引数の最後に設定する必要があります。

まとめ

皆さん全問正解できたでしょうか？たまに解き直して頂けるとさらに記憶に定着すると思います！

参考文献

• MDN Web Docs様『スプレッド構文』『分割代入』