関数スコープ外からスコープ内の変数を取得できるか

Question

###前提・実現したいこと
初歩的な質問かもしれませんが、よろしくお願い致します。

以下のコードにおいて、console.log(aaa);がundefinedとならずに、function内の$('#test').find('.hoge').text();を取得する方法はございますか？

変数のスコープに関する知識は一応頭にあるつもりなのですが、このようにスコープ内の変数を取得したい、という場合はどのように書くのが良いか、お教えいただけるでしょうか？

###該当のソースコード

$('ul li').on('click', function () {
          var aaa = $('#test').find('.hoge').text();
          var bbb = $('#test').find('.hogehoge').text();
});
console.log(aaa); //undefined

Answer 1

スコープ以前に無理です。
なぜならaaaに値が入るのは「クリックされたとき」で、logを出力されるのは「クリック処理を登録するとき」だからです。

コード的には後ろに書かれているので処理順序がごっちゃになりますが、on('click')の中の処理が走るのはクリックされたとき、console.log(aaa)の処理が走るのはページが読み込まれたとき、なので、どうあがいてもクリックしたときの内容はページが読み込まれた時点では存在しません。

追記

ただ単に「最後にクリックされたliの内容」を保持しておきたいのでしたら、以下のようなコードがよいと思います。

$('ul li').on('click', function () {
          window.aaa = $('#test').find('.hoge').text();
          window.bbb = $('#test').find('.hogehoge').text();
});
// どこか別の処理のタイミングで
console.log(window.aaa);

windowというオブジェクトはページ全体で1つしか存在しないグローバルスコープ変数です。以下のコードは同義です。

// ①window変数にプロパティとして追加
window.aaa = 'test';

// ②変数宣言を一切せずいきなりaaaと宣言する
aaa = 'test';

ただし、あまりこういったグローバルな変数を使うのは推奨しません。処理の構造自体を少し考え直すほうがのちのちよい経験になるかと思います。

Comments

[退会済みユーザー]

いつも丁寧なご回答を有難うございます。グローバルな変数を使うことでしか実現は難しいのですね。だとすると、やはり処理の構造自体を考え直すべきかと思いました。
ちなみに、重ね重ねのご質問で大変恐縮なのですが、クリックしていない状態（ページを読み込んだ時）で```aaa```は存在（読み込み時に```$('#test').find('.hoge').text();```を取得している状態）しており、かつクリックの度に```aaa```の値（クリックの度に```$('#test').find('.hoge').text();```の値は変化する）が変わり、かつその```aaa```を```on('click')```の外で使用できるようにすることは可能なのでしょうか？

※コード部分を```で囲んだのですが、上手く表示されませんでした・・読みづらく申し訳ありません。

Answer 2

クリックしていない状態（ページを読み込んだ時）でaaaは存在（読み込み時に$('#test').find('.hoge').text();を取得している状態）しており、かつクリックの度にaaaの値（クリックの度に$('#test').find('.hoge').text();の値は変化する）が変わり、かつそのaaaをon('click')の外で使用できるようにすることは可能なのでしょうか？

どうせコード全体を$(function () { ... })で囲うと思うので、その中でaaaを宣言すればグローバル変数的に使うことができ、かつグローバルスコープを汚染しません。

$(function () { ... })で

var aaa = $('#test').find('.hoge').text();

とすれば、読み込み時にaaaの値をセットできます。

簡単なdemo

このような変数と表示の更新がいろんなところで起きるようなプログラムを作ろうとしているなら、reactなどのUIライブラリを使うとすっきりしますよ。

Answer 3

JavaScript はイベント時に処理を走らせることが多いので、別イベントで作成した値を使用したければその外側のスコープにある変数に格納するなど考えればよいです。

<div id="test">
  <div class="hoge">123</div>
  <div class="hogehoge">456</div>
</div>

var aaa = 'default';
var bbb = 'default';
$('ul li').on('click', function () {
          aaa = $('#test').find('.hoge').text(); // 123
          bbb = $('#test').find('.hogehoge').text(); // 456
});
console.log(aaa); // default
$('#test').on('click', function () {
          console.log(aaa); // 'ul li'が1回でもクリックされていたら 123、されてなかったら default
});

Answer 4

要するにクリックされた後でどこか別の処理で値をとりたいというのであれば
hiddenとかに渡せばいいんじゃないでしょうか。