##はじめに
この記事はJavascriptが苦手な私ために書いている自分用のメモです。
※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。
##目次
- 関数 (function) とは
- 関数 (function) の書き方
- 関数(function) の例
- 関数式とは
- 関数式の例
- アロー関数
#1. 関数 (function) とは
**複数の処理をまとめたもの。**プログラムを何度も使い回しができるかたちにしたものです。
コード量が少なくなって、見通しが良くなる!!
#2. 関数 (function) の書き方
関数の一番シンプルな基本のかたちです。
function 関数名( 引数 ) {
処理する内容
}
関数名(引数);//関数を呼び出す
関数名は変数名を付けるときとルールは大体同じ。
最初に動詞を持ってくることが多い。
例)・add○○
・is○○
・引数とは
関数に与える情報で、関数を呼び出すときに一緒に値を渡すことで、関数の中でその値を使うことができる。
#3. 関数(function) の例
変数だけのプログラムで書くと、、、
const price = 6000;
if(price > 5000) {
console.log("高い");
} else if(price > 3000) {
console.log("普通");
} else {
console.log("安い");
}
>> 高い
const price = 4000;
if(price > 5000) {
console.log("高い");
} else if(price > 3000) {
console.log("普通");
} else {
console.log("安い");
}
>> 普通
const price = 1000;
if(price > 5000) {
console.log("高い");
} else if(price > 3000) {
console.log("普通");
} else {
console.log("安い");
}
>> 安い
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);
>> 高い
こんな感じ。