【備忘録：jQuery】ブロックスコープ

関数に引数について

今回csvを読み込みそれをJSONに変換しフロント部分を対応していたのですが、csv読み込みのajax内のdone内で自分で書いていた、変数がなぜ読まれるのかと思っていたので備忘録です。

ソース

hoge.js

for (var num = 0; num < jsonArray.length; num++) {

  if(jsonArray[num].hogehoge === '1'){
    htmlOutPut();//①これが呼び出す関数
  }

//ここが呼び出される関数
  function htmlOutPut() {
    const $jsonHoge = $('#hogehoge');

    let $html = '<li>';
        $html += '<a href="#" data-modal="' + num + '">';//②ここのnumが呼ばれているのが不思議だった
        $html += '<p>' + jsonArray[num].ttl + '</p>';//②ここのnumが呼ばれているのが不思議だった

//以下省略

    }
  }

この②ように「for内で関数呼び出しをしているため参照できるだろうな」と思ってました。

ブロックスコープ

var、letについて以下参照させていただいたのですが、
https://qiita.com/masarufuruya/items/096e51c3e4c36c86ae27

{}内のブロックのみで使うブロックスコープが作れるか作れないかが今回の要因だったようです。

hoge.js

for (var num = 0; num < jsonArray.length; num++) {
//ここのnumの宣言がvarのため、ブロックスコープが作れない
  if(jsonArray[num].hogehoge === '1'){
    htmlOutPut();//
  }

  function htmlOutPut() {
    const $jsonHoge = $('#hogehoge');

    let $html = '<li>';
        $html += '<a href="#" data-modal="' + num + '">';//ブロックスコープが作れないのでここでアクセスできた
        $html += '<p>' + jsonArray[num].ttl + '</p>';//ブロックスコープが作れないのでここでアクセスできた

もしこれが以下のように、letでの宣言であればブロックスコープとなりアクセスができませんでした。

hoge.js

for (let num = 0; num < jsonArray.length; num++) {
//宣言がletのため、ブロックスコープが作れる
  if(jsonArray[num].hogehoge === '1'){
    htmlOutPut();//
  }

  function htmlOutPut() {
    const $jsonHoge = $('#hogehoge');

    let $html = '<li>';
        $html += '<a href="#" data-modal="' + num + '">';//ブロックスコープなのでアクセスできない
        $html += '<p>' + jsonArray[num].ttl + '</p>';//ブロックスコープなのでアクセスできない

正直、上記の状態でアクセスできたのですが、
- どこで宣言しているものを参照しているのかがわからなくなる
- コードの保守性が落ちる
ということもあり、関数の引数で渡すようにしました。

引数

jsonArray[num]自体はそのまま関数内で使用したかったので、

hoge.js

for (let num = 0; num < jsonArray.length; num++) {
  if(jsonArray[num].hogehoge === '1'){
    htmlOutPut(jsonArray[num]);//jsonArray[num]を引数で渡す

  function htmlOutPut(jsonNum) {//渡された値を使用する
    const $jsonHoge = $('#hogehoge');

    let $html = '<li>';
        $html += '<a href="#" data-modal="' + num + '">';
        $html += '<p>' + jsonNum.ttl + '</p>';//先程同じように指定するが、引数の値を参照させる

  }

このように、
・呼び出す関数の引数に、jsonArray[num]を渡し、関数で値を使用する
ということで対応しました。

ただ、変数numだけ（カウントされた数字が格納された変数）も使用したかったので、

hoge.js

for (let num = 0; num < jsonArray.length; num++) {
  if(jsonArray[num].hogehoge === '1'){
    htmlOutPut(jsonArray[num], num);//jsonArray[num]とnumを引数で渡す

  function htmlOutPut(jsonNum, index) {//渡された値を使用する
    const $jsonHoge = $('#hogehoge');

    let $html = '<li>';
        $html += '<a href="#" data-modal="' + num + '">';//ここはindexで参照する
        $html += '<p>' + jsonNum.ttl + '</p>';//ここはjsonNumで参照する

  }

上記のように、引数を２つにし関数内に渡してあげることで解決しました。