JavaScriptで関数を宣言する方法：技術的で実用的なガイド

2025/12/25-14:00:00

JavaScript; funciones

935 単語

従来の関数宣言（`function` declaration）

これは最も古典的な形式で、functionキーワードの後に必須の名前を使用して定義されます。その最も特徴的な技術的特性の1つはホイスティング（巻き上げ）で、ファイル内の物理的な定義より前のコード行で関数を呼び出すことができます。

パラメータ付きの例：

function saludar(nombre) {
  return `Hola, ${nombre}!`;
}
console.log(saludar("Mundo")); // "Hola, Mundo!"

関数式（function expression）

この方法では、関数を変数に割り当てられるデータ値として扱います。ここでは、let、var、またはconstを使用してその変数を宣言できます。宣言とは異なり、これらは完全なホイスティングの対象ではありません。関数は、実行フローが割り当て行に到達するまで存在しません。

匿名： 独自の名前がありません。
名前付き： 再帰とデバッグに役立つ内部識別子を含みます（スタックトレースに表示されます）。

例：

const sumar = function(a, b) {
  return a + b;
}; // 偶発的な再割り当てを避けるために'const'を推奨

アロー関数（arrow functions）

ES6で導入され、非常にコンパクトな構文を提供し、functionキーワードの必要性を排除します。その最大の意味的な違いは、独自のthisバインディングを持たないことで、代わりにそれを囲むレキシカルスコープから継承します。

短い構文： パラメータが1つで、コードが1行の場合、括弧、中括弧、明示的なreturnを省略できます。

例：

const cuadrado = x => x * x; // 暗黙的なreturn

オブジェクトとクラスでのメソッド定義（shorthand）

これは、オブジェクトリテラルまたはクラス内で関数を宣言するための省略構文で、コロンとfunctionキーワードを省略します。これらのメソッドは、superバインディングにアクセスできる唯一のものです。

オブジェクトでの例：

const calculadora = {
  valor: 10,
  duplicar() {
    return this.valor * 2;
  } // クリーンな構文
};

非同期関数（`async`）

asyncプレフィックスでマークされたこれらの関数は、常にプロミスを返します。本体内でawaitを使用して、プロミスが解決されるまで非ブロッキング方式で実行を一時停止できます。

例：

async function obtenerDatos() {
  const respuesta = await fetch('url');
  return respuesta.json();
}

ジェネレーター関数（`function*`）

function*で定義され、非連続実行を可能にします。yieldキーワードを使用して、状態を一時停止し、呼び出し元に制御を譲ることができます。

例：

function* contador() {
  yield 1;
  yield 2;
}

即座に実行される関数式（IIFE）

定義されるとすぐに実行される関数です。主にプライベートスコープを作成し、グローバル名前空間を汚染しないようにするために使用されます。

例：

(function() {
  const mensaje = "Privado";
  console.log(mensaje);
})();

`Function`コンストラクタ（非推奨）

実行時にテキスト文字列から動的に関数を作成できます。セキュリティリスクとJavaScriptエンジンによる最適化の欠如のため、使用は推奨されません。

例：

const sumarDinamico = new Function('a', 'b', 'return a + b');

関数宣言は、キッチンの石に刻まれたレシピのようなものだと想像してください：シフトを始める前から常にそこにあり、誰もがどこにあるか知っています。関数式は、その場で書く付箋のようなものです：それを書いて壁に貼った後にのみ指示に従うことができます。最後に、アロー関数は、キッチン全体を必要とせずに、すでに行っていることのコンテキストを使用して迅速なタスクを完了するメンタルショートカットのようなものです.