💣

関数宣言、関数式、アロー関数

2025/02/04に公開
2

関数宣言

functionキーワードを先頭に記述する書き方

記述例

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

特徴

ホイスティング(巻き上げ)時の動作として、関数宣言はプログラムの最初に読み込まれるため
コード内で関数を定義する前に関数を呼び出してもエラーにならない
※ただしスクリプトをモジュールとして読み込んだり、strict modeを使用していると挙動が変わる

関数式

関数を変数に代入して定義する書き方

記述例

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

IIFE(即時実行関数)

(function() {
  console.log("This is an IIFE!");
})();

特徴

ホイスティング(巻き上げ)時の動作として、関数ではなく式として扱われるため、
letやconstの場合、宣言はされるが初期化は実行箇所まで行われない。
代入している変数が使えるようになるのはコード内で代入された後のタイミングになる。

アロー関数

ES6(ES2015)で追加された簡潔な関数記法

記述例

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

引数が一つの時、パラメータの括弧を省略可能

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

関数内の処理内容が1行のみで、それが返り値の場合、return と波括弧 {} を省略できる

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

特徴

  • 記述量が少ない
  • 機能がシンプル(後述)

違い

コンストラクタ

  • 通常の関数(関数宣言、関数式)
    new演算子を使ってコンストラクタを呼び出し、新しいオブジェクトを作成することができる
  • アロー関数
    コンストラクタを呼び出せない。

thisのスコープ

  • 通常の関数(関数宣言、関数式)
    呼び出し方(関数として呼ぶ・メソッドとして呼ぶ・newを使う・call/apply/bindを使う など)によってthisが変わる
  • アロー関数
    定義された時点のグローバルなスコープを継承する(レキシカルスコープ)

メソッド

  • 通常の関数(関数宣言、関数式)
    call、apply、bindメソッドを使用してthisの値を変更できる
  • アロー関数
    thisを動的に束縛しない(定義時のレキシカルスコープを参照する)ため、
    call、apply、bindメソッドでthisを変更しようとしても無視される

arguments変数

  • 通常の関数(関数宣言、関数式)
    argumentsオブジェクトに引数の配列がデフォルトで格納される
  • アロー関数
    argumentsオブジェクトが存在しない(代わりにレストパラメータ ...args を使用する)

ジェネレーター

  • 通常の関数(関数宣言、関数式)
    yieldで値を逐次返す、イテレーター(あるいはイテラブル)を実装する関数になる
  • アロー関数
    ジェネレーター(yield)に対応していない

Discussion

junerjuner

※ただしスクリプトをモジュールとして読み込んだり、strict modeを使用していると挙動が変わる

ブロックスコープを考慮するくらいの意味合い?


(代わりにレストパラメータ ...args を使用する)

近年だと arguments 使わない為に 関数宣言 / 関数式も 残余引数になりがちはある
(そういう意味では 「レストパラメータしか方法がない」 くらいのニュアンス?

例えば次の ESLint では arguments を使おうとするとエラーにする

https://eslint.org/docs/latest/rules/prefer-rest-params

uuuunnnniiuuuunnnnii

ありがとうございます

ブロックスコープを考慮するくらいの意味合い?

要するにはせやでした。モジュールの読み込みについて理解浅かったので学習しときます

近年だと arguments 使わない為に 関数宣言 / 関数式も 残余引数になりがちはある
(そういう意味では 「レストパラメータしか方法がない」 くらいのニュアンス?
例えば次の ESLint では arguments を使おうとするとエラーにする

最近の動向情報と資料有難いです
それ以前の問題ですが脳死でアロー関数使わないようこれを機に肝に銘じます