jQuery/JavaScriptでやった方がいいこと

初投稿は簡単に当たり前のことを書いてみます。

要素の有無判別

サンプル

$("a[href='^#']").on("click", function(e) {
  var $target = $(this.hash);
  if($target.length) {
    var offsetTop = {scrollTop: $target.offset().top};
    $("html,body").animate(offsetTop, 1000);
    e.preventDefault();
  }
});

リンクをクリックしてハッシュを取得後、そのハッシュの要素が存在しているかをチェックしてアニメーションでスクロールさせます。
要素が存在しない場合はなにもしません。

引数のチェック

引数がある場合とない場合の処理を分ける。
###サンプル

var func = function(arg) {
  if(arg != null) {
    console.log(arg);
  } else {
    console.log("arg is null");
  }
};
func();

arg != nullでargがnullまたはundefinedのみチェックされる。
単純に!argにするとargが0や空文字列の場合にも引っかかってしまうので要注意。
もっとも、明示的に引数にnullを渡したい場合はarg === undefinedの方がいいかも。

数値化・文字列化

渡された値を数値化・文字列化させる。

###サンプル

var num = function(arg) {
  var n = +arg; // 数値化
  n = n+20; // 10+20
  console.log(n); // 30
};
var str = function(arg) {
  var s = ""+arg; // 文字列化
  s = s+20; // "10"+20
  console.log(s); // "1020"
};
num("10"); // 文字列の10を渡す
str(10); // 数値の10を渡す

+argで数値化させます。""+argで文字列化させます。
ちなみにnum("hoge");と数字以外の文字列を渡した場合はNaNになりますので、数字以外の文字列が渡った場合は0にするようにすると以下のようになります。

var num = function(arg) {
  var n = +arg||0; // 数値化に失敗したら0を入れる
  n = n+20; // 0+20
  console.log(n); // 20
};
num("hoge"); // 数字以外の文字列を渡す

初期値のようなものが存在するならば、0ではなくそれをセットするようにするといいかもしれません。

おまけ

有名な方法だけど、自分が結構やる方法のforループ文。

var $classEl = $(".classname");
var len = $classEl.length;
for(var i = len; i--;) {
  console.log(i); // 要素数の分だけデクリメントされ、0でループが終了する
}

もちろん逆順でループを回しても問題ない場合のみ使える方法。