---

---

【JavaScript】Object.assign()を使ったオブジェクトコピーに注意

投稿日：2021年5月22日

オブジェクトのコピーとしてObject.assign()はよく知られた方法であると思います。しかし、javascriptの細かい使用を理解していないと思わぬ落とし穴にはまってしまいます。この記事ではObject.assign()について動作を詳しく解説しています。

---

はじめに

この記事について

---

Object.assin()を使ったオブジェクトコピー

基本

const sampleObject = { username: "marsquai", age: 10 };
const sampleObjectClone = Object.assign({}, sampleObject); //コピー

// 値は同じ
console.log(sampleObject);
console.log(sampleObjectClone);

{ username: 'marsquai', age: 10 }
{ username: 'marsquai', age: 10 }

// 参照は違う
console.log(sampleObject == sampleObjectClone);

// 値を変えてもクローンしたオブジェクトの値は変わらない
sampleObject.age = 100;
console.log(sampleObjectClone);

false
{ username: 'marsquai', age: 10 }

プロパティにオブジェクトを持つ場合

const sampleObject = {
  username: "marsquai",
  age: 10,
  job: { type: "engineer", years: 4 },
};
const sampleObjectClone = Object.assign({}, sampleObject);

// オリジナルだけ値を変えてみる
sampleObject.job.years = 5;
sampleObjectClone.age = 11;
sampleObject.username = "marsquaiSuper";

console.log(sampleObject);
console.log(sampleObjectClone);

{ username: 'marsquaiSuper',
  age: 10,
  job: { type: 'engineer', years: 5 } }
{ username: 'marsquai',
  age: 11,
  job: { type: 'engineer', years: 5 } }

getter/setter

const sampleObject = {
  _username: "【marsquai】",
  age: 10,
  set username(_username) {
    this._username = `【${_username}】`;
  },
  get username() {
    return this._username;
  },
  get nextAge() {
    return this.age + 1;
  },
};

const sampleObjectClone = Object.assign({}, sampleObject);
console.log(sampleObject);
console.log(sampleObjectClone);

{ _username: '【marsquai】',
  age: 10,
  username: [Getter/Setter],
  nextAge: [Getter] }

{ _username: '【marsquai】',
  age: 10,
  username: '【marsquai】',
  nextAge: 11 }

// それぞれに同じageを与える
sampleObject.age = 20;
sampleObjectClone.age = 20;
console.log(sampleObject.nextAge);
console.log(sampleObjectClone.nextAge);

21
11

// それぞれに同じusernameを与える
sampleObject.username = "ogihara";
sampleObjectClone.username = "ogihara";

console.log(sampleObject);
console.log(sampleObjectClone);

{ _username: '【ogihara】',
  age: 10,
  username: [Getter/Setter],
  nextAge: [Getter] }

{ _username: '【marsquai】',
  age: 10,
  username: 'ogihara',
  nextAge: 11 }

関数を持つオブジェクト

const sampleObject = {
  username: "marsquai",
  age: 10,
  greeting() {
    console.log("Hello");
  },
};

const sampleObjectClone = Object.assign({}, sampleObject);

// 中身を確認
console.log(sampleObject);
console.log(sampleObjectClone);

{ username: 'marsquai', age: 10, greeting: [Function: greeting] }
{ username: 'marsquai', age: 10, greeting: [Function: greeting] }

// どちらも同じ関数をさしている
console.log(sampleObjectClone.greeting === sampleObject.greeting);

true

クラスインスタンスのコピー

class User {
  constructor(username, age) {
    this.username = username;
    this.age = age;
  }
  selfIntroduce() {
    console.log(`Hi!! I'm ${this.username}, ${this.age} years old.`);
  }
}

const sampleUser = new User("marsquai", 10);
sampleUser.selfIntroduce();

const sampleUserClone = Object.assign({}, sampleUser);
console.log(sampleUser);
console.log(sampleUserClone);

User { username: 'marsquai', age: 10 }
{ username: 'marsquai', age: 10 }

sampleUserClone.selfIntroduce();

sampleUserClone.selfIntroduce();
                ^

TypeError: sampleUserClone.selfIntroduce is not a function
    at Object.<anonymous> (/home/ogihara/Projects/getts/cpObject/index.js:94:17)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

---

---

---