【イラスト付き】JavaScript関数三種【丁寧に解説】
はじめに
皆さんこんにちは。
今回はJavaScriptの関数の書き方をご紹介します。
関数はJavaScriptを扱う上では必須の要素です。そして関数には書き方が３種類あります。
今回はこれら関数３種類の書き方について解説します。
こんな人にオススメ
- 初めてJavaScriptに触れる方
- JavaScriptの関数宣言の書き方を知りたい
初めて学習する方にも分かるように、丁寧に解説していきます。
プログラミングに慣れてきた方も、是非一度目を通していただけると嬉しいです。
😋 JavaScriptはあちこちで関数を使う言語です♪
function宣言
まずポイントをチェック
- functionキーワードを使う
- ベーシックかつ古くからある書き方
fucntion宣言は最もベーシックかつ古くからある書き方です。functionキーワードを使い、関数名、引数、処理内容、戻り値を指定します。
書き方
- 関数名はfunctionキーワードの右側
- 引数は丸カッコ内
- 複数の場合はカンマ区切り
- 処理内容は中カッコ内
- 戻り値はreturnキーワードの右側
function 関数名(引数リスト) {
処理内容
return 戻り値;
}
// helloと表示する関数
function hello() {
console.log('hello');
}
// 引数で受け取った文字列を表示する関数
function showMsg(message) {
console.log('内容：' + message);
}
// 引数の値段と数量で合計金額を計算して返す関数
function calcPrice(price, amount) {
return price * amount;
}
実行する際は関数名を指定し引数を丸カッコに指定します。引数なしの関数を実行する場合は、実行時に引数を指定する必要はありません。戻り値がある関数を実行する場合は、変数で受け取るなど戻り値の対応をします。
// それぞれの関数を実行
hello(); // 引数なしなので、丸カッコには何も指定しない
showMsg('関数を実行'); // 戻り値なしの関数なので、結果を受け取る記述は不要
const sum = calcPrice(100, 2); // 合計金額は戻り値で返ってくるので、変数で受け取る
😋 functionは昔ある代表的な書き方です♪
関数式
まずポイントをチェック
- 関数を変数に代入する形式
- 関数名は省略し、変数名を利用
- それ以外は従来の関数と同様
関数式は、関数を変数に代入して宣言する方法です。
書き方
- 関数式の構文はfunctionキーワードを利用
- 引数、処理内容、戻り値の記述方法は従来の関数と同様
- 変数名が関数名になるので、関数名は省略
const 変数名 = function (引数リスト) {
return 戻り値;
};
// helloと表示する関数
const hello = function () {
console.log('hello');
};
// 引数で受け取った文字列を表示する関数
const showMsg = function (message) {
console.log('内容：' + message);
};
// 引数の値段と数量で合計金額を計算して返す関数
const calcPrice = function (price, amount) {
return price * amount;
};
実行する際は変数名を指定して実行します。引数の渡し方や、戻り値の扱いは従来の関数と同様です。
// それぞれの関数を実行
hello();
showMsg('関数を実行');
let sum = calcPrice(100, 2);
😋 関数式は関数を値として扱えるJavaScriptの特徴的な宣言方法です♪
アロー関数
まずポイントをチェック
- 関数式の省略表現
- functionキーワードは利用せず、矢印を利用する
- 引数が１つだけの場合は、丸カッコを省略可能
- 処理が１行だけの場合は、returnと中カッコを省略可能
アロー関数は関数式の省略記法です。アロー関数は関数式の省略表現なので、構文のほとんどは関数式と同じです。大きな違いとして、アロー関数の構文はfunctionキーワードは利用せず、矢印を利用します。
書き方
- functionキーワードは記述せず、いきなり引数の宣言
- 引数宣言の右側には矢印を配置
- 矢印の右側に処理を記述
const 変数名 = (引数リスト) => {
return 戻り値;
};
以上の基本形からさらに、引数や処理の書き方に省略記法が用意されています。
省略ルール
- 引数が１つだけの場合は、丸カッコを省略できます。
- 処理が１行だけの場合は、returnと中カッコを省略できます。
const 変数名 = 引数 => 戻り値;
// helloと表示する関数
const hello = () => console.log('hello');
// 引数で受け取った文字列を表示する関数
const showMsg = message => {
console.log('内容：' + message);
};
// 引数の値段と数量で合計金額を計算して返す関数
const calcPrice = (price, amount) => price * amount;
実行する際は変数名を指定して実行します。引数の渡し方や、戻り値の扱いは従来の関数と同様です。
// それぞれの関数を実行
hello();
showMsg('関数を実行');
let sum = calcPrice(100, 2);
😋 アロー関数は省略も含めて覚えましょう♪
おわりに
皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。
関数の書き方について確認をしていただきました。３つの書き方の内、アロー関数は慣れるまで理解しづらいですが、利用頻度は高いので根気よく理解を深めましょう。
😋 これからもプログラミング学習頑張りましょう♪
Discussion