Help us understand the problem. What is going on with this article?

非Javascriptエンジニアのための「Javascriptのオブジェクト」

前回 - 非Javascriptエンジニアのための「Javascriptの制御構文(後編)」

ITエンジニアのアクマちゃん(@akumachanit)デモ!
この記事は非JavascriptエンジニアのためのJavascript入門 3日遅れのひとり Advent Calendar 2019の記事デモ!

この記事はJavaScript 「再」入門をベースに書いているデモ。

ここまで記事を半月書いてきて気づいたデモ...
Advent Calendarの間に絶対最後まで終わらないデモ!!!

オブジェクト

Javascriptのオブジェクトは

  • Python の辞書型
  • Perl や Ruby のハッシュ
  • C や C++ のハッシュテーブル
  • Java の HashMap クラス
  • PHP の連想配列

に似ているデモ。

オブジェクトは名前(キー)と値(バリュー)のペアの集合体デモ。
名前はJavascriptの文字列デモが、値はどんな値でも入るデモ。値にさらにオブジェクトを入れることもできるデモ。

空のオブジェクトを生成する方法は以下の2つデモ。

let obj1 = new Object();
let obj2 = {}; // オブジェクトリテラル構文

この2つは全く同じ意味を持つデモ。2つ目の書き方はオブジェクトリテラル構文と呼ばれているデモ。
オブジェクトリテラル構文を使うのが一般的みたいデモ。

オブジェクトリテラル構文でオブジェクトの初期化まで行うことができるデモ。

let animal = {
  name: 'Taro',
  age: 3,
  detail: {
    color: 'white',
    weight: 4
  }
}

プロトタイプ

オブジェクトのプロトタイプ(雛形)を作成して、そのプロトタイプからインスタンスを生成することもできるデモ。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.detail = {
    weight: 60,
    height: 180
  }
}

let you = new Person('Jiro', 24); 

プロパティへのアクセス

生成したインスタンスのプロパティには2通りの方法でアクセスできるデモ。

// ドットノーテーション
you.name = 'Saburo';
let name = you.name;

// ブランケットノーテーション
you['name'] = 'Saburo';
let name = you.name;

連鎖的にアクセスすることで属性内のオブジェクトの属性を取得できるデモ。

you.detail.weight;
you['detail']['weight'];

ブランケットノーテーションのプロパティ名の指定には変数も使えるデモ。
js
const key = 'age';
const yourAge = you[age];

この方法を使用すれば動的にアクセスするプロパティを変更することができるデモ。
さらにブランケットノーテーションを使えば、予約語と同じ名前のプロパティにアクセスできるデモ。

let obj = {
  for: 'reserved' // 定義してもエラーにならない
}

obj.for // エラー
obj['for'] // アクセスできる

あとがき

再入門に書いてあるのはざっとこんな感じデモ。
オブジェクトについてはプロトタイプをさらに掘り下げていきたいと思うので、それはまた明日デモ!

参考

JavaScript 「再」入門

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした