JavaScript | 関数を動的に生成する方法

JavaScriptで関数を動的に生成する方法とサンプルコードを紹介しています。

関数を動的に生成するサンプルコード

関数を動的に生成する場合、関数リテラルという書式を利用する事が可能です。

以下はサンプルコードになります。

let x = 5
const new_function = function (num) {
	return num * x
}

let response = new_function(10)

console.log(response)
// 50

ただ、この記述では関数の生成後に x の値に変化があった場合、関数内の x の値も新しいものを参照してしまうため、目的の動作が得られないかもしれません。

let x = 5
const new_function = function (num) {
	return num * x
}

x = 2
let response = new_function(10)

console.log(response)
// 20

変数の値を関数の生成時のままにしたい場合、他にも方法はありますが Functionコンストラクタで関数オブジェクトを生成する方法があります。

以下のサンプルコードの場合、x の値が5から2に変更された後に関数を呼び出していますが、関数内では5が反映されています。

let x = 5
const new_function = new Function('num', `return num* ${x}`)

x = 2

let response = new_function(10)

console.log(response)
// 50

new Function()構文では引数に関数で扱う必要な引数を記述していき、最後に引数に関数の処理内容を記述します。

上記のサンプルコードでは1行ですので支障はあまりありませんが、複数行の記述を容易にするためバッククォートで囲ってテンプレートリテラルとします。
また、テンプレートリテラル中では変数を ${変数名} の記述方法で内包できます。

let fruit = `apple
banana
${name}`

Posted by Yousuke.U

まだ、コメントがありません