JavaScript の function 使い方まとめ

JavaScript でプログラミングをする際に必要不可欠とも言える function（関数）についてのメモです。

そもそも function とは何？と思ったり、書き方が違う function に出会ったり、どのように書けばいいのか分からなかったり…そんな時に参考となるようまとめていきます。

function・関数とは

まず初めに function とは関数のことです。そして関数とは複数の処理をまとめたものです。

関数を使用することで、目的ごとに処理を分割することができます。処理を別のプログラムでも使えたり、コーディングのしやすさや保守性もアップします。

プログラミングで覚えておきたい「スコープ」

プログラミングでのスコープとは影響範囲のことです。宣言した変数が利用できる範囲を指します。

JavaScript はグローバルスコープと関数スコープで分けられます。

関数外で宣言した変数はどこからでの利用できます。（グローバルスコープ）
関数内で宣言した変数はその関数の中でのみ利用できます。（関数スコープ）

let text1 = 'JavaScript';

function textTest() {
  var text2 = 'JS';
  console.log(text2);
}

console.log(text1);
textTest();
console.log(text2);

上記コード例では、変数「text1」が関数外、「text2」は関数内で宣言されています。
console.log() で確認すると、「text1」は格納した文字列が表示されますが、「text2」は Uncaught ReferenceError: text2 is not defined （text2 は定義されていない）というエラーが表示されます。
関数を実行すれば変数「text2」に入っている文字列が表示されます。

変数の有効範囲を限定することで、コーディングがしやすくなり予期せぬトラブルを回避できます。可能な限り有効範囲は狭めた方が良いです。

任意の範囲のみに影響を与えるようにするためにも関数を定義していく必要があるのです。

関数の作成（定義）方法

関数を扱うためにまずは定義することから始めます。JavaScriptの関数定義の方法はいくつかあるので、それぞれの書き方について記していきます。

関数宣言

関数の代表的・ベーシックな書き方が関数宣言です。関数名をつけてその処理を使用したいところで呼び出せます。

function 関数名(引数) {
  // 何かしらの処理
}

関数名は任意のもので良いのですが、処理内容が分かりやすい名前を設定しましょう。

引数はその値を関数に渡して処理の中で使用することができるものです。処理方法は同じで、渡す値を変えることによって結果を変えることができます。

function addition(i) {
  return i + i;
}
console.log(addition(5)); // 結果は「10」

変数に格納して利用する場合。

function addition(i) {
  return i + i;
}
const val = addition;
console.log(val(10)); // 結果は「20」

関数式

JavaScript において関数はオブジェクトとして扱うこともできます。そのため関数を式として変数に渡す書き方もできます。

関数式での書き方は関数名をつけずに定義することができます。名前がない関数は無名関数と言います。

const 変数名 = function(引数) {
  // 何かしらの処理
}

const addition = function(i) {
  return i + i;
}
console.log(addition(5)); // 結果は「10」

ここでは無名関数のコードを紹介しましたが、関数名を指定する書き方もあります。詳しくは後述します。

アロー関数式

前述した関数式よりシンプルに記述することができるのがアロー関数です。アロー関数は常に無名になります。

const 変数名 = 引数 => {
  // 何かしらの処理
}

const addition = i => {
  return i + i;
}
console.log(addition(5)); // 結果は「10」

引数が一つであれば引数を囲むカッコ「()」は不要ですが、引数が無い場合や複数の引数を渡す場合はつける必要があります。

const addition = (i, n) => {
  return i + n;
}
console.log(addition(10, 100)); // 結果は「110」

今回のコードのように処理が一行である場合、波括弧「{}」や return も省略することができます。

const addition = (i, n) => i + n;
console.log(addition(20, 100)); // 結果は「120」

関数の呼び出し（実行）

関数を呼び出す書き方は 関数名(値) です。引数として渡す値がなければ 関数名() と書きます。

いろいろな関数式

関数式は前述した無名関数の他、名前付き関数式や即時関数式といったものがあります。

名前付き関数式

関数式では関数名をつけて定義することもできます。関数自身を関数内で参照したい場合は、名前付き関数を利用します。

let x = 1;
let text = '回目の実行';
const result = function result01() {
  console.log(x + text);
  if(x === 1) {
    ++x;
    result01();
  }
}
result();

上記コードでは result01 という関数名を設定し、処理を記述。条件分岐をつけ、先に記述した処理を実行させています。

即時関数式

即時関数は、関数の定義と同時に実行されます。

(function (引数1, 引数2) {
  // 処理内容
}('値1', '値2'));

const result = (function (param01, param02) {
  console.log(param01, param02);
}('Hello ', 'World'));

即時関数を使うことで、 関数名() という記述がなくとも処理が実行されます。上記コードを記述すると、コンソール画面に「Hello World」が表示されます。

即時関数はカッコの代わりにエクスクラメーション「!」を使用する書き方もあります。

!function () {
  // 処理内容
}();