目次
1. 関数とは
2. 関数宣言
3. 関数リテラル（関数式）
4. 即時関数
5. アロー関数
6. JavaScript基礎シリーズ
7. 参考記事
1. 関数とは
やりたい処理をまとめて実行することができる命令のことです。
引数 ・・・ 処理する際に渡す値
返り値（戻り値）・・・ 返却される処理の結果
JavaScriptにはすでに定義されている関数がありますが、関数を自分で定義することができます。
ここでは関数を定義する方法を紹介したいと思います。
2. 関数宣言
JavaScriptでは、functionを使って関数を定義します。
function 関数名(引数1, 引数2, …) {
// 処理内容
return 戻り値;
}
このように定義する方法を関数宣言といいます。
引数は無しでも複数記載しても定義することができます。
処理結果を返したい場合はreturnで返却する必要があります。
次のhello関数は引数に名前を入力することで、コンソール上に文字列を表示させる関数です。
function hello(name) {
console.log("こんにちは、" + name + "さん！！" );
}
hello("太郎");
//出力結果：こんにちは、太郎さん！！
関数は関数名(引数)で実行することができます。
引数が無い場合でも、関数名() このようにカッコを記載する必要があります。
サンプルをもう一つ。
次のadd関数は引数に指定した二つの数値を足した結果を返却する関数です。
unction add(num1, num2) {
return num1 + num2;
}
const result = add(3, 4);
console.log(result);
//出力結果：7
3. 関数リテラル（関数式）
関数リテラルを使用して関数を定義する方法がこちらです。
変数 = function(引数) {
// 処理内容
return 戻り値;
};
変数に名前のない関数（無名関数）を代入して定義します。
関数宣言の項目で定義したサンプルを関数リテラルで再現すると次のようになります。
const hello = function (name) {
console.log("こんにちは、" + name + "さん！！");
};
hello("太郎");
//出力結果：こんにちは、太郎さん！！
const add = function (num1, num2) {
return num1 + num2;
};
const result = add(3, 4);
console.log(result);
//出力結果：7
ちなみに関数宣言と関数リテラルは読み込まれるタイミングが違います。関数宣言は先に読み込まれますが、関数リテラルはそうでないため、関数リテラルを定義する前に関数を呼び出すとエラーになります。
// 関数宣言
hello("太郎");
function hello(name) {
console.log("こんにちは、" + name + "さん！！" );
}
// 出力結果：こんにちは、太郎さん！！
// 関数リテラル
hello("太郎");
const hello = function (name) {
console.log("こんにちは、" + name + "さん！！");
};
// 出力結果:TypeError: hello is not a function
4. 即時関数
即時関数は定義されると同時に処理が実行される記載方法です。
即時で実行されるので関数を呼び出す必要がありません。
他のところでは逆に呼び出すことができないので、関数を再利用することができません。
次のように記載します。
(function(仮引数) {
// 処理内容
})(実引数);
最後の実引数の()の位置は次の位置でも問題ないようです。
(function(仮引数) {
// 処理内容
}(実引数));
戻り値がある場合は変数に代入します。
変数 = (function(仮引数) {
// 処理内容
return 戻り値
}(実引数));
関数宣言の項目で定義したサンプルを即時関数で再現すると次のようになります。
(function(name) {
console.log("こんにちは、" + name + "さん！！" );
}("太郎"));
// 出力結果：こんにちは、太郎さん！！
const result = (function(num1, num2) {
return num1 + num2;
}(3, 4));
console.log(result);
//出力結果：7
5. アロー関数
アロー関数は関数リテラルや即時関数をfunctionの記載を省略し、より短い記述で定義することができる方法です。
次のように記載します。
変数 = (引数) => {
// 処理内容
return 戻り値;
};
関数宣言の項目で定義したサンプルをアロー関数で再現すると次のようになります。
const hello = (name) => {
console.log("こんにちは、" + name + "さん！！" );
};
hello("太郎");
// 出力結果：こんにちは、太郎さん！！
const add = (num1, num2) => {
return num1 + num2;
};
const result = add(3, 4);
console.log(result);
//出力結果：7
また、即時関数をアロー関数で再現する場合は最後に(実引数)を記載します。
即時関数の項目で定義したサンプルをアロー関数で再現すると次のようになります。
((name) => {
console.log("こんにちは、" + name + "さん！！" );
})("太郎");
// 出力結果：こんにちは、太郎さん！！
const result = ((num1, num2) => {
return num1 + num2;
})(3, 4);
console.log(result);
//出力結果：7
アロー関数では実引数は最後に記載しないとエラーとなるようです。
6. JavaScript基礎シリーズ
1. 変数
2. 配列・条件分岐・繰り返し
3. 関数 ←今ここ
7. 参考記事
関数 - JavaScript | MDN
関数と宣言 · JavaScript Primer #jsprimer
JavaScriptで即時関数を使う理由 - Qiita
即時関数の使い方と構造について | JavaScript中級編 - ウェブプログラミングポータル
JavaScriptのIIFE (即時関数、即時実行関数式)の使い方と具体例 | devsakaso
アロー関数式 - JavaScript | MDN
JavaScript アロー関数を説明するよ - Qiita
JavaScriptの即時関数をアローを使って記述する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン