Closed6

【JavaScript】PropertyDescriptor

JavaScript
ShionShion

getOwnPropertyDescriptor

プロパティは Key と Value から成り立つものではあるが、実はそれだけではない。

const user = {
  name: "shion",
  age: 99,
};

const result = Object.getOwnPropertyDescriptor(user, "name");

result を出力すると、以下の value 以外の３つのプロパティを含むオブジェクトが表示される。
これらをプロパティディスクリプターという。

{
    configurable: true,
    enumerable: true,
    writable: true,
    value: "shion"
}

※ 初期値は全て true となる

ShionShion

defineProperty

プロパティディスクリプターを書き換えることができる。

Object.defineProperty(user, "name", { value: "yamada" });

console.log(user.name); // yamada
ShionShion

プロパティディスクリプター解説

wribale

これを false にすると、書き換えられなくなる。

Object.defineProperty(user, "name", { writable: false });

user.name = "saki"; // Cannot assign to read only property 'name' of object '#<Object>'

ただ、defineProperty は最強なので、writable が false であっても書き換え可能。

Object.defineProperty(user, "name", { value: "saki" });

console.log(user.name); // saki

enumerable

これを false にすると、ループできなくなる。

以下の例では、name をループ不可能にした。実際ループしても、age だけがループ対象となる。

const result = Object.getOwnPropertyDescriptor(user, "name");

Object.defineProperty(user, "name", { enumerable: false });

for (const key in user) {
  console.log(key); // age
}

configurable

これを false にすると、設定不可能になる。
※ ただし value は変更可能

Object.defineProperty(user, "name", { configurable: false });

Object.defineProperty(user, "name", { configurable: true }); // Uncaught TypeError: Cannot redefine property: name
ShionShion

普通のプロパティも追加できる

Object.defineProperty(user, "language", {
  value: "ja",
  writable: true,
  enumerable: false,
  configurable: true,
});

console.log(user.language); // ja
ShionShion

PropertyDescriptor の使い所

ライブラリやフレームワークを作成する場合だろうか。

このスクラップは2024/12/18にクローズされました