【初心者向け】JavaScriptにおけるオブジェクトとは？

こんにちは！Kです！

今回は、JavaScriptでのオブジェクトについて初心者の方に向けて簡単に説明したいと思います。

JavaScriptを学習するにあたって知っておいた方がいい知識なので、難しくないので覚えておくといいと思います(^^)

オブジェクト（Object）とは？

JavaScriptでのオブジェクトは簡単にいうと、名前とその値を入れることができる箱のようなものです。

言語は違いますが、ハッシュテーブルや連想配列といったところでしょうか。

言葉だけだとよく分からないかと思いますので、実際のコード例をみてみましょう。

const obj = {
  name: '黒子太郎',
  age: 28,
  email: 'sample@gmail.com' 
}

このコードからパッとみて分かることは、
・名前(name)は「黒子太郎」さん
・年齢(age)は28歳
・メールアドレス(email)は「sample@gmail.com」

ということがコードを見ただけで分かります。

最初にも説明しましたが、こんな感じでオブジェクトは「名前：値」でデータを格納することができるものです。

ちなみに「名前：値」のことをプロパティと言います。
※ 「名前：関数」のパターンもあります。これはメソッドと言います。

先ほどの例ですが、解説すると以下のような感じで定義されています。

//objは、「変数」
const obj = {
  name: '黒子太郎',　　　　　　　　 //プロパティ
  age: 28,　　　　　　　　　　　　　//プロパティ
  email: 'sample@gmail.com'　　 //プロパティ 
}

{・・・}の部分が3つのプロパティを持った「オブジェクト」

オブジェクトをざっくり説明するとこんな感じです。

オブジェクトの作成

JavaScriptでは一般的にオブジェクトは、{ }を利用することで作成できます。

const obj = {};

これだけです。簡単ですね！笑

上記の例はデータが入っていない空のオブジェクトを作成しています。

これは「オブジェクトの初期化処理」と言われます。

これとは別に、newを使ったオブジェクトの生成方法もあります。
newを使った生成方法についてはまた別の記事にまとめます！

プロパティの呼び出し方

これも特に難しくはありません。

特定のプロパティを呼び出す場合は、ドット演算子「.」を使えば呼び出せます。
先ほどの例で見てみましょう！

const obj = {
  name: '黒子太郎',
  age: 28,
  email: 'sample@gmail.com' 
}

console.log('名前：' + obj.name);
console.log('年齢：' + obj['age']);

■実行結果

名前：黒子太郎
年齢：２８

「obj.name」と書くことで、「obj」というオブジェクトのnameプロパティの値を取得しています。

また、「obj['age']」と書くことでもプロパティの値を取得できます。

後者の呼び出し方は、プロパティ名が日本語のときなどに使いますが、基本的にはドット演算子を使うと覚えておけば大丈夫です。

最後に

今回はJavaScriptにおけるオブジェクトの基本について説明しました。

最初は横文字が多くて少し混乱するかもしれませんが、コードを書いていくうちに自然と覚えられると思うので、ざっくりこんなものなんだぐらいに覚えておけば特に問題ないと思います。

オブジェクトの操作については他にも色々あるのですが、それはまた別の記事で紹介していければと思います！

それでは、また！

Follow me!