今回のゴール
前回は配列（Array）について学びました。
JavaScript 配列とは？push・pop・lengthの使い方を初心者向けに解説【第6講】
今回は オブジェクト（Object） を学びます。
オブジェクトを使うと、関連するデータをひとまとめに管理できます。
今日のゴールは次の2つです。
- オブジェクトの基本構文を理解する
- プロパティとメソッドを使えるようになる
オブジェクトとは？
オブジェクトとは、名前付きのデータをまとめて管理する仕組みです。
たとえば、人の情報を管理したい場合、
- 名前
- 年齢
- 住所
このような複数の情報があります。
これを1つにまとめられるのがオブジェクトです。
let user = {
name: "田中",
age: 25,
city: "東京"
};{ } の中に、データを キー : 値 の形で書きます。
プロパティとは？
オブジェクトの中にあるデータ1つ1つを プロパティ と呼びます。
先ほどの例では、
- name
- age
- city
がプロパティ名です。
値を取り出す方法
console.log(user.name);結果：
田中.（ドット）を使って取得できます。
別の書き方
console.log(user["age"]);結果：
25値を変更する方法
user.age = 30;
console.log(user.age);結果：
30新しいプロパティを追加する
user.job = "エンジニア";
console.log(user.job);結果：
エンジニアメソッドとは？
オブジェクトの値には、文字列や数値だけでなく関数を入れることもできます。
let user = {
name: "田中",
age: 25,
greet: function() {
console.log("こんにちは");
}
};このように、オブジェクトの中に入っている関数を メソッド と呼びます。
メソッドを実行する
user.greet();結果：
こんにちは() を付けると実行できます。
なぜメソッドが重要なのか？
今後学ぶ次のようなコードは、すべてメソッドです。
numbers.map()
numbers.filter()
document.querySelector()つまり JavaScript では、データと処理をまとめて持つことができます。
演習問題
次のオブジェクトを作ってみましょう。
- 商品名
- 価格
- 在庫数
let item = {
name: "りんご",
price: 120,
stock: 10
};さらに、商品名を表示するメソッドも追加してみましょう。
item.showName = function() {
console.log(this.name);
};まとめ
- オブジェクトは関連データをまとめる仕組み
- データ1つ1つをプロパティと呼ぶ
- 値の取得・変更・追加ができる
- 関数を入れるとメソッドになる
コメント