【初心者必見】 JavaScript・Nodeの分割代入とは
みなさん分割代入の知識はありますか？
この記事はJavaScriptやnodeの分割代入について聞いたことはあるけど、いまいち分割代入についてよく分かってない方や、
全く知識がない方へJavaScriptやnodeの分割代入についての紹介です。
この記事でわかること
- JavaScript、Nodeの分割代入とは
- 配列の分割代入の使い方
- オブジェクトの分割代入の使い方
この記事を最後まで読めば「JavaScript、Nodeの分割代入とは」から「分割代入の使い方」までの理解が深まりますので、最後まで読んで「分割代入」についてマスターしましょう。
それでは順に見ていきましょう。
分割代入とは
分割代入とは
分割代入とは複数の値をまとめて変数に代入することができます。
変数などの値をまとめることで、コードがすっきりして扱いやすくなります。
上記から見てわかるように、分割代入は配列またはオブジェクトを変数をまとめます。
- 配列：インデックスでデータの管理を行える
- オブジェクト：データ毎にキーを持たせることができ、データの管理を行える
配列の分割代入
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
多次元のオブジェクトでも分割代入数ことができます。
ただし、多次元なので取得できる構造が固定されているのが条件なので、ある意味多次元ではあるけど設計通りの構造のプログラムを組まなければいけません。
まとめ
- 分割代入では、配列、オブジェクトを簡単に取り出すことができる。
スポンサードサーチ
実装やエラーが解決できない場合
プログラミングの実装やエラーでどうしてもわからない場合はメンターに相談するのが一番です。
考えている、見えている範囲が狭くなり、解決から遠くに行って何時間も、何日も経っていることなんてよくある話です。
そういう時は聞ける先輩や、メンターに相談することが大事です。
僕にも相談可能なので気軽に相談してください。
Twitterからの連絡だと確実ですよ。
オンラインスクールやプログラミングスクールといったプログラミングを学べる方法もあるので、そちらもぜひ活用してもいいと思います。
Web開発で分からない時
オンライン完結型スクール DMM WEBCAMP PRO
アプリ開発で分からない時
プログラミング×稼げる副業スキルはテックキャンプ
プログラミングについて分からない時
【コエテコ様限定】※ご案内を受けた以外のメディアが使用しても成果は承認されません。
僕への個人でもメンターでも、スクールでもお好きな方を活用ください。
