# オブジェクト型以下に記述するものがオブジェクト型になります。 ## オブジェクト(object) **オブジェクト**は**プロパティ**の集合体になります。例えば、一つの商品があるとします。商品は名前と値段等の**プロパティ**を持っています。それを踏まえると以下のように定義できます。 ```javascript let productName = "りんご"; let productPrice = 200; ``` 上記のように定義した場合、商品とプロパティの数が多くなった場合、管理が大変になるかと思います。そう言った場合に、**オブジェクト**として定義すると管理が楽になります。

...
console.log(typeof fruit);

let product = {
    name: "りんご",
    price: 200,
};
console.log(product);

オブジェクトとして定義した際に、`name`や`price`などのプロパティ名を**key(キー)**とも言います。ブラウザにて以下のように確認できるかと思います。

特定のプロパティの値を変更、取得するには2つの方法があります。 1つ目は、`.`で繋げる方法です。

...
console.log(product);
product.name = 'みかん';
console.log(product.name);

2つ目は、`[]`でkeyを指定する方法です。

...
console.log(product.name);
product['price'] = 300;
console.log(product['price']);

基本的には、1つ目の方法で記載するのが良いかと思います。しかし、keyを変数として動的に変更したい場合は、2つ目の方法を使うのが良いかと思います。オブジェクトに関しては、後のセクションにて詳細に説明します。 ## 配列(Array) 複数の値を格納したい場合は、**配列**として定義します。配列として定義する場合は、`[]`の中に値を記載します。

...
console.log(product['price']);

let fruits = ['りんご', 'みかん'];
console.log(fruits);

以下のようにブラウザで確認できるかと思います。

配列として定義したそれぞれの値は**要素**とよび、それぞれの**要素**には**インデックス**が割り振られます。 **インデックス**は要素の位置を指し示すもので、先頭から0,1,2,3..と割り振られます。上記の場合だと、`りんご`に0、`みかんに`1とインデックスが割り振られます。このインデックスを利用することで、要素の変更、取得が可能です。インデックスを利用して要素を変更、取得するには、`[]`にてインデックスを指定します。

...
console.log(fruits);
fruits[0] = 'バナナ';
console.log(fruits[0]);

配列に要素を追加する場合は、最後のインデックスの次のインデックス(上記の場合は2)を指定することで、追加することができます。

...
console.log(fruits[0]);
fruits[2] = 'パイナップル';
console.log(fruits);

配列の要素数を知りたい場合は、`.length`と繋げることで取得することができます。

...
console.log(fruits);
console.log(fruits.length);

配列に関しても、後のセクションにて詳細に説明します。 ## 関数(Function) 同じ処理を複数回使う場合や、処理をグルーピングしてまとめたい場合は、**関数**を定義します。関数は以下のように`() => {}`を使って定義します。呼び出す場合は、定義した関数名に`()`をつけます。

...
console.log(fruits.length);

const outputProductInfo = () => {
    console.log('こんにちは');
    console.log('みかんの値段は100円です');
};
outputProductInfo();

ブラウザにて以下のように確認できるかと思います。

こちらの関数にて出力される`みかん`と、`100`の部分を変えたいとします。その場合は**引数**を受け取るようにします。引数を受け取るには、`()`の中に受け取った際に格納する変数名を記述し、その変数名を関数内で呼び出すことができます。また、`(バッククォート)`を使用し、` `` `内で、`${変数名}`とすることで、変数を文字列に埋め込むことができます。こちらの構文を**テンプレートリテラル**と言います。

...
console.log(fruits.length);

const outputProductInfo = (productName, productPrice) => {
    console.log('こんにちは');
    console.log(`${productName}の値段は${productPrice}です`);
};

呼び出しの際には、`()`の中に渡したい値を引数の数だけ記述します。

...
const outputProductInfo = (productName, productPrice) => {
    console.log('こんにちは');
    console.log(`${productName}の値段は${productPrice}です`);
};
outputProductInfo('みかん', 100);
outputProductInfo('りんご', 150);
outputProductInfo('パイナップル', 200);

ブラウザにて以下のように確認できるかと思います。

上記の関数は、処理を行うだけの関数ですが、値を返却することができ、その場合は、`return`を記述します。

...
outputProductInfo('パイナップル', 200);

const add = (a, b) => {
    return a + b;
};
console.log(add(1, 2));

※関数の書き方に関して、`function`を使った書き方があり、機能的に若干の違いがあります。下記の記事にも記載されているのですが、特に理由がない場合は、上記のような**アロー関数**で定義するのが良いかと思います。 {% embed url="" %}