【JavaScript】関数まとめ

使用した教材

以下の動画でJavaScriptの関数について勉強したので、簡単にまとめてみました

JavaScriptの関数

基本的な書き方

• 関数の定義 ... function 関数名() { 実行したい処理 }
• 関数の実行 ... 関数名();

app.js

// 関数の定義
function rollTheDice() {
    const number = Math.floor(Math.random() * 6) + 1;
    console.log(number);
}

// 関数の実行
rollTheDice();

引数

関数の実行時に、関数側に渡す情報のこと

• 関数の定義 ... function 関数名(パラメータ) { 実行したい処理 }
• 関数の実行 ... 関数名(引数);

app.js

// 関数の定義
function greet(person) {
    console.log(`Hello, ${person}!`);
}

// 関数の実行
greet("Yamada");

// 出力結果
// Hello, Yamada!

複数の引数を扱う場合

• 関数の定義 ... function 関数名(パラメータ1, パラメータ2, ...) { 実行したい処理 }
• 関数の実行 ... 関数名(引数1, 引数2, ...);

app.js

// 関数の定義
function greet(firstName, lastName) {
    console.log(`Hello, ${firstName} ${lastName}!`);
}

// 関数の実行
greet("Taro", "Yamada");

// 出力結果
// Hello, Taro Yamada!

デフォルトパラメータ

関数のパラメータに設定する初期値

app.js

function cheer(player, msg = "頑張れ!!") {
    console.log(`${player}選手、${msg}`);
}

cheer("大谷");

// 出力結果
// 大谷選手、頑張れ!!

戻り値

関数側から関数の呼び出し元（関数名();）に返される情報

• 関数の定義 ... function 関数名(パラメータ) { return 実行したい処理 }

app.js

// 関数の定義
function calculatePriceIncludingTax(price) {
    return price * 1.1;
}

// 関数の実行
const taxIncludedPrice = calculatePriceIncludingTax(1000);

• 関数の実行結果を他の処理で扱えるように、実行結果を変数に入れておくとより便利
• 関数内のreturnが書かれた処理の後に書かれた処理は実行されない

関数式

• 関数の定義 ... const 関数名 = function (パラメータ) { 実行したい処理 };

app.js

// 関数の定義
const calculatePriceIncludingTax = function (price) {
    return price * 1.1;
};

より簡潔な書き方（アロー関数）

• 関数の定義 ... const 関数名 = (パラメータ) => { 実行したい処理 };

app.js

// 関数の定義
const calculatePriceIncludingTax = (price) => {
    return price * 1.1;
};

上記コードのように、パラメータが1つ、実行したい処理が1つの場合は、さらに簡潔な書き方ができる

• 関数の定義 ... const 関数名 = パラメータ => 実行したい処理;

app.js

// 関数の定義
const calculatePriceIncludingTax = price => price * 1.1;

• パラメータを入れる()を外せるのは、パラメータが1つの時だけ
• 実行したい処理が１つ、かつその処理がreturnを伴う場合は、returnの文字も省略できる