Javascript基礎知識＃7（関数）

はじめに

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

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

目次

1. 関数 (function) とは
2. 関数 (function) の書き方
3. 関数(function) の例
4. 関数式とは
5. 関数式の例
6. アロー関数

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);
>> 高い

こんな感じ。