JavaScriptの配列の分割代入をやさしく理解しよう

JavaScriptを書いていると、次のような書き方を見かけることがあります。

const [first, second] = fruits;

これまでの記事のuseStateでも同じような書き方が出てきましたね。

const [count, setCount] = useState(0);

実は、この[]はJavaScriptにある配列の分割代入という仕組みです。

今回は、JavaScriptの配列の分割代入について、基本からやさしく理解していきましょう。

まず普通に配列から値を取り出してみよう

まずは、次のような配列があるとします。

const fruits = ["りんご", "バナナ"];

この配列から、「りんご」と「バナナ」を取り出してみましょう。

const first = fruits[0];

const second = fruits[1];

console.log(first);  // りんご
console.log(second); // バナナ

このように、配列はインデックス番号を指定して値を取り出すことができます。

イメージすると、次のようになります。

fruits
  ↓
["りんご", "バナナ"]

fruits[0] → "りんご"
fruits[1] → "バナナ"

配列の分割代入とは？

先ほどの処理を、もっと簡単に書くことができます。

const [first, second] = fruits;

これが配列の分割代入です。

先ほどと同じように、

console.log(first);  // りんご
console.log(second); // バナナ

となります。

イメージとしては、次のような感じです。

const [first, second] = fruits;

        ↓

fruits
["りんご", "バナナ"]

        ↓

first  → "りんご"
second → "バナナ"

つまり、

「配列の1番目をfirstに入れて、2番目をsecondに入れてね」

という指示だと考えると分かりやすいでしょう。

なぜ[]なの？

ここが、配列の分割代入を理解するうえで大切なポイントです。

次のコードを見てください。

const [first, second] = fruits;

左側の[]は、

「右側の配列から、順番に値を取り出します」

という形だと思ってください。

右側にあるfruitsは配列なので、左側も[]を使って値を受け取ります。

オブジェクトの場合は{}を使う

JavaScriptには配列だけではなく、オブジェクトの分割代入もあります。

const user = {
  name: "太郎",
  age: 20
};

const { name, age } = user;

この場合は、

name → "太郎"
age  → 20

となります。

関数が配列を返すこともできる

ここでもう一つ、覚えておきたいことがあります。

それは、JavaScriptでは関数が配列を返すことができるということです。

例えば、自分で次のような関数を作ることができます。

function getUser() {
  return ["太郎", 20];
}

この関数を実行すると、

getUser();

↓

["太郎", 20]

という配列が返ってきます。

そのため、次のように書くことができます。

const [name, age] = getUser();

console.log(name); // 太郎
console.log(age);  // 20

これは、先ほどの配列の分割代入とまったく同じ考え方です。

const fruits = ["りんご", "バナナ"];

const [first, second] = fruits;

右側が配列そのものなのか、配列を返す関数なのかという違いだけです。

ここまでのポイントを整理しよう

ここまでの内容を整理してみましょう。

• 配列の分割代入を使うと、複数の値をまとめて取り出せる
• 配列の分割代入では[]を使う
• 関数は配列を返すこともできる
• 配列を返す関数の結果も、分割代入できる

この仕組みを理解しておくと、Reactでよく登場する次のコードも理解しやすくなります。

const [count, setCount] = useState(0);

次の記事では、いよいよこのコードを詳しく見ていきます。

「useStateは何を返しているのか？」
「countとsetCountには、なぜこの2つの値が入るのか？」

今回学んだ配列の分割代入を使って、一つずつ確認していきましょう。