よくミスるやつ.js

//////////////////////////////////////////////////////////////////////////
//
//@title タイトル
//@description 説明
//@include http://*
//@require http://...
//@private
//
//作った人: Awn(@Awn_tw)
//
//改定履歴
//-201xxxxx(ver 1.0.0): 新規作成
//
//諸注意
//-ご利用は自己責任でお願いします。
//-スクリプトは予告なく修正または廃止されることがあります。
//-コンソールでしか動かない、と思います。
//-悪用は厳禁です。
//-改造改良改悪はご自由にどうぞ。
//
//////////////////////////////////////////////////////////////////////////

/********************************************************/
/*[凡例]
/********************************************************/

/*--------------------------------*/
//大見出し
/*--------------------------------*/

/*----------------*/
//中見出し
/*----------------*/

/* 一行見出し */

//小見出し

//TODO:

/********************************************************/


/*--------------------------------*/
// 変数とエラーとtypeof
/*--------------------------------*/
//宣言:
var a = 1;
var b;
//var c;

//呼び出し:
a;//=> 1
b;//=> undefined
c;//=> Uncaught ReferenceError: c is not defined(…)

//typeof:
typeof(a);//=> "number"
typeof(b);//=> "undefined"
typeof(c);//=> "undefined"
typeof(1);//=> "number"
typeof("");//=> "string"
typeof([]);//=> "object"
typeof({});//=> "object"
typeof(function(){});//=> "function"
typeof((function(){})());//=> "undefined"
typeof((function(){return 1;})());//=> "number"
typeof((function(){return function(){};})());//=> "function"
typeof(0);//=> "number"
typeof(-0);//=> "number"
typeof(+0);//=> "number"
typeof(true);//=> "boolean"
typeof(false);//=> "boolean"
typeof(undefined);//=> "undefined"
typeof(null);//=> "object"
typeof(/abc/);//=> "object"



/*--------------------------------*/
// よくやるミス
/*--------------------------------*/

/*----------------*/
//スプリットをチェーンでつなぎまくって値を取得しようとする
/*----------------*/
"ab-c,de-fg,hi-jk-l".split(",")[1].split("-")[2].split("")[0];//=> Uncaught TypeError: Cannot read property 'split' of undefined(…)
    /*
        長すぎてどこが怪しいのかわからないが、
        undefinedをsplitしてエラーが起きていることはわかる。
    */

//短くしてみるとよく分かる。
"ab-c,de-fg,hi-jk-l";//=> "ab-c,de-fg,hi-jk-l"
"ab-c,de-fg,hi-jk-l".split(",");//=> ["ab-c", "de-fg", "hi-jk-l"]
"ab-c,de-fg,hi-jk-l".split(",")[1];//=> "de-fg"
"ab-c,de-fg,hi-jk-l".split(",")[1].split("-");//=> ["de", "fg"]
"ab-c,de-fg,hi-jk-l".split(",")[1].split("-")[2];//=> undefined
    /*
        ↑なんともしょぼいミスだが、配列のrange外の値を取り出してundefinedが返ってきている
    */
"ab-c,de-fg,hi-jk-l".split(",")[1].split("-")[2].split("");//=> Uncaught TypeError: Cannot read property 'split' of undefined(…)
    /*
        ↑undefinedをsplitしているので、Uncaught TypeError
        splitは"string"のprototype method
    */
"ab-c,de-fg,hi-jk-l".split(",")[1].split("-")[2].split("")[0];//=> Uncaught TypeError: Cannot read property 'split' of undefined(…)
    /*
        ↑前段でこけているのでそもそも要素へのアクセス(~~~[0])は実行されていない
    */


/*----------------*/
//類似、というか自分がはまったミス: jQueryと絡めて失敗してしまうケース
/*----------------*/
$("#mygreatid").text().split("")[0].split("")[1].split("")[2];//=> Uncaught TypeError: Cannot read property 'split' of undefined(…)
    //#mygreatidが見つからない -> text()したら"" -> ""をsplit("")したら[] -> [][0]はundefind -> undefindをsplitしたら Uncaught TypeError <- ここで止まる
    /*
        根本原因：そもそも、要素が見つかっていないのに処理をしてしまったこと
            =>解決策：要素が見つかったかどうか事前にチェックする
            $("#mygreatid")は
                ・要素が存在すれば $("#mygreatid").length > 0 === true
                ・要素が存在しなければ $("#mygreatid").length > 0 === false
            であるので、これを使わない手はない。というか使おう。
            こうすればなんと、try{}catch(e){}する必要がない(はず?)
    */

/* 結論： */
//ダメな例
var foo = $("#mygreatid").text().split("")[0].split("")[1].split("")[2];

//良い例
var foo = $("#mygreatid");
foo = foo.length > 0 ? foo.text().split("")[0].split("")[1].split("")[2] : undefined;
    /*
        中身を確認してから処理しましょう。
    */