Functions | Frontend Practical Guide

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`Function`	1	12	1	1	18	1
`Function.@@hasInstance` [Symbol.hasInstance]() は Function インスタンスのメソッドで、コンストラクター関数がオブジェクトをそのコンストラクターのインスタンスの一つであると認識するかどうかを決定するデフォルトの手続きを定義します。これは、instanceof 演算子から呼ばれます。	50	15	50	10	50	10
`Function.Function` Function() コンストラクターは、新しい Function オブジェクトを生成します。コンストラクターを直接呼び出すと動的に関数を生成することができますが、セキュリティや、 Global_Objects/eval と似た性能の（ただし、はるかに重要性の低い）問題を抱えます。ただし eval とは異なり、 Function コンストラクターはグローバルスコープで実行される関数のみを生成します。	1	12	1	1	18	1
`Function.apply` apply() メソッドは、 this 値を指定して関数を呼び出し、 arguments は配列 (または配列風オブジェクト) として提供します。	1	12	1	1	18	1
`Function.apply.generic arrays as arguments` ES 5.1: `引数`としての一般的な配列のようなオブジェクト	17	12	4	6	18	6
`Function.bind` bind() は Function インスタンスのメソッドで、新しい関数を生成し、呼び出し時に、 this キーワードを指定された値に設定し、指定された引数の並びを、新しい関数が呼び出された際に指定されたものより前にして呼び出します。	7	12	4	5.1	18	6
`Function.call` call() は Function インスタンスのメソッドで、 this の値と、独立して提供された引数によって関数を呼び出します。	1	12	1	1	18	1
`Function.length` length は Function インスタンスのプロパティで、関数が期待する引数の数を示します。	1	12	1	1	18	1
`Function.length.configurable true` 設定可能: true	43	12	37	10	43	10
`Function.name` name は Function オブジェクトの読み取り専用プロパティで、作成時に付けられた関数の名前、もしくは無名関数の場合は anonymous または '' （空文字列）を返します。	15	14	1	6	18	6
`Function.name.configurable true` 設定可能: true	43	14	38	10	43	10
`Function.name.inferred names` 無名関数の推論名	51	79	53	10	51	10
`Function.toString` toString() は Function インスタンスのメソッドで、関数のソースコードを表す文字列を返します。	1	12	1	1	18	1
`Function.toString.toString revision` Function.prototype.toString`リビジョンを実装する。	66	79	54	17	66	17
その他
`javascript.functions` 一般的に言うと、関数とは外部 (再帰の場合は内部) から呼び出すことのできる「サブプログラム」です。プログラムそのもののように、関数は関数本体 (function body) と呼ばれる連続した文で構成されます。関数には引数として値を渡すことができ、関数は値を返すことができます。	1	12	1	1	18	1
文法
`arguments` arguments は配列風 (array-like) オブジェクトであり、関数に渡された引数の値を含んでおり、関数内からアクセスすることができます。	1	12	1	1	18	1
`@@iterator` [Symbol.iterator]() は Functions/arguments オブジェクトのメソッドで、イテレータープロトコルを実装し、 arguments オブジェクトが反覆可能を期待するほとんどの構文（スプレッド構文や Statements/for...of ループなど）で利用できるようにするためのものです。これは、 arguments オブジェクトのそれぞれのインデックスの値を返す配列イテレーターオブジェクトを返します。	52	12	46	9	52	9
`length` arguments.length データプロパティは、関数に渡された引数の数が入ります。	1	12	1	1	18	1
`arrow functions` アロー関数式は、従来の関数式の簡潔な代替構文ですが、意味的な違いや意図的な使用上の制限もあります。	45	12	22	10	45	10
`trailing comma` パラメータの末尾のカンマ	58	12	52	10	58	10
`block level functions` ブロックレベルの機能	49	12	46	10	49	10
`default parameters` 関数のデフォルト引数は、値が渡されなかった場合や undefined が渡された場合に、名前付き引数を既定値で初期化するためのものです。	49	14	15	10	49	10
`destructured parameter with default value assignment` デフォルト値が割り当てられた構造化されていないパラメータ	49	14	41	10	49	10
`parameters without defaults after default parameters` デフォルト・パラメータの後にデフォルトのないパラメータ	49	14	26	10	49	10
`get` get 構文は、オブジェクトのプロパティを関数に結びつけ、プロパティが参照された時に関数が呼び出されるようにします。これはクラスでも使用できます。	1	12	1.5	3	18	1
`computed property names` 計算されたプロパティ名	46	12	34	9.1	46	9.3
`method definitions` メソッド定義は、オブジェクト初期化子内で関数プロパティを定義するための簡略化された構文です。また、クラス内でも使用できます。	39	12	34	9	39	9
`async methods` 非同期メソッド	55	15	52	10.1	55	10.3
`generator methods not constructable` ジェネレータメソッドはコンストラクタブルではない（ES2016）	42	13	43	9.1	42	9.3
`rest parameters` 残余引数構文により、関数が不定数の引数を配列として受け入れることができ、可変長引数関数を JavaScript で表すことができます。	47	12	15	10	47	10
`destructuring` 休養パラメータの再構築	49	79	52	10	49	10
`set` set 構文は、あるオブジェクトプロパティを、プロパティに設定しようとしたときに呼び出される関数に結びつけます。これはクラスでも使用できます。	1	12	1.5	3	18	1
`computed property names` 計算されたプロパティ名	46	12	34	9.1	46	9.3
`trailing commas in functions` 関数パラメータの末尾のカンマ	58	14	52	10	58	10
演算子
`function` function キーワードは、式の中で関数を定義するために使用されます。	1	12	1	1	18	1
`trailing comma` パラメータの末尾のカンマ	58	14	52	10	58	10
ステートメント
`function` function 宣言は、新しい関数と指定された名前のbindingを作成します。	1	12	1	1	18	1
`trailing comma in parameters` パラメータの末尾のカンマ	58	14	52	10	58	10

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

// Default arguments
function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

// Rest arguments
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

sum(1, 2, 3, 4); // 10

ライブデモ

デフォルト引数の活用

引数が指定されない場合にデフォルト値が適用される様子をシミュレートします。

プレビュー全画面表示

レスト引数による集計

不特定の数の引数をまとめて処理するレスト引数の動作を確認します。

プレビュー全画面表示

コールバック関数の非同期実行

関数を引数として渡し、特定の処理が完了した後に実行する仕組みをシミュレートします。

プレビュー全画面表示

実務での使いどころ

Functions の活用

Function オブジェクトは関数についてのメソッドを提供します。

注意点

特になし。すべての主要ブラウザで安定して動作する。

参考リンク

MDN Web Docs — Functions

対応ブラウザ

基本構文

ライブデモ

デフォルト引数の活用

レスト引数による集計

コールバック関数の非同期実行

実務での使いどころ

Functions の活用

注意点

アクセシビリティ

参考リンク