JS--Functionコンストラクタ

Functionコンストラクタを使って関数を定義する

 

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

【functionコンストラクタを使った関数の定義】

Function コンストラクタを使って関数を定義する方法は次のような書式を使用します。
let 変数名 = new Function('引数1', '引数2', ..., '実行する処理');

 Function コンストラクタを使用する場合は関数名は使用しません。
new Funciton のあとの ( から ) の間に引数を指定します。引数は文字列で指定する点に注意してください。
最後に関数が呼ばれたと記事実行する処理を同じように文字列として指定します

new は省略可能なので次のように記述することもできます。
Function('引数1', '引数2', ..., '実行する処理');

引数の部分は一つ一つ記述する代わりに複数の引数をカンマ(,)で区切って一つの文字列の中で記述することもできます。
Function('引数1,引数2,引数3', '実行する処理');

関数で引数を受け取らない場合は引数の部分は省略可能です。ただ関数が呼ばれた時に実行する処理は必ず記述してください。
new Function('実行する処理');

関数が呼ばれた時に複数の処理を実行する必要がある場合は、セミコロン(;)で区切って一つの文字列の中で記述してください。
new Function('引数', ..., '実行する処理1;実行する処理2;実行する処理3');

【Function コンストラクタを使って定義した関数を呼び出す】

・書式
let 変数名 = new Function('引数', ..., '実行する処理');
変数名(引数, ...);

関数を呼び出すには関数を代入した変数名を記述したあとで ( と ) の間に関数に渡す引数を記述します。複数の引数がある場合にはカンマ(,)で区切って記述して下さい。引数が無い場合には何も記述しなくてもいいのですがその場合でも ( と ) は記述する必要があります。

サンプル

let dispTotal = new Function('x', 'y', 'let sum = x + y;return sum');

let result = dispTotal(3, 4);
console.log(result);実行 7

関数は 2 つの引数を受け取り、 2 つの引数を加算した結果を関数の呼び出し元に返しています。関数を呼び出す側は 2 つの値を指定して関数を呼び出し、その結果を受け取ります。

 

JS--アロー関数式

アロー関数式

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

【アロー関数式を使った関数の定義】
アロー関数式を使うことで関数リテラルによる関数定義をより簡略化して記述することができます。

 

関数リテラルの場合

let 変数名 = function(引数1, 引数2, ...){
  実行される処理;
  ...

  return 戻り値;
};

アロー関数式の場合

let 変数名 = (引数1, 引数2, ...)　=> {
  実行される処理;
  ...

  return 戻り値;
};

アロー関数式でも関数名は記述しませんので、関数リテラルと同様に変数に代入して利用します。またアロー関数式では function も記述せず、代わりに関数のブロックの前に => を記述します。

 

サンプル

let dispTotal = (x, y) => {
  return x + y;
};

let result = dispTotal(3, 4);
console.log(result);実行
7

アロー関数式は簡潔に関数を定義できることから、関数を引数として渡す場合で直接関数を記述する場合などに使用すると便利です。

function dispNum(x, y, func){
  console.log(func(x, y));
}

dispNum(7, 3, (x, y) => (x + y) / 2);実行する 5

【アロー関数式を使う場合の注意点】
アロー関数式を使う場合、注意点が二つあります

一つ目はアロー関数式を使って定義した関数内では arguments オブジェクトが使用できません。

サンプル

let dispTotal = () => {
  let sum = 0;
  for (let i = 0; i 実行 Uncaught ReferenceError: arguments is not defined

注意点の二つ目は戻り値としてオブジェクトリテラルを返す場合です

アロー関数式の場合、関数ブロック内で実行する処理が return 文だけだった場合、
ブロックをあらわす { と } 、そして return も省略して次のように記述することができました。
(x, y) => x + y;
しかし、この時戻り値がオブジェクトリテラルだった場合、 {プロパティ名:値} と記述する代わりに全体を括弧で囲んで ({プロパティ名:値}) と記述する必要があります。
(x, y) => ({name:x, old:y});