【JavaScript】関数（ファンクション）【基本】

  • 投稿日
  • 更新日
  • 著者 NKMR
  • カテゴリー JavaScript

関数（ファンクション）とは、よく行う処理を１つにまとめた小さなサブプログラム（プログラム内の小さなプログラム）で、使いたいときに呼び出して利用する。

関数（ファンクション）には自由に名前をつけることができますが、使ってはいけない文字や単語の制限は変数・定数と同じです。

関数（ファンクション）の書式

function 関数名(要求するパラメータ){
  処理内容
}

例文を書いてみます。

// 関数 total に price というパラメータを要求する 
function total(price) {
// 定数 tax に税率を代入
const tax = 0.1;
// return で price と [price x 税率]を足してパラメータに返す 
return price + price * tax; // price + (price x tax)
}

// コンソールに「ジュースの値段は100円です。」と表示させる
console.log('ジュースの値段は' + total(100) + '円です。');

関数名のあとの()に入っているパラメータ price は、続く{〜}の中でだけ有効な変数として機能する。

『()』は必ず記述する必要がある

関数名のあとの『()』は関数を実行するトリガーなので必ず記述する必要があります。

関数（ファンクション）を作るメリット

では関数（ファンクション）を作るメリットをいくつか見てみましょう。

メリット１：使いたい時に『どこからでも、何度でも呼び出せる』

関数（ファンクション）とは、呼び出されて初めて実行され、しかも何度でも呼び出せるので、必要なときに必要なだけ再利用することができる。

メリット２：パラメータ・内容を変えれば、同じ加工処理を別データに使える

例えば、

console.log('ジュースの値段は' + total(100) + '円です。');
console.log('パンの値段は' + total(80) + '円です。');
console.log('Tシャツの値段は' + total(3900) + '円です。');

のように違う商品を扱ったとしても、total(パラメータ)の値段を変えれば、全ての結果に同じ税率で自動で税率を付与してくれます。

メリット３：処理をまとめられる

例文では税込みの合計金額を算出するプログラムを関数一つにまとめましたが、例えば税率が変わったとしても const tax = 0.1; を１箇所書き換えるだけで済みます。

イベントに代入する関数（ファンクション）の注意点

関数（ファンクション）はイベントプロパティに代入することもできます。

例文↓

取得した要素.イベントプロパティ = function() {
  処理内容
};

イベントに代入する関数（ファンクション）にはファンクション名はつけません。

これを無名関数と呼びます。

また、{ 〜 }の中にreturnもありません。

基本