🐈

よく使うJavaScriptのオブジェクト操作をわかりやすくまとめてみた

2024/04/16に公開

JavaScript

object

tech

はじめに

配列操作はこちらをご確認ください。

new演算子

新しいオブジェクトや配列を作るときに使います。これにより、プログラムはそのデータを使用して作業を行うことができます。

オブジェクトの生成

アロー関数ではthisが固定されるため、新しいインスタンスを作成するコンストラクタとして使用することができないため、下記のような記述にしています。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const alice = new Person("Alice", 25);
console.log(alice); // Person { name: 'Alice', age: 25 }

配列の生成

const numbers = new Array(10);
console.log(numbers.length); // 10

this

現在のコードが実行されているコンテキスト内の現在のオブジェクトを参照することができます。

下記は、greet関数内のthisは、その関数が呼び出された際のコンテキストであるpersonオブジェクトを参照します。そのため、this.nameはpersonオブジェクトのnameプロパティを参照し、"Hello, Alice"という結果が出力されます。

function greet() {
    console.log('Hello, ' + this.name);
}

const person = {
    name: 'Alice',
    greet: greet
};

person.greet(); // Hello, Alice

Object.hasOwn() （プロパティ所有確認）

オブジェクトが指定されたプロパティを自身の直接的なプロパティとして持っているかどうかを確認するためのメソッドです。

私は、Object.hasOwn()を使用してオブジェクト内の特定のプロパティが存在するかを確認した後、そのプロパティを安全に参照する時によく使用します。

ちなみに、ここではkey is keyof typeof keyMapのようなTypeScriptの型ガードを使ってisKey型ガード関数を定義し、安全なプロパティアクセスを行っています。

const data = {
  id: 1,
  name: 'Mike'
};

// 型ガード関数をconstで定義
const isKey = (key: string): key is keyof typeof data => Object.hasOwn(data, key);


const key = 'name';

if (isKey(key)) {
  console.log(`The value of '${key}' is: ${data[key]}`);  // The value of 'name' is: Mike

} else {
// const key = 'email';などプロパティが存在しない場合に出力されます
  console.log(`The key '${key}' does not exist in the object.`);
}

Object.keys()

オブジェクトのすべての列挙可能なプロパティのキー（名前）を配列として返します。これにより、オブジェクト内のキーをループ処理することが可能です。

Object.values()

オブジェクトのすべての列挙可能なプロパティの値を配列として返します。これにより、オブジェクトの値を簡単に取得して処理できます。

Object.entries()

オブジェクトのすべての列挙可能なプロパティのキーと値のペアを含む配列を返します。これはキーと値を同時に扱う際に便利です。

Object.assign()

デフォルト設定の適用

コードの例では、Object.assign()メソッドを使ってdefaultSettingsとuserSettingsオブジェクトを空のオブジェクト{}にマージしています。この処理の後にsettingsオブジェクトにはマージされた結果が格納されますが、元のオブジェクト自体には変更はありません。

settingsオブジェクトはdefaultSettingsのvolumeとbrightnessプロパティを受け取り、userSettingsのvolumeプロパティによってvolumeが上書きされています。

このようにオブジェクトにデフォルトのプロパティセットを適用しつつ、特定のプロパティを上書きする場合に便利です

const defaultSettings = { volume: 70, brightness: 50 };
const userSettings = { volume: 80 };

const settings = Object.assign({}, defaultSettings, userSettings);
console.log(settings);  // { volume: 80, brightness: 50 }
console.log(defaultSettings);  // { volume: 70, brightness: 50 }
console.log(userSettings);     // { volume: 80 }

オブジェクトのクローン作成

オブジェクトの浅いコピー（直接含まれるプロパティのみコピーし、ネストされたオブジェクトは参照を共有）を作成する際に使用します。これは、オブジェクトの不変性を維持しつつ、新しいプロパティを安全に追加や変更する必要がある場合に役立ちます。

const original = { a: 1, b: 2 };
const clone = Object.assign({}, original);
clone.c = 3;
console.log(clone);       // { a: 1, b: 2, c: 3 }
console.log(original);    // { a: 1, b: 2 }  変更されません

終わりに

何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉