概要

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);

アロー関数でも概念は同じ
() の有無が実行の境界

参考リンク

CodeWars