javascript 関数(function)を変数を使って実行する

作成日 2021.01.14
更新日 2022.08.03
javascript

javascriptで、関数(function)を変数を使って実行する方法を記述してます。

1. 環境
2. 作成した関数を変数で実行
3. アロー関数を使用

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.134

Javascript サンプル集はこちら

作成した関数を変数で実行

以下のように、変数を関数名として実行することはできません。

function hoge() {
  console.log('hoge');
}

// strにhogeを代入
const str = 'hoge';

str(); // Uncaught TypeError: str is not a function

ただし、windowを利用すれば変数を関数名として利用することができます。

function hoge() {
  console.log('hoge');
}

const str = 'hoge';

window[str](); // hoge

下記でも、可能です。

function hoge() {
  console.log('hoge');
}

const str = [hoge];

str[0](); // hoge

‘use strict’を指定してもエラーにはなりません。

use strictについて

これを利用すれば、以下のように一括で複数の関数を実行することが可能になります。

function hoge_1() {
  console.log('hoge1');
}

function hoge_2() {
  console.log('hoge2');
}

for (var i = 1; i < 3; i++) {
   window['hoge_'+i]() // hoge1 hoge2
}

// または下記

const arr = [hoge_1, hoge_2]

for (let i = 0; i < 2; i++) {
  arr[i](); // hoge1 hoge2
}

アロー関数を使用

アロー関数の場合は、windowを使用するとエラーになりますが、

const hoge_1 = () => {
  console.log('hoge1');
}

const hoge_2 = () => {
  console.log('hoge2');
}

for (let i = 1; i < 3; i++) {
   window['hoge_'+i]()　// Uncaught TypeError: window[("hoge_" + i)] is not a function
}

配列を使用すれば、エラーにはなりません。

const hoge_1 = () => {
  console.log('hoge1');
}
const hoge_2 = () => {
  console.log('hoge2');
}

const arr = [hoge_1, hoge_2]

for (let i = 0; i < 2; i++) {
  arr[i]();　// hoge1 hoge2
}

アロー関数の使い方