最新！JavaScript入門講座ーオブジェクトの基本をわかりやすく解説

JavaScriptにおいて配列と似ている性質を持つオブジェクトという機能が存在します。このオブジェクトは配列のように数字や文字列を複数格納することもできるほか、データの通信などといった幅広く使われています。

今後、オブジェクトはAPIやデータを通信するときに必要になる概念になります。なので、しっかりと理解する必要があります。今回は初心者の方向けにオブジェクトの基本について解説していきます。

オブジェクトの解説

オブジェクトとは何か？

最初に、オブジェクトの概念について解説していきます。
オブジェクトは配列のように、複数のデータを格納することができる機能になります。ただ、配列とは違い、関数も含めることができます。

配列は添字と要素で操作をしていましたが、オブジェクトはキーとバリューで操作します。
基本的なオブジェクトの書き方を見てみましょう。

これが基本的なオブジェクトの書き方になります。
左側にキー名、そしてコロンを挟んで値を入力します。配列で例えると、キー名が配列の添字にあたり、値が配列の要素にあたります。

そして、これら一つ一つをプロパティと呼びます。

オブジェクトを定義してみる

では、実際にオブジェクトを定義してみましょう。

let obj = {
    company:"合同会社 木の葉の里",
    kind:"合同会社",
    capital:100000000000,
}

console.log(obj);

$ node obj.js

{ company: '合同会社 木の葉の里', kind: '合同会社', capital: 100000000000 }

これが基本的なオブジェクトの宣言と初期化のやり方になります。文字列、数字ことなる型の値を格納できます。

let obj = {
    company:"合同会社 木の葉の里",
    kind:"合同会社",
    capital:100000000000,
    head:"火の国",
    getBenefit:function(){
        return (this.capital-50000000)*0.756;
    }
}

console.log(obj);

$ node obj.js

{
  company: '合同会社 木の葉の里',
  kind: '合同会社',
  capital: 100000000000,
  head: '火の国',
  getBenefit: [Function: getBenefit]
}

オブジェクトの中に、関数も含めることが可能です。関数を含めたオブジェクトを出力するとfunctionオブジェクトを含む出力になります。

プロパティで値にアクセスする

では、宣言初期化したオブジェクトの値一つ一つにアクセスしてみます。
オブジェクトの各要素にアクセスするには配列と違い、ピリオドを使います。

オブジェクトの値にアクセスするには、配列の長さを返す.lengthと同じようにプロパティを使います。この場合、プロパティはオブジェクトを宣言初期化したときに設定したキー名がプロパティになります。

では、実際のコードを見てみましょう。

let obj = {
    company:"合同会社 木の葉の里",
    kind:"合同会社",
    capital:100000000000,
    head:"火の国",
    getBenefit:function(){
        return (this.capital-50000000)*0.756;
    }
}

console.log(`会社名 : ${obj.company}`);
console.log(`本社所在 : ${obj.head}`);
console.log(`資本金: ${obj.capital}`);
console.log(`利益 : ${obj.getBenefit()}`);

$ node obj.js

会社名 : 合同会社 木の葉の里
本社所在 : 火の国
資本金: 100000000000
利益 : 75562200000

実行すると、初期化した値がしっかりと出力されているはずです。
オブジェクトの値にアクセスするには、他にも方法がありますがこれがもっともシンプルかつベストな方法です。

まとめ

では、まとめに入ります。
今回は下記のことを学びました。

今回はここまでとなります。お疲れ様でした。

参考文献

オブジェクト · JavaScript Primer #jsprimer

JavaScriptのObjectはオブジェクトの基礎となるものです。オブジェクトとプロパティの作成、更新、削除などの基本的な操作について紹介します。

jsprimer.net

オブジェクトでの作業 - JavaScript | MDN

JavaScript は、シンプルなオブジェクトベースの枠組みを持つ言語として設計されています。JavaScript におけるオブジェクトはプロパティの集まりであり、プロパティは名前 (あるいはキー) と値との関連付けから成り立っています。プロパティの値を関数にすることもでき、これはいわゆるオブジェクトのメソッドとなり...

developer.mozilla.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

www.freecodecamp.org