関数リテラルって何？JavaScriptで関数定義前に使う方法を徹底解説！

2024-04-09

JavaScriptで関数を定義前に使用できる理由

関数リテラルとは、匿名の関数を定義する方法です。以下のコードのように、function キーワードを使って、変数に代入したり、直接呼び出したりすることができます。

// 関数リテラルを定義
const add = function(x, y) {
  return x + y;
};

// 関数を使用
console.log(add(1, 2)); // 3

// 別の方法で関数リテラルを定義
const subtract = (x, y) => x - y;

// 関数を使用
console.log(subtract(4, 2)); // 2

関数を定義前に使用できる理由

JavaScriptでは、コードが上から順番に解釈されます。そのため、関数を定義する前に使用しても、問題なく動作します。

これは、関数リテラルが実際にはオブジェクトとして評価されるためです。オブジェクトは変数に代入したり、呼び出すことができるため、関数を定義する前に使用することができます。

関数を定義前に使用することで、コードをより簡潔に記述することができます。例えば、以下のコードのように、短い関数を直接呼び出すことができます。

console.log([1, 2, 3].filter(x => x % 2 === 0)); // [2]

このコードでは、filter メソッドの引数として、偶数を抽出する関数を直接記述しています。

関数を定義前に使用すると、コードの読みやすさが低下する可能性があります。複雑な関数を定義前に使用すると、コードの意味が分かりにくくなります。

そのため、関数を定義前に使用するのは、短い関数や単純な関数に限るようにしましょう。

JavaScriptでは、関数リテラルと呼ばれる機能により、関数を定義前に使用することができます。これは、コードをより簡潔に記述することができます。

関数リテラルを使ったサンプルコード

// 関数リテラルを定義
const add = function(x, y) {
  return x + y;
};

// 関数を使用
console.log(add(1, 2)); // 3

// 別の方法で関数リテラルを定義
const subtract = (x, y) => x - y;

// 関数を使用
console.log(subtract(4, 2)); // 2

// 関数リテラルを配列の要素として使用
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(x => x % 2 === 0);
console.log(evenNumbers); // [2, 4]

// 関数リテラルをオブジェクトのプロパティとして使用
const person = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

// 関数を使用
person.greet(); // Hello, my name is John Doe

関数定義前に使用したサンプルコード

// 関数定義前に使用
console.log(add(1, 2)); // 3

// 関数定義
function add(x, y) {
  return x + y;
}

// 関数を使用
console.log(add(3, 4)); // 7

関数定義前に使用する方法

関数リテラル

// 関数リテラルを定義
const add = function(x, y) {
  return x + y;
};

// 関数を使用
console.log(add(1, 2)); // 3

// 別の方法で関数リテラルを定義
const subtract = (x, y) => x - y;

// 関数を使用
console.log(subtract(4, 2)); // 2

関数式

関数式 は、名前付きの関数を定義する方法です。以下のコードのように、function キーワードと関数名の後に、関数本体を記述します。

// 関数式を定義
function add(x, y) {
  return x + y;
}

// 関数を使用
console.log(add(1, 2)); // 3

named 関数式

// named 関数式を定義
function add(x, y) {
  return x + y;
}

// 関数を使用
console.log(add(1, 2)); // 3

クラスのメソッド

クラスのメソッド は、クラスのインスタンスに対して呼び出すことができる関数です。以下のコードのように、class キーワードを使ってクラスを定義し、その中にメソッドを記述します。

// クラスを定義
class Person {
  constructor(name) {
    this.name = name;
  }

  // メソッドを定義
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// クラスのインスタンスを作成
const person = new Person("John Doe");

// メソッドを使用
person.greet(); // Hello, my name is John Doe

ジェネレータ

ジェネレータ は、繰り返し処理を行うための関数です。以下のコードのように、function キーワードと yield キーワードを使って、ジェネレータを定義します。

// ジェネレータを定義
function* generateNumbers() {
  for (let i = 1; i <= 10; i++) {
    yield i;
  }
}

// ジェネレータを使用
const generator = generateNumbers();

// ジェネレータから値を取得
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3