関数

関数は入力を受け取り、処理結果を返せる再利用可能な処理のまとまりです。

このLessonのゴール

• 処理を関数として定義し、必要な場所から呼び出せる
• 引数、デフォルト値、戻り値の役割を説明できる
• 関数の実行結果をConsoleで確認できる

今回新しく作るファイル

with-cafe/practice/javascript/
├── 03-functions.html
└── 03-functions.js

03-functions.htmlから03-functions.jsを読み込みます。このLessonのコードと実行結果は、新しい2ファイル内で確認します。

<script src="03-functions.js" defer></script>

ブラウザで確認するファイル

03-functions.htmlをブラウザで開き、DevToolsのConsoleで関数の結果を確認します。変更後は03-functions.jsを保存してから再読み込みします。

function calculateTaxIncludedPrice(price, taxRate = 0.1) {
  return Math.floor(price * (1 + taxRate));
}

const total = calculateTaxIncludedPrice(1200);
console.log(total);

price と taxRate が引数、return の値が戻り値です。関数名は「何をするか」が分かる動詞から始めましょう。

実際に試してみよう

名前を受け取り「こんにちは、○○さん」と返す createGreeting 関数を作ってください。