概要

JavaScriptの「関数（function）」は、定義のしかた・定義される位置・利用目的 によって性質が異なります。

本記事では、関数を 「宣言関数」→「関数式」→「アロー関数」→「コンストラクタ関数」 の4分類で整理し、
それぞれの特徴・スコープ・this挙動を具体例で理解します。

目次

一連の処理をまとめて再利用できる構文。
JavaScriptでは、関数は「第一級オブジェクト (First-class Object)」として扱われます。

function greet(name) {
  return `Hello, ${name}`;
}

console.log(greet("Taro")); // "Hello, Taro"

💡 第一級オブジェクトとは？

function キーワードで宣言される関数。
スコープの先頭で読み込まれるため、ホイスティングが有効です。

sayHello(); // ← OK（ホイスティングされる）

function sayHello() {
  console.log("Hello!");
}

💡 特徴

関数を 変数に代入して定義 する形式。
ホイスティングされず、定義後にのみ呼び出せます。

// sayHello(); ← エラー（定義前）

const sayHello = function() {
  console.log("Hello!");
};

sayHello(); // OK

💡 特徴

ES6で導入された、短い構文 + 静的this を持つ関数式。
関数式と似ていますが、thisの扱いが異なります。

const sayHello = (name) => {
  console.log(`Hello, ${name}`);
};

sayHello("Taro");

💡 特徴

new キーワードと共に使用し、オブジェクトを生成する 特別な関数。
クラス構文が登場する前のオブジェクト生成手法です。

function User(name) {
  this.name = name;
}

const user1 = new User("Taro");
console.log(user1.name); // "Taro"

💡 特徴

分類	主な定義方法	主な活用シーン（実務例）
宣言関数	`function fetchData() { ... }`	共通処理・再利用ロジック API通信や計算処理など、複数箇所で呼び出す汎用関数に最適。例）`function calculateTax(price) { return price * 1.1; }`
関数式	`const handleClick = function() { ... }`	ローカル関数・コールバック処理 setTimeoutやイベント処理など、そのスコープ内限定の用途。例）`setTimeout(function(){ console.log("done"); }, 1000);`
アロー関数	`const sum = (a, b) => a + b;`	短い処理・Reactや配列操作 React Hooks、map/filterなどの反復処理や簡潔なコールバックに最適。例）`fruits.map(f => f.toUpperCase())` / `button.onclick = () => setOpen(true)`
コンストラクタ関数	`function User(name) { this.name = name;}const u = new User("Taro");`	オブジェクト生成・クラス設計 `class`導入以前のOOP手法。オブジェクトを生成して状態を持たせる用途。例）`function Car(model) { this.model = model; }` / `new Car("Tesla")`