オブジェクトを分割代入しようとしたらundefinedと表示された (JavaScript基礎)

はじめに

こんにちは！rikutoです。
今回はJavaScriptのオブジェクトの分割代入で変数名を変えたらundefinedになったという、ちょっと混乱ポイントになりがちな現象についてまとめてみました。
「なんでそうなるの？」をスッキリ理解できる内容になっています。

そもそも分割代入とは？

分割代入とは、配列やオブジェクトの中にある値を取り出し、変数として扱えるようにする構文です。

配列の場合

配列は「順番（インデックス）」で値が管理されています。

// 配列の宣言
const team = ["Taro", "Jiro", "Saburo"];

// team の要素が captain, member1, member2 に順番に入っていく
const [captain, member1, member2] = team;

// Taro, Jiro, Saburo
console.log(captain, member1, member2);

オブジェクトの場合

オブジェクトは「key 名」で値が管理されています。

// userProfile という名前のオブジェクトを宣言
const userProfile = {
  userName: "Taro",
  userAge: 25,
};

// userProfile の userName, userAge プロパティを変数として取り出す
const { userName, userAge } = userProfile;

// Taro, 25
console.log(userName, userAge);

undefined が返ってきた理由

配列のときと同じ感覚で、オブジェクトの変数名を勝手に変えてみたところ、undefinedが返ってきました。

const { myName, myAge } = userProfile;

// 結果は undefined, undefined
console.log(myName, myAge);

undefinedと返ってくる原因は、オブジェクトの分割代入はkey 名で値を取り出すため、存在しないkeyをしていするとundefinedになるから。

このコードは内部的にこう見なされています。

userProfile.myName // そんなkeyは存在しない -> undefined
userProfile.myAge // 同じく存在しない -> undefined

つまり、

• { myName }はmyNameというkeyを探す
• けれどuserProfileにmyNameというkeyは存在しない
• 結果: undefined
  という流れです。

正しく変数名を変える場合

ただ、オブジェクトでも、別名の変数に取り出す方法があります。

const { userName: myName, userAge: myAge } = userProfile;

console.log(myName, myAge); // Taro, 25

これは

• userProfile.userName -> myName
• userProfile.userAge -> myAge
  という意味になります。

さいごに

今回はJavaScriptの分割代入について紹介しました。

分割代入は便利な構文ですが、配列は 「順番」 ・ オブジェクトは 「key名」という仕組みの違いを理解しておくと、意図しないundefinedに悩まされることが少なくなります。

ここまで読んでいただき、ありがとうございました！