メシのタネ

めしのたねになるIT情報配信サイト


【jQuery】clickとかに書いた無名関数の中の変数の値を変更して扱う方法

,

  1. Webプログラム
  2. javascript
  3. 【jQuery】clickとかに書いた無名関数の中の変数の値を変更して扱う方法

jQuery11
この間Wikipedia読んでてたら、JavaScriptってジャバスとも略すと書いてあって
一瞬ジャバスwwwwwwwwwwwwwwwなんて思ったんですが、それも悪くないなと意識が変わりました。

JavaScriptで7音節、JSで4音節必要なのに対して、
ジャバスは3音節で済むため、少しずつ使用範囲が拡大している。

wikipediaより転載

そのうちトレンディーな略し方はジャバスになるかもしれませんね。
チェックしておきましょう。

jQuery使ってて昔よく思ってた事

無名関数の中で変更した変数の扱い方が分からなくて
clickでフラグ変えたりとかできないもんだと思ってました。
だからその後処理書きたければ、全てこのclickの中の無名関数で
処理していかないとダメなんだと思ってました。


jQuery(function(){

     var a;

     jQuery("button").click(function(){
              a = "a";
     });

     console.log(a); //undefined
});

こうやった際にaの中身が未定義になるからです。

何故未定義になるのか

クリックイベントが実行されたからといって、
もう一回jQuery関数が実行されるわけではないです。
JacaScriptの実行順序を見てもらえると、何となく分かる気がします。

JavaScriptの実行順序

実行順序図
この図のようになってます
これに加えて補足すると、

HTMLを解釈してる間に、script属性が最初に読み込まれて
次にasync属性が読み込まれ解釈が終わった時にdefer属性が読み込まれます。

async,defer属性についてはこのサイトが参考になります。

無名関数で定義しなおした変数を扱うには?

これだって回答出すととぶち殺されそうなので、
こういう風に使ってますと書いておきます。


          jQuery(function(){

               var a;

               jQuery("#clickbutton").click(function(){
                    a = "a";
               });


               jQuery("#clickbutton2").click(function(){
                    console.log(a); //変数aの中に"a"が入っている

                    if(a == "a")
                    {
                         a = "b";
                         console.log(a); //変数aの中の値が"b"になる!
                    }
               });
               
          });

私はこういう風に書いてますが、
オライリーの6版の56ページ3.10変数のスコープの所で、
グローバル変数でvarを省略しても良いけどローカルではvarを宣言してねって書いてあります。

これをやるとローカルスコープで宣言された変数の値が変わると、
グローバルスコープで宣言された変数の値も変わるためです。

どうすれば一番良いんだろう・・・と今は新しい問題に悩んでます。
それなので、優しく教えてくれる人を絶賛募集中です!

と、とにかく今日一番言いたかったのは、クリックイベントが実行された時に変わった変数は
別のイベントが実行された時に使えるよってことが言いたかったです!


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

若い頃、「仕事中にハマったこと」や「誰かに共有したい技術的な気づき」をアウトプットしたくてブログを始めましたが、勢い任せでよく分からない記事を大量生産し、あえなく飽きて終了。

改めて今、キャリア15年分の経験や知識が、これからITエンジニアを目指す方や、同じような課題で悩んでいる現役エンジニアの「メシのタネ」になるような記事を残したいと思っています。
※過去の記事は見ると精神が崩壊するため、そっとしておいてください。

🛠 経歴という名の珍道中:
文系Fラン → 広告営業 → Web営業 → 通信営業 → Web進行 → 出版 → Web媒体運用 → ソフトウェアハウス → SES → フリーランス

専門教育も受けず、転職歴も多数。履歴書はまるで時系列の事故記録のようですが、試行錯誤を重ね、なんとかエンジニアとして食べています。

このブログでは、そんな「履歴書クラッシャー型エンジニア」が送る、
名古屋一敷居の低い、実務に役立つ技術ブログを目指します。

Laravel
Laravel Eloquent sync 系メソッド完全攻略 — 安全な同期のための 5 大リスクと回避策New!!
Laravel
belongsToMany 実戦ガイド ── “withPivot”で追加カラムを守る 中間テーブル設計チェックリストNew!!
PHP
魔王と行く! / Interface / Polymorphism / Ontology 深淵ガイドNew!!
Laravel
Laravel 12、「コード 1 行も書き換えず未来へ」──静かな革命の手順書
Laravel
LaravelのMiddlewareって意味あるの?仕組み・使いどころ・やらかしまで整理してみた
Laravel
ServiceProviderって何してるの?DIの背後で動いてるやつの正体