【Javascript】「var」はなるべく一つにまとめよう


YUI CompressorでJavascriptを圧縮する | blog.delphinus.dev」で書いた YUI Compressor で Javascript ファイルを圧縮するといつも次のような警告文が出る。

[WARNING] Try to use a single 'var' statement per scope.

ググって調べてみると次のリンクがヒットした。

Try to use one var statement per scope in JavaScript
http://wonko.com/post/try-to-use-one-var-statement-per-scope-in-javascript

つまり、一つのスコープ内で複数の var を使うのはリソースの無駄になるというのだ。リンク先のをそのままコピーすると、

悪い例

function getElementsByClassName(className, tagName, root) {
  var elements = [];
  var root     = root || document;
  var tagName  = tagName || '*';
  var haystack = root.getElementsByTagName(tagName);
  var regex    = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)');

  for (var i = 0, length = haystack.length; i < length; ++i) {
    var el = haystack[i];

    if (el.className && regex.test(el.className)) {
      elements.push(el);
    }
  }

  return elements;
}

良い例

function getElementsByClassName(className, tagName, root) {
  root    = root || document;
  tagName = tagName || '*';

  var elements = [],
      haystack = root.getElementsByTagName(tagName),
      length   = haystack.length,
      regex    = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)'),
      el, i;

  for (i = 0; i < length; ++i) {
    el = haystack[i];

    if (el.className && regex.test(el.className)) {
      elements.push(el);
    }
  }

  return elements;
}

記事のコメントには、こんな最適化じゃ目に見える差なんて出ないよ、なんて意見もあり、どちらが正しいのかよくわからない。しかし、関数の一番最初で変数を全部宣言するなんて、いかにも古臭い言語という感じでなんかやだな。

コメントを残す