概要
JavaScript において 関数宣言 と 関数呼び出 は混同されやすい概念ですが、
「関数を定義すること」と「関数を実行すること」は明確に異なります。
つまり、
関数宣言は「どのような処理を行う関数かを定義すること」、
関数呼び出は「定義された関数を実際に実行すること」です。
この違いを正しく理解することで、
- コールバック関数の挙動が理解しやすくなる
- 即時実行される／されないバグを防げる
- React や Node.js における関数の扱いが明確になる
といったメリットがあります。
目次
基本構文
関数宣言
function greet() {
console.log("Hello!");
}
-
greetという名前の関数を定義している - この時点では処理は実行されていない
関数呼び出
greet();
- 定義済みの関数を実行する
-
()を付けることで関数が呼び出される
実行結果
Hello!
関数宣言と関数呼び出の比較
関数宣言
function add(a, b) {
return a + b;
}
- 関数の処理内容を定義しているだけ
- 実行はされない
- 「関数オブジェクト」を作成している状態
関数呼び出
const result = add(2, 3);
console.log(result);
- 関数内部の処理が実行される
- 引数
a = 2,b = 3が渡される - 戻り値が呼び出し元に返る
比較結果
役割の違い
-
関数宣言
- 何をする関数かを定義する
-
関数呼び出
- その関数をいつ実行するかを決める
実行タイミング
-
関数宣言
- 書いただけでは実行されない
-
関数呼び出
-
()が評価された瞬間に実行される
-
よくある勘違い
console.log(add); // 関数そのもの
console.log(add()); // 関数の実行結果
-
addは関数オブジェクト -
add()は関数の戻り値
活用例
1. 戻り値の有無による違い
function sayHello() {
console.log("Hello");
}
function getHello() {
return "Hello";
}
sayHello(); // Hello
console.log(getHello()); // Hello
-
console.logは関数呼び出の内部処理 -
returnは呼び出し元へ値を返す
2. コールバック関数での違い
function greet() {
console.log("Hello");
}
setTimeout(greet, 1000); // 関数を渡す
setTimeout(greet(), 1000); // 即時実行される
-
greetは後で呼び出される -
greet()はその場で実行され、戻り値が渡される
3. 配列メソッドとの関係
function isEven(num) {
return num % 2 === 0;
}
const numbers = [1, 2, 3, 4];
const evens = numbers.filter(isEven);
console.log(evens); // [2, 4]
-
isEvenは関数宣言 -
filter内部で関数呼び出が行われている
4. 無名関数の場合
numbers.filter(function (num) {
return num % 2 === 0;
});
- 関数宣言と関数呼び出の関係が内部で自動的に成立している
5. アロー関数との関係
const add = (a, b) => a + b;
add(1, 2);
- アロー関数でも概念は同じ
-
()の有無が実行の境界
参考リンク
- mdn web docs – JavaScript 関数（Functions）
- mdn web docs – 関数宣言
- 【JavaScript入門】function(関数)の使い方、呼び出し・戻り値など総まとめ！