Zenn
🌱

JavaScript: オブジェクトとは

に公開
JavaScript
object
tech

気になった理由

前回、LeetCodeの問題を解いた時に、オブジェクトを作った方が簡単だったということに気づいた。
{}使うのがオブジェクトだろうくらいのなんとなくの理解しかなかった。ここでちゃんと理解しておこう。

前回の記事

LeetCode #Roman to Integerやってみた

私のコード

 // 1. 文字を数値に変換
    for (let i = 0; i < s.length; i++) {
        if (s[i] === 'I') {
            num_array.push(1);
        } else if (s[i] === 'V') {
            num_array.push(5);
        } else if (s[i] === 'X') {
            num_array.push(10);
        } else if (s[i] === 'L') {
            num_array.push(50);
        } else if (s[i] === 'C') {
            num_array.push(100);
        } else if (s[i] === 'D') {
            num_array.push(500);
        } else if (s[i] === 'M') {
            num_array.push(1000);
        }
    }

ChatGPTが提案したコード

const symbolToValue = {
        'I': 1,
        'V': 5,
        'X': 10,
        'L': 50,
        'C': 100,
        'D': 500,
        'M': 1000
    };

symbolToValue['I']; => 1

ローマ数字を整数に変換するパターンをオブジェクトで作成している。

参考にした書籍

JavaScriptのオブジェクトとは

何がオブジェクトになる?

配列、関数、クラス、正規表現、Date等、プリミティブ型ではないデータをオブジェクトとするそうです。JavaScriptでは、それらのオブジェクトは、Objectというビルトインオブジェクトを元にしています。ビルトインオブジェクトとは、ECMAScriptの仕様で定義され、実行環境にあらかじめ定義されているオブジェクトのこと言います。

ここから説明するオブジェクトは、そのビルトインオブジェクトのことだと思ってください。

どうやってオブジェクトは作られる？

オブジェクトはプロパティの集合です。プロパティとは名前 (キー)と値(バリュー)が対になったものです。

オブジェクトの基本形

const obj = {
    //キー：値
    "key": "value"
};

オブジェクトが持つキーのことを、プロパティ名と言います。ここでは、objというオブジェクトは、keyというプロパティ名とそれに対応する"value"というプロパティ値を持っていると言えます。

プロパティへのアクセス方法

2つのアクセス方法があります。

  • ブランケット記法
  • ドット記法
const obj = {
    key: "value"
};

// ブランケット記法
console.log(obj["key"]); // => "value"

// ドット記法
console.log(obj.key); // => "value"

ブランケット・ドット記法の使い分け

ドット記法では、プロパティ名が、変数名をつける時と同じ命名規則に従っている場合のみに使うことができます。

obj.key; //OK

//数字から始まる識別子はだめ
obj.123; //NG

//ハイフンを含んでいたらダメ
obj.my-prop; //NG

また、ドット記法ではプロパティ名に変数を使えません。

// ブランケット記法では変数をプロパティ名に利用できる。
const languages = {
    ja: "日本語",
    en: "英語"
};

const myLang = 'ja';
console.log(languages[myLang]; // => "日本語"

結論として、

基本的には簡潔なドット記法(.)を使い、ドット記法で書けない場合はブランケット記法([])を使うとよいでしょう。

分割代入

オブジェクトのプロパティを変数として定義し直すときには、分割代入(Destructuring assignment)が利用できます。

ドットやブランケット記法でいちいち書いていたらめんどくさいから。

const languages = {
    ja: "日本語",
    en: "英語"
};

const {ja, en} = languages;
console.log(ja); // "日本語"
console.log(en); // "英語"

オブジェクトは、mutable

オブジェクトは、一度作成した後もその値自体を変更できます。
しかし、いろんな場所で容易に変更しちゃうとよくわかんなくなるから、基本的には以下を意識するといいかも。

プロパティを初期化時以外に追加してしまうと、そのオブジェクトがどのようなプロパティを持っているのかがわかりにくくなります。そのため、できる限り作成後に新しいプロパティは追加しないほうがよいでしょう。

const で定義しても、オブジェクトは変更可能

javascriptのconstは、値を固定するものではなく、変数への再代入を防ぐためのもの。

const obj = {key: "value"};
obj.key = "Hi!"; //変更可能
console.log(obj.key); // => 'Hi!'

// objという変数への再代入はできない
obj = {}; // => TypeError

オブジェクトだとどうしていいの？

第1章しか読んでいないので、もっと深ぼる必要がありますが、ざっっくりまとめると、
「個々の機能の独立性を高めて、保守や再利用がしやすくなる」

今後また読み進めて、まとめてみたいと思います。

今回の私のコードの反省

  • 一度ローマ数字を整数に変換した後、その後の処理の中でその変換処理はもうできない。(→ 再利用できない)
  • 可読性が低い。コードが長い。(保守が難しい)
  • 入力を変換する処理のため、入力の値に依存している。(=>独立性がない)

Discussion