siren.

6. JavaScript入門 (関数)

JavaScript

関数とは

JavaScriptにおける関数は、特定のタスクを実行するためのコードブロックです。関数を使用することで、コードの再利用性を高め、プログラムの構造を整理することができます。関数には、以下の主要な要素があります。

関数の定義

関数を定義する方法はいくつかありますが、最も一般的な2つの方法を以下に示します。

  1. 関数宣言(Function Declaration)

    function greet(name) {
      return 'こんにちは、' + name + 'さん!';
    }
    
  2. 関数式(Function Expression)

    const greet = function(name) {
      return 'こんにちは、' + name + 'さん!';
    };
    

関数の呼び出し

関数を定義したら、それを「呼び出す」ことで実行できます。

console.log(greet('太郎'));

引数

関数は引数(パラメータ)を取ることができます。引数は関数に情報を渡すために使用されます。

function add(x, y) {
  return x + y;
}

console.log(add(5, 3)); // 8

戻り値

関数は「戻り値(return value)」を持つことができます。これは関数が処理した結果を呼び出し元に返す値です。

function multiply(x, y) {
  return x * y;
}

let result = multiply(6, 7);
console.log(result); // 42

関数は再利用可能なコードの「ブロック」と考えることができ、引数を使って入力を受け取り、戻り値を使って出力を返します。関数によってプログラムの各部分をモジュール化することで、読みやすく、保守しやすく、エラーを減らすことができます。

関数宣言(Function Declaration)

function greet(name) {
  return 'こんにちは、' + name + 'さん!';
}

let message = greet('太郎');
console.log(message); // "こんにちは、太郎さん!"が出力されます。

関数式(Function Expression)

const add = function(x, y) {
  return x + y;
};

let sum = add(5, 3);
console.log(sum); // 8が出力されます。

アロー関数(Arrow Function)

const multiply = (x, y) => {
  return x * y;
};

let product = multiply(6, 7);
console.log(product); // 42が出力されます。

引数のデフォルト値

function sayHello(name = 'ゲスト') {
  return 'こんにちは、' + name + 'さん!';
}

console.log(sayHello('太郎')); // "こんにちは、太郎さん!"が出力されます。
console.log(sayHello()); // "こんにちは、ゲストさん!"が出力されます。

これらの例を通じて、JavaScriptで関数をどのように定義し、引数と戻り値をどのように扱うかがお分かりいただけたかと思います。関数はプログラム内で重要な役割を果たし、コードの再利用性を高め、複雑さを抑えるために役立ちます。

関数宣言、関数式、アロー関数の使い分け

関数宣言(Function Declaration)、関数式(Function Expression)、アロー関数(Arrow Function)の3つはJavaScriptにおける関数を定義する異なる方法です。それぞれの使い分けについて説明します。

関数宣言(Function Declaration)

特徴:

  • 関数名で定義され、ホイスティング(スコープ内のどこからでも呼び出せる)が行われます。
  • ホイスティングのため、コード内のどこからでも呼び出すことができます。
  • 名前付き関数であるため、デバッグ時にエラースタックにその名前が表示される利点があります。

使い分け:

  • ホイスティングが必要な場合、または名前付き関数を明確に定義したい場合に適しています。

関数式(Function Expression)

特徴:

  • 変数に関数を割り当てる形式で定義され、ホイスティングは行われません。
  • 名前付き関数式や無名関数式のどちらも定義できます。
  • 関数式は宣言された後にのみ利用できます。

使い分け:

  • 即時実行関数(IIFE)での使用や、コードの実行順序が重要な場合に適しています。
  • メソッドやイベントハンドラーなど、変数に割り当てたい関数を定義する場合に使用します。

アロー関数(Arrow Function)

特徴:

  • 簡潔な構文を提供し、function キーワードを使用しないで関数を定義できます。
  • this キーワードの挙動が異なり、アロー関数自体には**thisがバインドされず、外側のスコープからthis**を継承します(レキシカルスコーピング)。

使い分け:

  • 短くて単純な関数、特にコールバック関数やラムダ関数に適しています。
  • this の挙動が重要な場合、特にクラスメソッドやイベントハンドラーとして使う場合に適しています。

それぞれの関数定義方法は特定のケースにおいて利点を持っているため、状況に応じて適切なものを選択することが重要です。