はじめに
配列の分割代入
JavaScriptの配列の分割代入構文は、配列から値を取り出して、それぞれ別の変数に代入するための簡潔な書き方です。
次の例では、numberOfMoons配列の各値が、それぞれ対応する惑星に代入されています：
const numberOfMoons = [0, 2, 14];
const [venus, mars, neptune] = numberOfMoons;
neptune;
// => 14
まとめると：
- この構文を使うと、配列の中の_位置_で決まる要素に名前を付けられます。また、再代入を使って変数の値を入れ替えることもできます。
- 分割代入の構文は、関数の引数の中でも使えますし、反復可能なオブジェクトなら何にでも使えます。
- 位置に名前を付けないままにすると（変数名を_一切_書かなければ）、その位置の値は黙って無視されます。
オブジェクトの分割代入
JavaScriptには、オブジェクトからプロパティを取り出して、それぞれ別の変数に代入する分割代入構文もあります。
次の例では、weatherオブジェクトから天気の記号を取り出しています：
const weather = {
sun: '☀️',
sun_behind_small_cloud: '🌤️',
sun_behind_cloud: '⛅',
sun_behind_large_cloud: '🌥️',
sun_behind_rain_cloud: '🌦️',
cloud: '☁️',
cloud_with_rain: '🌧️',
cloud_with_snow: '🌨️',
cloud_with_lightning: '🌩️',
cloud_with_lightning_and_rain: '⛈️',
};
const { sun, cloud, cloud_with_lightning: thunder } = weather;
sun;
// => '☀️'
cloud;
// => '☁️'
thunder;
// => '🌩️'
まとめると：
- この構文を使うと、プロパティを取り出すだけでなく、取り出しながら名前を変えることもできます。
- 分割代入の構文は、関数の引数の中でも使えます。
説明
魔法使いの卵であるElyseは、修行を続けています。
彼女は、操りたいカードのデッキを持っています。
話を簡単にするため、たいていは2から10までのカードだけを使いますが、トリックによっては追加の（絵札の）カードを使うこともあります。
カードを入れ替える方法はたくさんありますが、マジックの幻想を保つためには、1つの方法だけを使わないことが重要です。たとえば、Elyseはsplice、slice、shift、unshift、push、atを使いません。
配列のアクセサarray[index]とオブジェクトのアクセサ（object[key]とobject.key）も、決して使ってはいけません。
Elyseのマジックをレベルアップさせるのを手伝ってみませんか？
どの関数も、入力と、単一のreturn expressionからなる関数本体を使って実装できます。
1. 1枚目のカードを取得する
Elyseは、array[index]、.at(index)、.shift()を使わずに、デッキの1枚目のカードを召喚します。
まるで魔法のようです。
const deck = [5, 9, 7, 1, 8];
getFirstCard(deck);
// => 5
2. 2枚目のカードを取得する
Elyseは巧みな手さばきで、array[index]や.shift()を使わずに、デッキの2枚目のカードを召喚します。
const deck = [3, 2, 10, 6, 7];
getSecondCard(deck);
// => 2
3. 2枚のカードを入れ替える
Elyseは、デッキの2枚のカードの場所を入れ替えます。
関数を1つも呼び出す必要はありません。
const deck = [10, 7];
swapTwoCards(deck);
// => [7, 10]
4. 3枚のカードをずらす
さらに巧みな手さばきを見せるために、Elyseは3枚のカードを取り、一番上のカードをすばやく後ろに移動させます。
こうして、真ん中のカードが1枚目になり、元の一番下のカードが真ん中になります。
関数を1つも呼び出す必要はありません。
const deck = [2, 6, 10];
shiftThreeCardsAround(deck);
// => [6, 10, 2]
5. 名前を付けた山を選ぶ
Elyseはデッキを2つの山に分けます。
次に、観客に2つの山のうち1つを選んでもらいます。これをchosenと名付けます。
disregardedの山はもう関係ないので、彼女はそれを消してしまいます。
関数を1つも呼び出す必要はありません。
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
pickNamedPile({ chosen, disregarded });
// => [5, 4]
5. 選んだ山を入れ替える
残念ながら、観客は「間違った」山ばかり選びます。しかし、巧みで素早いマジックで、Elyseはchosenの山をdisregardedに、disregardedの山をchosenに改名します。
関数を1つも呼び出す必要はありません。
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
swapNamedPile({ chosen, disregarded });
// => { chosen: [7, 10], disregarded: [5, 4] }
学習演習
