関数

3.1 関数の宣言

関数はJavaScriptの基本的な構造ブロックの一つだよ。コードを整理したり、ロジックを再利用したり、もっと複雑な構造を作り出せるんだ。関数の宣言と使用には主に3つの方法がある：関数の宣言、関数の式、そしてアロー関数。

関数の宣言は、後で呼び出すことができる名前付き関数を作成する方法だよ。こうした関数は、そのスコープの頂点に「持ち上げられる（hoisted）」ので、コード中で宣言する前に呼び出すことができる。

構文:

    
      function name (arguments) {
        // 関数の中身
      }
    
  

使用例:

    
      // 関数の宣言
      function greet(name) {
        return `Hello, ${name}!`;
      }

      // 関数の呼び出し
      console.log(greet('Alice')); // 出力: Hello, Alice!
    
  

3.2 関数式

関数式は匿名関数（名前のない関数）を作成し、それを変数に代入できる。こういった関数は「浮上しない」ので、宣言後にしか呼び出せないよ。

構文:

    
      const name = function (arguments) {
        // 関数の中身
      }
    
  

使用例:

    
      // 関数式

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

      // 関数の呼び出し
      console.log(greet('Bob')); // 出力: Hello, Bob!
    
  

3.3 アロー関数

アロー関数は、関数を簡潔に宣言する方法で、親スコープからのthisのコンテキストを保持するのも特徴だよ。アロー関数には独自のthisがないので、イベントハンドラや配列メソッドで特に便利だね。

構文:

    
      const name = (arguments) => {
        // 関数の中身
      }
    
  

関数が一つの引数を受け取る場合、丸括弧を省略できるよ。また、関数が一つの式を返すだけなら、波括弧とreturnのキーワードを省略することもできるんだ。

例 1: 完全な形式

    
      // アロー関数

      const greet = (name) => {
        return `Hello, ${name}!`;
      };

      // 関数の呼び出し
      console.log(greet('Charlie')); // 出力: Hello, Charlie!
    
  

例 2: 短縮形

    
      // 1引数と1式のアロー関数
      const greet = name => `Hello, ${name}!`;

      // 関数の呼び出し
      console.log(greet('Dana')); // 出力: Hello, Dana!
    
  

3.4 関数宣言方法の比較

ホイスティング (hoisting):

• 関数の宣言: 関数は持ち上げられ、宣言前に呼び出せる
• 関数式 と アロー関数: 持ち上げられず、宣言後にしか呼び出せない

thisのコンテキスト:

• 関数の宣言 と 関数式: 独自のthisコンテキストを持つ
• アロー関数: 独自のthisを持たず、親スコープからコンテキストを継承する

書きやすさ:

• アロー関数: より簡潔で、短い関数やコールバックで頻繁に使われる