2021年11月8日 JavaScript (JS Primer) Computed property names

Computed property names

Computed property namesとは、オブジェクトリテラル内でのブラケット記法を使ったプロパティ名です。Computed property namesを使うことで、プロパティ名を動的に作成できます。

const key = "age";

const person = {
    [key]: "25"
};

console.log(person); // => { age: '25' }
console.log(person[key]); // => "25"
console.log(person.age); //=> "25"
console.log(person["age"]); //=> "25"

プロパティの削除

delete演算子を使うことで、オブジェクトのプロパティを削除できます。

const obj = {
    key: "value",
    yano: "yanoyano";
};                      

delete obj.yano;  // yanoプロパティを削除します。
console.log(obj);
// => { key: 'value' }  yanoがない!!

constで定義したオブジェクトは変更可能

JavaScriptのconstは値を固定するのではなく、変数への再代入を防ぐためのものです。 そのため、次のようなobj変数への再代入は防げますが、変数に代入された値であるオブジェクトの変更は防げません。

const obj = { key: "value" }; // objオブジェクトをconstで定義します。
obj.key = "Hi!"; // プロパティを変更します。
console.log(obj.key); 

// => "Hi!"       変更されています。

const obj = { key: "value" };
obj = {}; // => SyntaxError

• 箱（オブジェクト）自体は変えられませんが、箱の中身（プロパティ）を追加したり変更することは出来ます。

作成したオブジェクトのプロパティの変更を防止するにはObject.freezeメソッドを利用する必要があります。strictモードと併用して利用します。(strictモードを宣言していない場合は凍結されずにスルーされるので変更できてしまいます。)

// strictモードとは、javascriptのコードをより厳しくエラーチェックすることができる仕組みです。
"use strict"; 
const object = Object.freeze({ key: "value" });

// freezeしたオブジェクトは凍結されプロパティを追加や変更できません。
object.key = "value-change"; // => TypeError: "key" is read-only 'key' of object '#<Object>'
//　上はプロパティ名の変更、下は追加しようとした場合にエラーが発生しています。
object.addkey = "yano"; // TypeError: Cannot add property addkey, object is not extensible

プロパティの存在を確認する

JavaScriptでは、存在しないプロパティに対してアクセスした場合に例外ではなくundefinedを返します。 また、undefinedやnullはオブジェクトではないため、これらに対して、キー名を指定して呼び出そうとすると初めてエラーになります。

const kenshirou = {age: 18, height: 185};
console.log(kenshirou.age); // => 18

// kenshirouにkenpouというプロパティが存在しないため、undefinedが返されます。
console.log(kenshirou.kenpou); // => undefined

console.log(kenshirou.kanpou); // => タイポしているがエラーにならずにundefinedを返します。

console.log(kenshirou.kanpou.yano); // => エラー 存在しないkanpouに対して呼び出そうとしているのでundefined.yanoとしているのと同じになりエラーを返しています。

プロパティの存在確認: undefinedとの比較

• この場合keyの値として"undefined"が入っていないかで条件分岐しています。
• 厳密にはプロパティの存在確認自体はできていません。

(現時点での学習の範囲内ではプロパティのvalueがundefinedの場合というのはイメージしづらいため、実質この方法でプロパティの存在の有無は確認できるような気がしています。)

const obj = {
    key: "value"
};
// `key`プロパティが`undefined`ではないなら、プロパティが存在する?
if (obj.key !== undefined) {
    console.log("`key`プロパティの値は`undefined`ではない");
}

プロパティの存在確認: in演算子を使う

• undefinedが値に持つkeyプロパティがオブジェクトに入っています。
• "key名" in obj名とすることで objの中にプロパティが存在する場合にtrueを返します。

この方法では上記のundefinedとの比較では判別できなかったプロパティのvalueがundefinedの場合もtrueとなるため、プロパティ自体の存在の有無を確認することができます。

const obj = { key: undefined };
// `key`プロパティを持っているならtrue
if ("key" in obj) {
    console.log("`key`プロパティは存在する");
}

プロパティの存在確認: hasOwnPropertyメソッド

• オブジェクト自身が指定したプロパティを持っているかを判定できます。
• obj名.hasOwnProperty("プロパティ名")とします。

この方法もin演算子と同様の結果を得られていますが、厳密には別の挙動をしているようです。この詳細は次章で詳しく説明すると記載してありましたので、そのときに深掘りしていきます。

const obj = { key: "value" };
// `obj`が`key`プロパティを持っているならtrueを返します。
if (obj.hasOwnProperty("key")) {
    console.log("`object`は`key`プロパティを持っている");
}

参考文献

How to use computed property names in JavaScript

“use strict”（厳格モード）を使うべきか？