JavaScriptでのグローバル変数について

Question

グローバル変数は使わないほうが良いという記事を読みまして一つ質問があります。

以下のようにajaxで帰ってきた値をグローバル変数と比較して比較結果に応じて true か false を返し、今回帰ってきた値は次回の比較対象としたい為、グローバル変数 data_st に代入しておく。

このような場合はグローバル変数を使わずにするとなるとどうすればよいのでしょうか

data_st = '';

function ajaxResponse(response)
{
  var data = JSON.parse(response||null);
  var result = true;
 
  if (data_st === data) {//グローバル変数 data_st の値とajaxにより帰ってきた値が等しい場合。
      result = false;
   }

  data_st = data;//次回帰ってくる値と今回帰ってきた値を比較するため、グローバル変数 data_st に今回帰ってきた値を代入

  return result;
}

Answer 1

とりあえず手っ取り早いのは、無名関数で囲んでしまう方法です。

(function() {
  // data_stはこの無名関数の中でしか参照できない。
  // この無名関数は、ファイルを読み込んですぐに実行される。
  var data_st = '';

  function ajaxResponse(response) {
    var data = JSON.parse(response||null);
    var result = true;

    if (data_st === data) {
      result = false;
    }

    data_st = data;

    return result;
  }
})();

data_stをさらに他の場所でも使いたいのであれば、オブジェクトのプロパティとして抱えるのが良いでしょう。

var AjaxStore = {
  data_st: '',
  ajaxResponse: function(response) {
    var data = JSON.parse(response||null);
    var result = true;

    if (this.data_st === data) {
      result = false;
    }

    this.data_st = data;

    return result;
  }
};

// 何かajax処理
AjaxStore.ajaxResponse(response);

// プロパティ参照
if(AjaxStore.data_st === '100') {
  // 何か処理
}

JavaやRubyでいうクラスっぽく操作したい場合は、関数オブジェクトを利用すると良いでしょう。

function AjaxStore() {
  this.data_st = '';
}
AjaxStore.prototype.ajax = function() {
  var response = // 何かajax処理の結果

  if(this.data_st === response) {
    return false;
  }
  this.data_st = response;
  return true;
}

var store = new AjaxStore();
store.ajax();

if(store.data_st === 'test') {
  // 何か処理
}

Comments

[退会済みユーザー]

無名関数って知らなかったです恥ずかしい限りですが勉強になりましたありがとうございます(*´ڡ`●)

[otn]

2番目の例だと、AjaxStoreがグローバル変数、3番目の例だと、store がグローバル変数で、
> このような場合はグローバル変数を使わずにするとなるとどうすればよいのでしょうか
に答えてないと思います。
1番目の例が、質問目的を満たすのかはわからない。

[philomagi]

> otnさん
とりあえず即時関数を使う方法を書いてから、「ついでにオブジェクトや関数の使い方も紹介しておこうかな」と考えて2,3番目も書いていましたが、ご指摘の通り質問に対する回答になっていませんね。
「グローバル変数を使っても、こういう方法（で名前の衝突するリスクを下げる手段）もありますよ」といった一言を添えた方が正確だったかもしれません。

Answer 2

「グローバル変数を使わない方が良い」というのは手段であって、何故グローバル変数を使わない方が良いと言われるのかの理由というか目的をしっかり理解することが必要です。
目的を忘れて手段だけ丸暗記するのは駄目です。
極論を言うと、目的がちゃんと果たせていれば、手段などどうでも良い。

グローバル変数を使っていますが、topoさんの回答の2番目、3番目などが良いと思います。
この例だと、保持すべきデータが1つだけなのであまりメリットがピンと来ないかもしれませんが。

Answer 3

この実装で良いんじゃないかな
javascriptならグローバル変数にそこまで固執する必要はあまりないんじゃない？

Comments

[退会済みユーザー]

色々と記事を読んでみて気になってしまったのですが…そうなんですか(*´ڡ`●)(ﾟ∀ﾟ)ありがとうございます

[philomagi]

javascriptは油断するとあちこちにグローバル変数が散らばって衝突のリスクが高まるので、むしろグローバル変数には神経質になるべきだと思います。

Answer 4

適当なinputを用意しておいてデータを保持しておけばよいような

Comments

[退会済みユーザー]

なるほどそう言われればそういう事もできたのでした(*´ڡ`●)
忘れてましたありがとうございました

Answer 5

オブジェクト指向やデザインパターンを勉強してみてはいかがでしょうか。

どのような機能かご提示のコードだけではわかりませんが、大概の場合専用のClassを作って機能させます。

追記：
フレームワークやライブラリなどを使わずに、
スケーリングしない小規模なアプリケーションなどでしたらグローバル変数使っても大丈夫なんですけどね！

Comments

[退会済みユーザー]

今回は小規模も小規模なので大丈夫ですかね。
でもオブジェクト指向も学んでいきたいです
ありがとうございました(*´ڡ`●)