【初心者必見】 JavaScript・Nodeの分割代入とは

2022年11月5日2022年11月23日JavaScript,Node

kamiです。
TwitterとYoutubeもやってます。

みなさん分割代入の知識はありますか？
この記事はJavaScriptやnodeの分割代入について聞いたことはあるけど、いまいち分割代入についてよく分かってない方や、
全く知識がない方へJavaScriptやnodeの分割代入についての紹介です。

この記事でわかること

JavaScript、Nodeの分割代入とは
配列の分割代入の使い方
オブジェクトの分割代入の使い方

この記事を最後まで読めば「JavaScript、Nodeの分割代入とは」から「分割代入の使い方」までの理解が深まりますので、最後まで読んで「分割代入」についてマスターしましょう。

それでは順に見ていきましょう。

1. 分割代入とは
2. 配列を分割代入する
3. オブジェクトを分割代入する
4. まとめ
5. 実装やエラーが解決できない場合

分割代入とは

分割代入とは

分割代入とは複数の値をまとめて変数に代入することができます。
変数などの値をまとめることで、コードがすっきりして扱いやすくなります。

上記から見てわかるように、分割代入は配列またはオブジェクトを変数をまとめます。

配列：インデックスでデータの管理を行える
オブジェクト：データ毎にキーを持たせることができ、データの管理を行える

配列の分割代入

let node_array = [array1, array2, array3];

オブジェクトの分割代入

const node_object = {
  'key1': 'value1',
  'key2': {
    'key2_1': 'value2_1'
  }
}

配列を分割代入する

配列での分割代入する方法を紹介します。

通常の配列を分割代入

配列を分割代入

let array = ["array1", "array2"];
 
let ["arr1", "arr2"] = arr;
 
console.log(arr1);  // array1
console.log(arr2);  // array2

変数arrayを分割代入の変数split_arrに格納することで、split_arrの各変数名で値を取り出すことができます。

引数の値をデフォルトで指定して分割代入

引数の値をデフォルトで指定して分割代入

const array = ["array1", "array2"];
 
let arr1, arr2, arr3
[arr1, arr2, arr3="array5"] = arr
console.log(arr1)  // array1
console.log(arr2)  // array2
console.log(arr3)  // array5

分割代入時の引数にデフォルトの値を指定することで、引数がない場合はデフォルトの値を使用することができます。

可変長引数で配列を分割代入

可変長引数で配列を分割代入

let node_array = ["array1", "array2", "array3"];
 
let arr1, arr2
 
[arr1, ...arr2] = node_arr
 
console.log(arr1)  // array1
console.log(arr2)  // [array2, array3]

可変長引数を使って値を分割代入することができます。

可変長引数は「…」で残りの全ての値が変数に格納することができます。

スポンサードサーチ

オブジェクトを分割代入する

オブジェクトでの分割代入する方法を紹介します。

キーを指定してオブジェクトに分割代入

キーを指定してオブジェクトに分割代入

const object = {
  'key1': 'value1',
  'key2': 'value2'
}
 
const { key1, key2 } = object
 
console.log(key1)  // value1
console.log(key2)  // value2

キーとは別の変数をオブジェクトに分割代入

キーとは別の変数をオブジェクトに分割代入

const object = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': 'value3'
}
 
const { key1: valueA, key3: valueB, key2: valueC } = object
 
console.log(valueA)  // value1
console.log(valueB)  // value3
console.log(valueC)  // value2

少し分かりずらいかもしれませんが、分割代入側のkeyを指定して、valueを取得すると、値を取り出すことができます。

可変長引数でオブジェクトを分割代入

可変長引数でオブジェクトを分割代入

const object = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': 'value3'
}
 
const { key2, ...objectA } = object
 
console.log(key2)     // value2
console.log(objectA)  // { key1: "value1", key3: "value3" }

可変長引数でのオブジェクトの分割代入は「…」の後の可変長引数でオブジェクトのキーとバリューを取得することができます。

オブジェクトの値をデフォルトで指定して分割代入

オブジェクトの値をデフォルトで指定して分割代入

const object = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': 'value3'
}
 
const { key1, key2='valueB', key4='valueD' } = object
 
console.log(key1)  // value1
console.log(key3)  // value3
console.log(key4)  // valueD

配列同様にkeyがない引数を取得しようとすると、デフォルトでオブジェクトの値が指定することができます。
keyがあれば指定したオブジェクトの値が使用されます。

多次元オブジェクトで分割代入

多次元オブジェクトで分割代入

const object = {
  'key1': 'value1',
  'key2': {
    'key2_1': 'value2_1'
  }
}
 
const { key1: keyA, keyB: { keyB_1: b } } = object
 
console.log(keyA)  // value1
console.log(keyB)  // value2_1

多次元のオブジェクトでも分割代入数ことができます。
ただし、多次元なので取得できる構造が固定されているのが条件なので、ある意味多次元ではあるけど設計通りの構造のプログラムを組まなければいけません。

まとめ

分割代入では、配列、オブジェクトを簡単に取り出すことができる。

スポンサードサーチ

実装やエラーが解決できない場合

プログラミングの実装やエラーでどうしてもわからない場合はメンターに相談するのが一番です。
考えている、見えている範囲が狭くなり、解決から遠くに行って何時間も、何日も経っていることなんてよくある話です。

そういう時は聞ける先輩や、メンターに相談することが大事です。
僕にも相談可能なので気軽に相談してください。