JavaScript関数定義の違い

JavaScriptにおける関数式と関数宣言の違い

JavaScriptでは、関数を定義する方法は大きく分けて2つあります。関数式と関数宣言です。それぞれの特徴と違いについて解説します。

関数式 (Function Expression)

関数式は、関数を値として扱う方法です。変数に代入したり、関数の引数に渡したりすることができます。

例

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

• 特徴
  
  • 関数を定義してから使用できる。
  • 匿名関数としても使用できる。
  • 変数に代入したり、関数の引数に渡したりできる。
  • ホイスティングされない。つまり、定義前に呼び出すとエラーになる。

関数宣言 (Function Declaration)

関数宣言は、関数を名前付きで定義する方法です。関数名を使って呼び出すことができます。

function greet(name) {
  console.log("Hello, " + name + "!");
}

• 特徴
  
  • 関数を定義する前に呼び出すことができる（ホイスティング）。
  • 名前付き関数として定義される。

具体的な違い

どちらを使うべきか

// 変数に代入する
const greet = function(name) {
  console.log("Hello, " + name + "!");
};

// 関数の引数に渡す
function sayHello(greeting, name) {
  greeting(name);
}

sayHello(greet, "Alice"); // Output: Hello, Alice!

// 匿名関数として使用
[1, 2, 3].forEach(function(item) {
  console.log(item * 2);
}); // Output: 2 4 6

// 関数を定義する
function greet(name) {
  console.log("Hello, " + name + "!");
}

// 関数を呼び出す
greet("Bob"); // Output: Hello, Bob!

// ホイスティングの例
console.log(greet); // Output: [Function: greet] (関数を参照できる)

// 関数式はホイスティングされない
console.log(foo); // Output: undefined
var foo = function() {
  console.log("Function expression");
};
foo(); // Output: Function expression

// 関数宣言はホイスティングされる
console.log(bar); // Output: [Function: bar]
function bar() {
  console.log("Function declaration");
}
bar(); // Output: Function declaration

アロー関数 (Arrow Function)

ES6で導入されたアロー関数は、関数式を簡潔に記述する方法です。

const greet = name => {
  console.log("Hello, " + name + "!");
};

• 特徴
  
  • 関数式の一種である。
  • 構文が簡潔。
  • thisバインディングが異なる。
  • 複数のパラメータがある場合は括弧が必要。

クラス (Class)

ES6で導入されたクラスは、オブジェクト指向プログラミングの概念をJavaScriptに導入するものです。クラスのメソッドは関数として定義されます。

class Greeter {
  greet(name) {
    console.log("Hello, " + name + "!");
  }
}

const greeter = new Greeter();
greeter.greet("Alice"); // Output: Hello, Alice!

• 特徴
  
  • オブジェクト指向プログラミングの概念を使用。
  • メソッドは関数として定義される。

メソッド (Method)

オブジェクトのプロパティとして定義される関数をメソッドと呼びます。

const person = {
  name: "Alice",
  greet() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Output: Hello, my name is Alice

• 特徴
  
  • オブジェクトのプロパティとして定義される。