🐈

[REACT/JS]分割代入（Destructuring Assignment）について

2023/04/18に公開

JavaScript

今日も REACTで頻出のJavaScriptについてやっていく！！！

分割代入（Destructuring Assignment）

分割代入（Destructuring Assignment）は、
JavaScriptにおいて配列やオブジェクトから値を取り出して、変数に代入する方法。
分割代入を使うことで、簡潔なコードを書くことができる。
⚠️ただし、使い過ぎると可読性が悪くなるので、適切な場所で使うようにしましょう。

【参考】

配列の分割代入

以下のように書く。

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

=> この場合、[1, 2, 3]という配列から、aには1、bには2、cには3が代入される。

分割代入だと何が違うのか？？

"分割代入は配列やオブジェクトから値を取り出して、変数に代入する方法"
と冒頭で説明したが、普通の配列で書くのと何が違うのか、なぜ生まれたのか。

【普通の配列】
普通に配列を扱う場合、以下のように書きますね。

const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

=> 配列の要素を取り出して変数に代入するために、配列の添字を使って値を取得.

ではこれを分割代入にすると。。。
【分割代入】

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

これだけで済みますね！！！！
今回は配列で例を出しましたが、オブジェクトを扱う場合も同様だ。

ここから分かる通り、分割代入は、
配列やオブジェクトから値を取り出す方法を簡単にするために作られました。
従来の方法では、配列やオブジェクトから値を取り出すために、多くのコードを書く必要があったが、
分割代入を使用することで、コードの可読性が向上し、より簡潔なコードを書くことができるようになった。

これは、大規模なアプリケーションを開発する場合には特に有用。
モダンJavaScriptの構文として必須知識です。

オブジェクトの分割代入

以下のように書きます。

const {name, age} = {name: 'John', age: 30};
console.log(name); // 'John'
console.log(age); // 30

=> この場合、{name: 'John', age: 30}というオブジェクトから、
nameには'John'、ageには30が代入される。

オブジェクトの分割代入では、プロパティに別名をつけることも可能。
オブジェクトのプロパティ名を変数名として使うには...

let {name: firstName, age: userAge} = {name: "John", age: 30};
console.log(firstName); // 'John'
console.log(userAge); // 30

配列やオブジェクトの特定の要素だけを取り出す

例えば、配列の2番目の要素を取り出す場合は、以下のように書きます。

const [, b] = [1, 2, 3];
console.log(b); // 2

以上！！！