概要
JavaScriptの様々な関数の書き方を以下に列挙します。
あくまでここで紹介される関数は、関数そのものを列挙しているだけであり、それらの関数の記法を推奨するものではございません。
個人的によく使う関数の書き方
1. 関数宣言(Function Declarations)
JavaScriptで最も一般的な関数の書き方は関数宣言です。
function greet(name) {
return "Hello, " + name;
}
console.log(greet("World")); // "Hello, World"
2. アロー関数(Arrow Functions)
ES6で導入されたアロー関数(矢印関数)は、より短く、より簡潔に関数を書くことができます。また、変数に関数を代入する形でしか使用することができません。このアロー関数は、もっともモダンな関数の書き方です。
const greet = (name) => {
return "Hello, " + name;
};
console.log(greet("World")); // "Hello, World"
一行で書ける関数はさらに短縮することができます。
const greet = name => "Hello, " + name;
console.log(greet("World")); // "Hello, World"
3. アロー関数式を使用した無名関数
以下に記載のある、7. 無名関数をアロー関数式で書いたものです。
setTimeout(() => {
console.log("This message is displayed after 2 seconds.");
}, 2000);
4. コールバック関数(Callback Functions)
コールバック関数は、他の関数に引数として渡され、その関数の中で呼び出される関数のことを指します。
function greet(name, callback) {
console.log("Hello, " + name);
callback();
}
greet("World", function() {
console.log("This is a callback function!");
});
// "Hello, World"
// "This is a callback function!"
個人的にあまり使わない関数の書き方
5. 関数式(Function Expressions)
JavaScriptでは関数もオブジェクトなので、変数に関数を代入することも可能です。これを関数式といいます。関数宣言との違いはホイスティングが起きないところです。
const greet = function(name) {
return "Hello, " + name;
};
console.log(greet("World")); // "Hello, World"
6. 高階関数(Higher-Order Functions)
高階関数は、他の関数を引数として受け取る、または関数を返す関数のことを指します。JavaScriptの関数はオブジェクトであるため、変数に代入したり、他の関数に引数として渡したり、関数から返すことができます。この特性を利用して、高階関数は非常に強力なプログラミングパターンを実現します。
例1: 関数を引数として受け取る
function greet(name, formatFunction) {
console.log(formatFunction(name));
}
function upperCaseName(name) {
return "Hello, " + name.toUpperCase();
}
function lowerCaseName(name) {
return "Hello, " + name.toLowerCase();
}
greet("World", upperCaseName); // "Hello, WORLD"
greet("World", lowerCaseName); // "Hello, world"
例2: 関数を返す (クロージャを含む)
function multiplier(factor) {
return function(number) {
return number * factor;
};
}
const double = multiplier(2);
console.log(double(5)); // 10
const triple = multiplier(3);
console.log(triple(5)); // 15
このような関数を返すパターンは、クロージャとしても知られています。クロージャは、関数とその関数が作成されたレキシカルスコープの組み合わせで、関数は外部からアクセスできない変数にアクセスできるようになります。
高階関数は、関数型プログラミングの基本的な概念であり、配列のメソッドであるmap、filter、reduceなどのメソッドを使用する際にも頻繁に出会います。
7. 無名関数(Anonymous Functions)
無名関数は、名前を持たない関数のことを指します。これらの関数は、一度しか使用されない場合や、関数の名前を指定する必要がない場合によく使用されます。特に、コールバック関数やイベントハンドラとして使用されることが多いです。
setTimeout(function() {
console.log("This message is displayed after 2 seconds.");
}, 2000);
上記の例では、setTimeout関数に無名関数をコールバックとして渡しています。この無名関数は、2秒後に実行されます。
無名関数は、関数式や高階関数と組み合わせて使用されることが多いです。ただし、デバッグ時に関数名がスタックトレースに表示されないため、デバッグが難しくなることがあります。そのため、関数に名前を付けることで、デバッグを容易にすることが推奨されています。
8. 即時実行関数(Immediately Invoked Function Expressions, IIFEs)
即時実行関数は、定義と同時に実行される関数です。
(function(name) {
console.log("Hello, " + name);
})("World"); // "Hello, World"