オブジェクトと配列

2023年10月9日

プログラミング初心者がJavaScriptを勉強し始めて思ったことが、メソッドやらアーギュメント（引数）やらオブジェクトやら、用語が次々と出てきて混乱してしまうということです。

あと、たとえばパラメータは、英語のparameterがそのままカタカナで使われているのに対し、アーギュメントの方は、引数と訳されて説明されているものが多く、英語と日本語でも混乱してしまうと思いました。

オブジェクトと配列についても、最近まで別物だと勘違いしていましたが、配列もオブジェクトの一種であることがわかりました。どちらも、情報をまとめる役割を担っています。

今日は、オブジェクトと配列についてまとめてみようと思います。

オブジェクトとは

まず、どんな時にオブジェクトを使うかというと、何かについての情報を一つにまとめたいときに使います。たとえば、John Smithさんについての情報が次のようにあったとします。

const fisrtName = 'John';
const lastNmae = 'Smith';
const age = 30;
const greet = function() {
  return `Hi! I'm John. How are you?`;
}

全てJohnさんに関しての情報なので、一つずつconst〜と書いて定義していくのは面倒ですよね？という時に、オブジェクトにまとめましょうとなるそうです。

上の情報をまとめると

const person = {
  firstName: 'John', //プロパティ　名前（キー）と値（バリュー）のペア
  lastName: 'Smith',
  age: 30,
  greet: function () {
    return `Hi! I'm John. How are you?`;
  }, //greetのところはメソッド
};

こんな風にスッキリとまとまります。

そして、オブジェクトが持っている関数（この場合でしたら、greetのところ）のことをメソッドと呼びます。

プロパティやメソッドにアクセスするには？

それでは、キレイにまとまったJohnさんの情報へアクセスするにはどうしたら良いのでしょうか？

「Johnさんの姓って何だっけ？」「Johnさんって何歳だっけ？」というような場合です。

その場合、ドットを使用してプロパティへアクセスすることができます。

console.log(person.firstName); // "John"
console.log(person.age); // 30

また、Johnさんの挨拶（greet部分）へアクセスするには、同じようにドットを使用して関数greet()を繋げます。

console.log(person.greet()); // "Hi! I'm John. How are you?"

配列について

配列（Arrays）もオブジェクトの一種で、こちらも情報整理のために使用されます。

配列は、アクセスするときにインデックス（０からの順番）で呼び出すため、順番が大事なものについては配列を使っている印象があります。

こちらも例えば、あるグループがあった場合に

const name1 = 'Sarah';
const name2 = 'John';
const name3 = 'Snow';
const name4 = 'You';

メンバーを一人ずつ定義するのは面倒なので、配列を使用してまとめてしまいます。

const friends = ['Sarah', 'John', 'Snow', 'You'];

スッキリしましたね！

配列の要素へアクセスするには？

配列の要素へアクセスするには、インデックス番号番号がふってあるので、それを利用します。

例えば、Sarahさんをコンソールへ表示させたい場合は、friends[0]と書きます。

const friends = ['Sarah', 'John', 'Snow', 'You'];
console.log(friends[0]);

そして、面白いなと思ったのが（というか、配列についての誤解が解けた）typeof~でfirendsのデータ型を調べてみると、Objectと出てきました。そうか！配列もObjectだったのかとわかりました。

const friends = ['Sarah', 'John', 'Snow', 'You'];
console.log(typeof friends); //Object
friends.push('Erica'); //配列の末尾に'Erica'を追加
console.log(friends);