はじめに

この記事はJavascriptが苦手な私ために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

目次

関数 (function) とは
関数 (function) の書き方
関数(function) の例
関数式とは
関数式の例
アロー関数

1. 関数 (function) とは

**複数の処理をまとめたもの。**プログラムを何度も使い回しができるかたちにしたものです。
コード量が少なくなって、見通しが良くなる！！

2. 関数 (function) の書き方

関数の一番シンプルな基本のかたちです。

function 関数名( 引数 ) {
  処理する内容
}

関数名(引数);//関数を呼び出す

関数名は変数名を付けるときとルールは大体同じ。
最初に動詞を持ってくることが多い。
例）・add○○
　　・is○○

・引数とは
関数に与える情報で、関数を呼び出すときに一緒に値を渡すことで、関数の中でその値を使うことができる。

3. 関数(function) の例

変数だけのプログラムで書くと、、、

1

const price = 6000; 
if(price > 5000) {
  console.log("高い");
} else if(price > 3000) {
  console.log("普通");
} else {
  console.log("安い");
}

結果1

>> 高い

2

const price = 4000; 
if(price > 5000) {
  console.log("高い");
} else if(price > 3000) {
  console.log("普通");
} else {
  console.log("安い");
}

結果2

>> 普通

3

const price = 1000; 
if(price > 5000) {
  console.log("高い");
} else if(price > 3000) {
  console.log("普通");
} else {
  console.log("安い");
}

結果3

>> 安い

constの値を変えるたびに
同じプログラムをたくさん書かなければならない。

だけど関数を使うと、、、(関数宣言)

function judge(price) {
    if(price > 5000) {
        console.log("高い");
      } else if(price > 3000) {
        console.log("普通");
      } else {
        console.log("安い");
      }
  }

呼び出す

judge(6000);
>> 高い

judge(4000);
>> 普通

judge(1000);
>> 安い

これだけでいい！！すっきりー

4. 関数式とは

さっきの関数は関数宣言と言い、巻き上げに注意しなきゃいけないよー！！
で、関数式は、関数に定数や変数に代入することができる
関数式は、**「無名関数」**とすることができ、関数名をつけなくてもいい！！

関数式で書く場合は、、、

const 定数 = function(引数) {
    処理する内容
}

定数(引数);//関数式を呼び出す

関数名を省略できる！！（無名関数）

5. 関数式の例

const judge = function(price) {
    if(price > 5000) {
        console.log("高い");
      } else if(price > 3000) {
        console.log("普通");
      } else {
        console.log("安い");
      }
  }

呼び出す

judge(6000);
>> 高い

関数名が定数に変わった感じ。

6. アロー関数

その名の通り「アロー (arrow) (矢) =>」を使った関数のこと。
関数式のfunction()部分をアローに変えれる。
アロー関数を使うと、コードがシンプルになり読みやすくなる

const judge = (price) => {
    if(price > 5000) {
        console.log("高い");
      } else if(price > 3000) {
        console.log("普通");
      } else {
        console.log("安い");
      }
  }

呼び出す

judge(6000);
>> 高い

こんな感じ。