JavaScriptのObject.assignメソッドの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのObject.assignメソッドの使い方について現役エンジニアが解説しています。Object.assignメソッドは、元のオブジェクトをコピーして、対象のオブジェクトに上書きします。基本から値が重複、値が無い場合、オブジェクト参照での使い方まで解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのObject.assignメソッドの使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのObject.assignメソッドの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

Object.assignメソッドとは

Object.assign()メソッドは、簡単に言うと元のオブジェクトをコピーして、対象のオブジェクトに上書きを行うことができるメソッドになります。

注意点としては、列挙可能なプロパティが1つ以上あるものでないとコピーできないという点になります。

 

Object.assignメソッドの使い方

Object.assign()メソッドの構文は以下のようになります。

Object.assign(target, ...sources)

 

  • target:ターゲットオブジェクト。ソースオブジェクトの上書き先
  • sources:ソースオブジェクト。上書きしたいプロパティが1つ以上あるオブジェクト

戻り値もターゲットオブジェクトになります。

 

var return = Object.assign(target, ...sources);

console.log(return); // target
console.log(target); // target

となります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

コピーの作成(基本)

var source = { a: 1 };
var target = Object.assign({}, obj);
console.log(target); // { a: 1 };

 

値が重複した場合、ターゲットに値が存在しない場合

var source = {a:1, b:2};
var target = {b:3, c:4};
Object.assign(source, target);
console.log(target); // {a:1, b:3, c:4}
// 第一引数にない項目が新規で追加されます
// 同一キーの項目はソースオブジェクトの値で上書きされます

 

オブジェクト参照をコピーする

var source = {a:1, b:2};
var target = {b:3, c:4, d:{a:5, b:6}};

Object.assign(source, target);
console.log(source); // {a:1, b:3, c:4, d:{a:5, b:6}}

source.d.a = 10; // obj1.d.aの値を更新
console.log(source);

// {a:1, b:3, c:4, d:{a:10, b:6}}dはオブジェクト参照をコピーしています
console.log(target);

// {b:3, c:4, d:{a:10, b:6}} ojb1.dがオブジェクト参照のため参照元の値が変わっています

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。