Javascript | 関数名にインデックス番号を付け加えたい

Question

forEachでイベントを登録する際に、インデックス番号を関数の末尾に付けようと思いましたが失敗しました。
以下が失敗したコードです。

paginationControl.forEach(function (el,i) {
        el.addEventListener('click', function () {
                app.ticker.add(slide + i); //エラー部分 slide0が入るようにしたかった
        })
    })
function slide0(){
        console.log('slide0が実行されました');
    }
function slide1(){
        console.log('slide1が実行されました');
    }

調べたところeval()にたどり着き、以下では成功しましたが、非推奨とのことで避けたいと思います。

paginationControl.forEach(function (el,i) {
        el.addEventListener('click', function () {
                app.ticker.add(eval('slide' + i)); //とりあえず成功
        })
    })
function slide0(){
        console.log('slide0が実行されました');
    }
function slide1(){
        console.log('slide1が実行されました');
    }

さらに調べたら配列に入れることを思いつき、最終的に以下になりました。

paginationControl.forEach(function (el,i) {
        el.addEventListener('click', function () {
                app.ticker.add(slideAction[i]); //とりあえず成功
        })
    })
const slideAction = [slide0,slide1];
function slide0(){
        console.log('slide0が実行されました');
    }
function slide1(){
        console.log('slide1が実行されました');
    }

質問したいことは以下の2点です。
1.この記述に問題はありますか？ (一般的ではない、スマートじゃないなど)
2.最初のコードで、関数名に変数やインデックス番号を結合することはできないのでしょうか？
この疑問は根本的な理解ができていないはずなので、具体的でなくて構いませんので、◯◯で調べろ等ご助言を頂けないでしょうか。

よろしくお願いいたします。

Comments

[hoshi-takanori]

スマートじゃないに一票。

Answer 1

1. について

要素が関数の配列があってもよいが、配列に入れるのであれば、個々の関数の名前に 0 だったり　 1 だったりのインデクスが含まれている必要はないのでは？

1. について

そやねー。答えになっとるかわからんが例を挙げときますー。ページネーションゆうことなら、関数名をたとえばprevSlide()とnextSlide()にしとくやんか。ほんで、これらの関数を 'prev' だったり 'next' だったりの文字列を使って参照することは、こないにすればできるで。

まずは、こないなオブジェクト

const slideActions = {
  prevSlide: () => {
    console.log('prevSlideが実行されました');
  },
  nextSlide: () => {
    console.log('nextSlideが実行されました');
  }
};

にスライドの動作をまとめておくやんか。ほんで HTMLがたとえばこう

<div class="pagination">
  <button name="prev">前へ</button> 
  <button name="next">次へ</button> 
</div>

やったら、 paginationControls ゆう変数に

const paginationControls = document.querySelectorAll('.pagination > button');

とかやって、2つのボタンを入れとくやん。
で、ボタンのname属性の　'prev' や 'next' から、該当するアクションの関数を参照するには

paginationControls.forEach(function (el) {
  el.addEventListener('click', function () {
    app.ticker.add(slideActions[`${el.name}Slide`]);
  });
});

とすればええ。

ちなみに、forEach(function (el, i) で取れてくる　i を使いたいのやったら、slideActionsのプロパティである関数名を

  slide0: () => {
    console.log('slide0が実行されました');
  },
  slide1: () => {
    console.log('slide1が実行されました');
  },

とかにして、

app.ticker.add(slideActions[`slide${i}`]);

にすればいいわけやが、これだとHTML側でコントロール要素の配置順が変更されたら、JS側でも、paginationControls に入ってくる順番が変わるのやから、 slide0とslide1を入れ換えないとあかんようになって、あまりよろしくない気もするで。デザインゆうんは頻繁に変更が入るもんやしな。

これで答えになっとる？ゆうんがイマイチ不安やが、参考にしたってや〜

Comments

[Onigirichan]

回答ありがとうございます！
name属性を付与し、slideActions[`${el.name}Slide`]で取ってくるのは大変参考になりました。
具体例を提示いただいたお陰で簡潔なコードが書けそうです。

Answer 2

1.この記述に問題はありますか？

配列で問題はありません。
配列以外から関数を使わないなら関数は無名で良いので、const slideAction = [function() { ... }, function() { ... }]; とするとより簡潔になります。

インデックスを引数にするのも良いですね。

    app.ticker.add(slideAction.bind(null, i))
...

function slideAction(i) {
  ...

2.関数名に変数やインデックス番号を結合することはできないのでしょうか？

evel()以外に手段はないと思います。
一般的に、実行時に変数名や関数名を作ろうとするのは悪手です。

Comments

[Onigirichan]

回答ありがとうございます！
本トピックへの簡潔な回答かと思いましたので、ベストアンサーにさせて頂きました。

>実行時に変数名や関数名を作ろうとするのは悪手です。
肝に命じておきます。

Answer 3

引数にインデックス番号与えた関数を呼びましょう。

＃んで関数の中で条件分岐

Comments

[Onigirichan]

回答ありがとうございます！