Java Scriptの基礎その13　Objectの扱い

イントロダクション

JavaScriptは、ウェブ開発において非常に重要なプログラミング言語です。この記事では、JavaScriptの基本的なオブジェクト操作、デストラクチャリング、変数の再代入、関数のメソッドについて、具体的なコード例を通じて学んでいきます。初心者の方でも理解しやすいように、各要素を丁寧に解説し、コンソール出力の結果も示します。この記事を通じて、JavaScriptの基礎をしっかりと身につけてください。

オブジェクトの基本操作

まず、オブジェクトの作成とプロパティのアクセスについて説明します。以下のコードは、personalInformationというオブジェクトを定義し、そのプロパティをコンソールに出力しています。

const personalInformation = {
  name: "郷田たけし",
  age: 38,
  address: "東京都秋葉原",
  occupation: "歌手",
};

console.log(
  personalInformation.name,
  personalInformation.age,
  personalInformation.occupation
);

このコードでは、personalInformationオブジェクトが定義されており、name、age、address、occupationというプロパティを持っています。console.logを使って、それぞれのプロパティの値を出力します。出力結果は以下の通りです：

郷田たけし 38 歌手

デストラクチャリング

デストラクチャリングは、オブジェクトや配列の要素を簡単に変数に代入するための構文です。以下のコードは、personalInformationオブジェクトのプロパティをデストラクチャリングで変数に代入しています

const {
  name: personalName,
  age: howOldAreYou,
  occupation: job,
} = personalInformation;

console.log(personalName, howOldAreYou, job);

このコードでは、personalInformationオブジェクトからname、age、occupationのプロパティを抽出し、それぞれpersonalName、howOldAreYou、jobという新しい変数に代入しています。出力結果は以下の通りです：

郷田たけし 38 歌手

さらに、デフォルト値を設定する方法も見てみましょう。

const { address: whereDoYouLive = [], homeTown = [] } = personalInformation;
console.log(whereDoYouLive, homeTown);

このコードでは、addressプロパティが存在しない場合のデフォルト値として空の配列を設定しています。homeTownプロパティは存在しないため、デフォルト値が適用されます。出力結果は以下の通りです：

東京都秋葉原 []

変数の再代入とオブジェクトのプロパティ変更

次に、変数の再代入とオブジェクトのプロパティ変更について説明します。以下のコードは、変数x、y、zを宣言し、sampleObjectオブジェクトのプロパティを使ってそれらの値を再代入しています。

let x = 1;
let y = 2;
let z;

//mutating variables
console.log(x, y, z);
const sampleObject = { x: 4, y: 5, z: 6 };
({ x, y, z } = sampleObject);
console.log(x, y, z);

最初のconsole.logでは、変数x、y、zの初期値を出力します。出力結果は以下の通りです：

1 2 undefined

次に、sampleObjectオブジェクトのプロパティを使って、x、y、zの値を再代入し、再びconsole.logで出力します。出力結果は以下の通りです：

4 5 6

ネストされたオブジェクトのデストラクチャリング

ネストされたオブジェクトからプロパティを抽出する方法についても学びます。以下のコードは、midtermGradesオブジェクトを定義し、デストラクチャリングを使って数学の最高得点と最低得点を抽出しています。

const midtermGrades = {
  English: {
    HighestScore: 80,
    LowestScore: 30,
  },
  Math: {
    HighestScore: 90,
    LowestScore: 20,
  },
  Science: {
    HighestScore: 70,
    LowestScore: 40,
  },
};

console.log(midtermGrades.Math.HighestScore, midtermGrades.Math.LowestScore);
const {
  Math: { HighestScore: h, LowestScore: l },
} = midtermGrades;
console.log(h, l);

このコードでは、midtermGradesオブジェクトの中に英語、数学、理科の成績がネストされています。まず、数学の最高得点と最低得点をconsole.logで出力します。出力結果は以下の通りです：

90 20

次に、デストラクチャリングを使って数学の最高得点と最低得点を抽出し、出力します。出力結果は以下の通りです：

90 20

メソッドとデフォルト値

最後に、オブジェクトのメソッドとデフォルト値について学びます。以下のコードは、sushiRestaurantオブジェクトにorderDeliveryというメソッドを定義し、デフォルト値を使用して注文内容を出力しています。

const sushiRestaurant = {
  name: "Sushi Yamamoto",
  location: "東京都麻布十番",
  category: ["おまかせ", "にぎり", "丼", "吸物"],
  starter: ["漬物", "刺身", "巻き寿司"],
  main: ["1万円コース", "5万円コース", "10万円コース"],
  orderDelivery: function ({
    starterIndex = 1,
    mainIndex = 0,
    time = "11:00",
    address,
  }) {
    console.log(
      `注文を受け付けたよ! ${this.starter[starterIndex]} と ${this.main[mainIndex]} を${address}に ${time}へお届けします。`
    );
  },
};

const firstSampleOrder = sushiRestaurant.orderDelivery({
  starterIndex: 0,
  mainIndex: 1,
  time: "10:00",
  address: "東京都港区六本木",
});

このコードでは、sushiRestaurantオブジェクトにorderDeliveryメソッドを定義しています。このメソッドは、オブジェクトのプロパティをデフォルト値とともに受け取り、注文内容をコンソールに出力します。出力結果は以下の通りです：

注文を受け付けたよ! 漬物 と 5万円コース を東京都港区六本木に 10:00へお届けします。

さらに、引数の順番を変えても問題ないことを示すコードと、そのデフォルト値が適用される場合のコードも見てみましょう。

const secondSampleOrder = sushiRestaurant.orderDelivery({
  address: "東京都港区麻布十番",
  mainIndex: 2,
  time: "9:00",
  starterIndex: 1,
});

const thirdSampleOrder = sushiRestaurant.orderDelivery({
  mainIndex: 1,
  address: "東京都港区六本木",
});

const fourthSampleOrder = sushiRestaurant.orderDelivery({
  starterIndex: 0,
  mainIndex: 1,
  time: "10:00",
});

出力結果は以下の通りです：

注文を受け付けたよ! 刺身 と 10万円コース を東京都港区麻布十番に 9:00へお届けします。
注文を受け付けたよ! 刺身 と 5万円コース を東京都港区六本木に 11:00へお届けします。
注文を受け付けたよ! 漬物 と 5万円コース をundefinedに 10:00へお届けします。

ここで、thirdSampleOrderの例ではtimeのデフォルト値が適用され、fourthSampleOrderの例ではaddressが指定されていないためundefinedが出力されていることが分かります。

まとめ

この記事では、JavaScriptのオブジェクトの基本操作、デストラクチャリング、変数の再代入、メソッドとデフォルト値について具体的なコード例を通じて解説しました。特に、メソッド内でデフォルト値が設定されていない場合にundefinedが出力されることも示しました。これらの知識を活用することで、より効率的で読みやすいコードを書くことができるようになります。今回学んだ内容を実際にコードに取り入れて、JavaScriptの理解を深めてください。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！