久々の基礎のシリーズです。前回のメソッドとは? functionを使いこなそう！の続きです。
JavascriptのObjects(オブジェクト)について書いていきます。
初心者の方がオブジェクトを使って作成、項目の表示、項目追加、値の変更、項目削除ができるようになることを目標として書いていきます。
※ 項目は仮の言葉です。
オブジェクト(Objects)とは
オブジェクトとは１つの物に対しての集合体です。
例えば、人というオブジェクトがあればその中身には名前、出身地、血液型などという項目があったとして、
それはＡさんもＢさんもそれぞれ異なるものが入ることが想定されます。
そして例えば、名前を表示するというメソッドdisplayname()があった場合、ＡさんもＢさんも共通のメソッドを利用して名前を表示してほしい。そんな時にオブジェクトが活用されます。
オブジェクトの作成
オブジェクトを初期化するには以下の方法があります。
// オブジェクトの初期化
let person = {};
{}波かっこでオブジェクトを表します。[]の配列と混同しないように気を付けましょう。
// key（パラメータとも言う）とパラメータの値を追加
let personA = { name : “Nakamoto”, country : “Japan”, type : “O” };
{}の中身の値は 「項目名:値」で書くことができます。複数ある場合あカンマ区切りで羅列します。
let personA = {
name:”Nakamoto”,
country:”Japan”,
type:”O”
};
横に長すぎる場合は開業することも可能です。カンマ後に改行することが一般的です。
文字(String)しか書いていませんが、配列、オブジェクト、boolean、数値などオブジェクト内に収めることが可能です。
項目の表示
作成したオブジェクトの中身を呼び出してみます。
let personA = { name : “Nakamoto”, country : “Japan”, type : “O” };
// personAを表示
console.log(personA); // { name : “Nakamoto”, country : “Japan”, type : “O” }
// personAのnameを表示
console.log(personA.name); // Nakamoto
console.log(personA[“name”]); // Nakamoto
項目の表示は以下の２つの方法があります。
① 変数.項目名
② 変数[“項目名”]
①の表示のほうがよく見かける印象です。
項目の追加
足りない項目があったとして新しいパラメータと値を追加してみましょう。
項目は以下のようにして追加できます。
変数.項目名
実際に書くと以下のようになります。
let personA = { name : “Nakamoto”, country : “Japan”, type : “O” };
// パラメータ job をpersonAに追加
personA.job = “programmer”;
// personAのjobを表示
console.log(personA.job); // programmer
// personAを表示
console.log(personA); // {name: “Nakamoto”, country: “Japan”, type: “O”, job: “programmer”}
追加した項目は後ろに追加されています。
項目の値の変更
項目の値は変更可能です。
let personA = { name : “Nakamoto”, country : “Japan”, type : “O” };
// nameを変更
personA.name = “Tanaka”;
console.log(personA.name); // Tanaka
ちなみに項目名の変更は下記記事で紹介しています。
項目の削除
項目の削除にはdeleteメソッドを使用します。書き方は以下のようになります。
① delete 変数.項目名
② delete 変数[‘項目名’]
実際に書いてみると以下のようになります。
let personA = { name : “Nakamoto”, country : “Japan”, type : “O” };
delete personA.country;
// personAを表示
console.log(personA); // {name: “Nakamoto”, type: “O”}
おまけ オブジェクトにメソッド
オブジェクト内にメソッドを書くこともできます。
let personA = {
name : “Nakamoto”,
country : “Japan”,
type : “O”,
func : function() {
return this.name + “です。血液型は ” + this.type + “型です。”;
}
};
// メソッドは「変数.項目名()」で呼出せます。
console.log(personA.func()); // Nakamotoです。血液型は O型です。
オブジェクト内の this はこのオブジェクトのという意味で使われています。
おわり
オブジェクトはプログラミングの幅が広がる基本なので、今難しく感じても割と目にするので次第に慣れていくかと思います。複雑化したオブジェクトを見て大混乱したこともありますが、今ではなんとか扱えています。
参考
https://www.w3schools.com/js/js_objects.asp
