【JavaScript】プログラミング初心者が知っておくべきオブジェクトのこと【9選】

この記事では、JavaScriptのオブジェクトについて、プログラミング初学者が抑えておくべきことを厳選して9つにまとめました。

この記事を読むことで、JavaScriptオブジェクトの基礎を身に付けることができます。

プログラミング学習を始めた当初、私自身オブジェクトを理解することにとても苦労しました。

プログラミング学習を始めた当時のことを思い出し、オブジェクトについて理解しておいてよかった点を厳選して記事にしました。

難しい言葉は使わずに、できるだけ分かりやすい言葉で解説しています。

オブジェクトとは何か？

初めにオブジェクトは何かについて紹介します。

オブジェクトはキーとバリューがセットになった集合体のことです。

const person = {
 name:'anna',
 age:25,
 greeting:function(){}
};

上のコードではpersonというオブジェクトを定義しています。

オブジェクトは変数もしくは定数を定義し、{}で囲みます。

上のコードのnameをキーといい、annaをバリューといいます。

そして、キーとバリューの組み合わせをプロパティと呼びます。

バリューには文字列や数字はもちろん、関数を入れることもできます。

const person = {
 greeting:function(){
  console.log("hello");
};

関数を入れた場合、バリューではなく、メソッドと呼びます。

（メソッドの場合、キーとメソッドを合わせてメソッドと呼ばれることが多いです。）

バリューには、文字列や数字以外にも、配列やオブジェクトも入れることができます。

プロパティの値を取得する2つの方法

次に、オブジェクトで定義したプロパティの値を取得する2つの方法をご紹介します。

console.log(person.name);
console.log(person['name'];

１行目の記述方法をドット記法といい、2行目をブラケット記法といいます。

メソッドの場合は、以下の方法でアクセスすることができます。

person.greeting();
person['greeting']();

ここで抑えておくべき点は、ブラケット記法の場合、文字列として指定する必要があるということです。

理由は、JavaScriptの仕様上、キーがすべて文字列で管理されているためです。

（ドット記法の場合、裏で暗黙的に型変換がされています。）

ブラケット記法の場合、文字列指定をしないと変数であると判断されてしまうため、直接文字列で指定する必要があります。

キーの命名規則について

3つ目にキーの命名規則について紹介します。

キーの命名規則は、変数とは違い予約語が使用できます。

予約語とはconstやlet、varなどJavaScriptを使用するうえで、既に役割が与えられている言葉のことです。

また、予約語だけではなく様々な型で定義することができます。

具体的には、文字列・数値で指定したり、式を入れたり、変数名を使ったりすることができます。

const hoge = 'hoge';

const person = {
  const : 'abcde',
 'name':'kapio',
  5:5,
 [hoge]:['hoge','hoge2'],
};

変数で記載する場合は、[]で変数名を囲む必要があります。

このようにキーは様々な値で定義することができます。

（基本的に予約語などの言葉は、紛らわしい記載になるため使用しません。）

プロパティの追加と削除方法

4つ目にプロパティの追加と削除方法について紹介します。

プロパティの追加方法

person.name='toshi';
person['gender']='man';

１行目がドット記法で、2行目がブラケット記法の追加方法になります。

・オブジェクトに既に存在しているプロパティを上書きする。

・オブジェクトに新しくプロパティを定義する。

どちらも上記の記述で対応できます。

プロパティの削除方法

delete person.name;
delete person['gender'];

削除するときはdelete演算子を使用します。

削除も同様に、ドット記法とブラケット記法どちらでも書くこともできます。

 キーとバリューの取得方法

5つ目にキーとバリューの取得方法について紹介します。

キーとバリューを取得する方法には「for inループ」と「for ofループ」があります。

基本的には「for ofループ」を使用します。

for inループ

for inループはオブジェクトのキー情報を順番に、配列として取得します。

const person = {
 name:'anna',
  age:25,
  15:15,
  greeting: function(){
   return 'hello'
  },
};

for (const key in person){
  console.log(key);
 }

for（const 定数名 in オブジェクト名){}のように記述します。

ちなみにconstではなくletで定義しても問題はありません。

しかし、基本的に値が書き換えられることはないので、constで定義することが一般的です。

personオブジェクトのキー情報が1つずつkeyに渡ってきます。

注意すべき点としては、配列として渡ってくるキー情報は、数字が優先され、後は定義した順番で表示されます。

上のコードの場合、最初に15が渡ってくることになります。

for ofループ

for ofループは、基本的に配列にしか使用できません。

しかし、object.keysを使ってfor ofループでキー情報を取得することができます。

const person = {
 name:'anna',
   age:25,
   15:15,
   greeting: function(){
   return 'hello'
   },
 };
 
 for (const key of Object.keys(person)){
  console.log(key);
 }

keyにpersonのキー情報が順番に渡ってきます。

【補足】
・for ofループで取得する方が望ましい理由とは？

　➡理由は、プロトタイプが関係してきます。

　for inループの場合、プロトタイプも含まれてループされるため、使用しない方が好ましいとされています。

　（踏み込んで理解しなくても、問題ありません。）

プロパティの省略記法

6つ目にプロパティの省略記法について紹介します。

以下に、objというオブジェクトがあります。

const name = 'anna';
const age =25;

const obj = {
 name: name,
 age : age,
};

objのnameプロパティは、変数nameをnameというキーに紐づけています。

ageプロパティも同様に、変数ageをageというキーに紐づけています。

このようなコードは、省略記法を用いることができます。

const name = 'anna';
const age =25;

const obj = {
 name,
 age,
};

メソッドの省略記法

7つ目にメソッドの省略記法について紹介します。

プロパティと同様にメソッドも省略記法が可能です。

const obj2 = {
 greeting : function(){
console.log('hello');
},
};

obj2オブジェクトにgreetingメソッドがあります。

const obj2 = {
 greeting (){
console.log('hello');
},
};

メソッドは、コロンとfunctionを省略することが可能です。

スプレッド構文の使い方

8つ目にスプレッド構文の使い化について紹介します。

スプレッド構文は、存在しているオブジェクトを違うオブジェクトとして複製するときに使用します。

const name = 'anna';
const age =25;

const profile = {
 name,
 age,
};

const user = {
...profile,
};
//新しく作ったuserオブジェクトにprofileオブジェクトをコピーしています。
console.log(user);

新しく作ったオブジェクトの中で「...オブジェクト名」と記述します。

新しく複製したオブジェクトに独自のプロパティを持たせることも可能です。

const name = 'anna';
const age =25;

const profile = {
 name,
 age,
};

const user = {
...profile,

hobby:baseball,

greeting(){
 console.log('hello ${name}さん')
},
};
//profileオブジェクトとの複製とは別にhoppyプロパティとgreetingメソッドを定義しています。
console.log(user);

profileオブジェクトに定義されていたnameプロパティを新しく複製したuserオブジェクトの中で値を上書きすることもできます。

オブジェクトのプロパティとメソッドは、後から定義されたものが優先されます。

【補足】
「const 新しいオブジェクト名 =　コピーしたいオブジェクト」とすることで新しいオブジェクトを生成することはできません。

const name = 'anna';
const age =25;

const profile = {
 name,
 age,
};

const user = profile ;

//profileオブジェクトをuserに直接代入しています。

上のコードの場合、新しいオブジェクトは生成されません。

JavaScriptのオブジェクトには参照という概念があります。

上のコードで記述すると、新しいオブジェクトは生成されず、profileオブジェクトの参照先がコピーされます。

つまり、profileオブジェクトの中身を変更すると、userオブジェクトも同様に変更がされます。

分割代入の使い方

最後に分割代入の使い方について紹介します。

分割代入は、あるオブジェクトの一部を他の変数に代入するときに使用します。

const profile = {
 name : 'anna',
 age : 25,
};

//1行目と2行目は同じことをしています。
//2行目が分割代入の記述です。

const name = profile.name;

const { name } = profile;

予約語（const）の後に{}を定義してその中にプロパティ名を記述します。

上記のコードで、変数nameにprofileのnameプロパティを代入することができます。

別名の変数をつける

別名の変数をつけるときは、セミコロンの後に名前を定義します。

const profile = {
 name : 'kapio',
 age : 25,
};

const { name: userName } = profile;

//const userName =profile.nameと同じ意味になります。

ネストされているオブジェクトを代入する

const profile = {
 name : 'kapio',
 age : 25,

 hobby :{
sports : 'baseball',
sutdy : 'english',
},

};

const { hoby : { sports } } = profile;
//const sports = profile.hobby.sportsと同じ意味になります。

{}の中にネストされているオブジェクト名を記載し、さらにコロンの後に代入するキー名を{}の中に記述します。

分割代入については、こちらの記事で詳細をまとめています。

気になる方はぜひチェックしてみてください。

まとめ

今回はJavaScriptのオブジェクトについて、プログラミング初学者が抑えておくべきことを9つ厳選して紹介しました。

この記事で紹介したことは、今後よく使用することとなります。

きちんと抑えておきましょう。

また当ブログでは、JavaScriptを学び始めたばかりの方や、スキルを磨きたい方に向けて、こちらのUdemy講座をおすすめしています。

Udemyでは、JavaScriptの基本から応用まで学ぶことができる講座が豊富に揃っています。

その中でもこちらの講座は非常に分かりやすく、おすすめしています。

よかったらぜひチェックしてみてください。

最後まで読んでいただきありがとうございました。