JavaScriptの変数constのオブジェクトのいろんな取り扱い方

JavaScriptの変数宣言はvar、let、constと3つありますが、プログラムのバグ発生を防ぐためにも定数のように変化させない値を扱えるconstをうまく利用してプログラムを書いていくことが多くなってきます。

そんな中で、constは再代入が不可なので定義されたものを変化させられないと思いますが、実際はオブジェクトを操作することは可能です。

プログラムの中でconstで宣言したものを状況に応じてオブジェクト操作ができるととても便利です。

ということで、ここではいくつかのオブジェクトの操作方法をご紹介します。

プロパティの変更

オブジェクトのプロパティを変更方法になります。
例として、人気でおすすめの観光地に関する情報を扱ったものを用意してみました。

recommendにfirst、second、thirdとして情報を扱っている中で、secondを変更する場合には変数に対するキーを指定することでプロパティを変更することができます。

const recommend = {first: "Tokyo", second:"Hokkaido", third:"kyoto"};
console.log(recommend); //{fruit: "Tokyo", second: "Hokkaido", third: "kyoto"}
recommend.second = "Fukuoka";
console.log(recommend); //{fruit: "Tokyo", second: "Fukuoka", third: "kyoto"}

結果はconsole.log()でコンソールに表示させています。
secondのプロパティがFukuokaに変更されたのが確認できます。

プロパティを追加する

先程のプログラムに2つほどプロパティを追加してみます。
constでrecommendAddという変数を宣言して第一引数に「…recommend」と対象のオブジェクトを指定して、カンマ区切りでプロパティを追加していきます。

const recommend = {first: "Tokyo", second:"Hokkaido", third:"kyoto"};
console.log(recommend); //{fruit: "Tokyo", second: "Hokkaido", third: "kyoto"}
recommend.second = "Fukuoka";
console.log(recommend); //{fruit: "Tokyo", second: "Fukuoka", third: "kyoto"}
 
const recommendAdd = { ...recommend, fourth: "okinawa", fifth: "Kanagawa" }
console.log(recommendAdd); //{fruit: "Tokyo", second: "Fukuoka", third: "kyoto", fourth: "okinawa", fifth: "Kanagawa"}

recommendAddにfourthとfifthのプロパティが追加されたのが確認できます。

オブジェクトを統合する

続いてはオブジェクトの統合です。
例として、ユーザーの情報を管理するようなプログラムを用意してみました。
2つのオブジェクトを新しいオブジェクトに結合してみます。

以下はpart1にpart2を結合するプログラムになります。

const part1 = { id: 12, name: "Akira", password: "Password" }
console.log(part1); //id: 12, name: "Akira"
const part2 = { id: 14, from: "Japan" }
const user = { ...part1, ...part2 }
console.log(user); //id: 14, name: "Akira", password: "Password", from: "Japan"

この場合、存在するプロパティ（id）に対しては値が更新され、存在しないプロパティ（from）は追加されるように結合されます。

オブジェクトプロパティを除外する

オブジェクトのプロパティを除外することも可能です。
先程のオブジェクトの結合のプログラムから、剰余演算子と組み合わせて分割代入を使用してfromのプロパティを除外します。

const part1 = { id: 12, name: "Akira", password: "Password" }
console.log(part1); //id: 12, name: "Akira"
const part2 = { id: 14, from: "Japan" }
const user = { ...part1, ...part2 }
console.log(user); //id: 14, name: "Akira", password: "Password", from: "Japan"
 
const noFrom = ({ from, ...rest }) => rest
console.log(noFrom(user)); //id: 14, name: "Akira", password: "Password"

noFromではfromを除外の対象として残りのプロパティはrestとして返すようにしています。
コンソールではuserからfromが除外されているのが確認できます。