💣
関数宣言、関数式、アロー関数
関数宣言
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
ブロックスコープを考慮するくらいの意味合い?
近年だと arguments 使わない為に 関数宣言 / 関数式も 残余引数になりがちはある
(そういう意味では 「レストパラメータしか方法がない」 くらいのニュアンス?
例えば次の ESLint では arguments を使おうとするとエラーにする
ありがとうございます
要するにはせやでした。モジュールの読み込みについて理解浅かったので学習しときます
最近の動向情報と資料有難いです
それ以前の問題ですが脳死でアロー関数使わないようこれを機に肝に銘じます