[JavaScript] 関数と変数の宣言と実行

# 概要
JavaScript で関数の宣言と実行を行う方法と、オブジェクト、引数についての学んだことをまとめる。


# 前提知識
[ローカルで JavaScript を実行するための環境構築](https://qiita.com/ub0t0/items/f8584f3be322c7fe18fa)

# 使用するソフト
Visual Studio Code : js のスクリプト記述のために利用
ターミナル : macOS High Sierra ver 10.13.6 に標準搭載されている実行環境
Google Chrome （Google Chrome 右クリック → [検証] で [Console] 画面を表示）

# 関数
プログラミングでは、処理をまとめて関数として名前をつけることで、呼び出しが可能になる。

以下の構成で記述する
![スクリーンショット 2020-08-01 13.33.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/5cdc9472-eb1e-02db-20a0-fee2a70cb5db.png)

関数（ここでは「helloConsole」と命名）を利用して「Hello World」の出力すると、以下のようになる。

```.js:.js
//関数の定義
function helloConsole(){
    console.log("Hello World");
}

//関数の実行
helloConsole();
```


関数の定義方法（ここでは、関数名を「hogehoe」とする)

```.js:.js
function hogehoge(){
    //処理内容の記述
}
```

※ 関数の命名規則として、数字・大文字で始めない


# アロー関数（矢`=>`を使った関数）
function を利用して関数を定義するよりも、シンプルな構文`() => {} `で、こちらが利用されることが多い
アロー関数を利用した「Hello World」の定義

```.js:.js
const showMessage  = () => {
    console.log("Hello World");
}
```

アロー関数の定義方法（ここでは、関数名を「hogehoe」とする)
プログラミングにおいて、`=` は、右を左に代入という意味

```.js:.js
const hogehoge  = () => {
    //処理内容の記述
}
```

# オブジェクトの定義
オブジェクトは、以下のように書く

```.js:.js
const user = {
     name: "太郎", // 文字列
     age: 21 // 数字
}
```
ここでは、「user」がオブジェクト名、「name」「age」をプロパティという

オブジェクトを定義すると、各プロパティを取得できます

```.js:.js
console.log(user.name);
console.log(user.age);
```

# 関数の引数としてオブジェクトを渡す
アロー関数の引数としてオブジェクトを渡すと、一つの変数で複数の値を渡すことができる


```.js:.js

//オブジェクトの定義
const user2 = {
    name: "二郎", 
    age: 22 
}

//取得するプロパティを定義
const logUser = (u) => {
    console.log(u.name)
    console.log(u.age)
}

//関数の実行
logUser(user2);
```

# 関数とオブジェクトの使用例
「野球少年ランク」を求めるための例文を記載する。


```.js:.js

//3人の野球少年のスペックをオブジェクトで定義
const baseballBoy1 = {
    name : "ichiro",
    power : 90,
    speed : 80,
    technique : 100
}

const baseballBoy2 = {
    name : "jiro",
    power : 30,
    speed : 50,
    technique : 80
}

const baseballBoy3 = {
    name : "saburo",
    power : 10,
    speed : 10,
    technique : 10
}

//野球少年のランクを求める関数を定義
//野球少年ランクは power と speed と technique の合計値
const baseballBoyRank = (boy) => {
    const total = boy.power + boy.speed + boy.technique
    let rank = "";

    //合計値に応じたランクの設定
    if (total>=250){
        rank = "A"
    }
    else if (total>=150){
        rank = "B";
    }
    else{ 
        rank = "C";
    } 
    return rank; 
}

//関数の実行
console.log(baseballBoyRank(baseballBoy1)); //出力結果：A
console.log(baseballBoyRank(baseballBoy2)); //出力結果：B
console.log(baseballBoyRank(baseballBoy3)); //出力結果：C

//getrank によって取得した値を再利用したい場合は、結果を変数に格納する記述方法がいい
const baseballboyRank1 = baseballBoyRank(baseballBoy1)
console.log(baseballboyRank1) //出力結果：A

const baseballboyRank2 = baseballBoyRank(baseballBoy2)
console.log(baseballboyRank2) //出力結果：B

const baseballboyRank3 = baseballBoyRank(baseballBoy3)
console.log(baseballboyRank3) //出力結果：C
```


### 変数の`let`と`const` の使い分け
#### let
変数に代入した値の更新が可能

```.js:.js
let name = "Ichiro";
console.log(name);
//出力結果：Ichiro

 
name = "Jiro"; // 値の更新時には let は不要
console.log(name);
//出力結果：Jiro 
```
#### const
一度定義した値を更新することができない

```.js:.js

let name = "Ichiro";
console.log(name);
//出力結果：Ichiro

name = "Jiro"; 
console.log(name);  //エラーが発生する
```
再代入する場合は let, それ以外の場合は const を利用する



# 参考ページ
[アロー関数の基本](https://ja.javascript.info/arrow-functions-basics)