javascriptの例外処理について

Question

###前提・実現したいこと
javascriptでリファクタリングした際、例外処理の取り扱いがよくわからなかったので教えて下さい。

###ソースコード
以下のように、ボタンを押すとエラーチェックを行い、問題ない場合のみ次の処理を行う処理を書きました。
この時、エラーチェック処理がとても長いため、この部分を関数に切り出そうとしました。

$(".sample").click(function(){
    var isError = true;
    /* 
    長いエラーチェック。エラーの場合、isError=falseをセット。
    */
  if ( isError = false ){
        alert("Error発生");
        return false;
    }
    /* 上のエラーチェックにひっかかない場合のみ行う処理をここに記述 */
})

すると、try～catchでくくる必要があり、余計にソースが分かり辛くなったように感じました。

$(".sample").click(function(){
    try{
        validate();    
       }
    catch(e){
        return false;      
    }
    /* 上のチェックにひっかかない場合に行う処理をここに記述 */
})

function validate(){
    var isError = true;
    /*
    長いエラーチェック。エラーの場合、isError=falseをセット。
    */
    if ( isError = false ){
        alert("エラー発生");
        throw "Error"
    }
}

こういう場合、もっと良い方法はないのでしょうか。
また、これでよい場合throw節には普通何を投げればよいのでしょうか。
曖昧な質問ですみませんが、よろしくお願いします。

Answer 1

提示されているコードだと、try/catch の「大域脱出」の利点を享受できるものになっていませんね。通常の関数呼び出しのフローより大きく脱出できるところが嬉しいわけで、だからこそ異常系の処理に向くわけです（が、異常系処理以外でも使いどころはあります）。

$(".sample").click(function(){
    try{
        validate();    
       }
    catch(e){ // ※ 例外捕捉
        return false;
    }
    /* 上のチェックにひっかかない場合に行う処理をここに記述 */
})

function validate(){
    ...
    if (/* あれのチェック */) throw new Error('あれがおかしい');
    ...
    if (/* これのチェック */) throw new Error('これがおかしい');
    ...
    if (/* それのチェック */) throw new Error('それがおかしい');
    return; // 問題ナッシング
}

ここで validate() が別関数になっているところは重要ではありません。異常を発見したらボンボン例外を投げちゃうことで、正常系の処理を書くことに集中できます。下のコードのほうが本質を理解しやすいかもしれません。

$(".sample").click(function() {
    try{
        doSomething();    
       }
    catch(e){ // ※ 例外捕捉
        return false;
    }
});

function doSomething() {
    ...
    if (/* あれのチェック */) throw new Error('あれがおかしい');
    ...
    if (/* これのチェック */) throw new Error('これがおかしい');
    ...
    if (/* それのチェック */) throw new Error('それがおかしい');
    /* 上のチェックにひっかかない場合に行う処理をここに記述 */
}

validate() や doSomething() の中で例外を投げ分けることで、※印のところで例外の種類による処理の変更なんかもできます。

余談ですが、手続き型言語の多くに提供されている return も、いわゆる構造化プログラミングのフローを飛び越えて脱出できる命令と考えることができます。

$(".sample").click(function() {
    if (! validate()) return false;
    /* 上のチェックにひっかかない場合に行う処理をここに記述 */
});

function validate() {
    ...
    if (/* あれのチェック */) return false;
    ...
    if (/* これのチェック */) return false;
    ...
    if (/* それのチェック */) return false;
    return true; // 問題ナッシング
}

最初のコードとほぼ同じです。違うところは、return は自分のいる関数から脱出することしかできないのに対し、throw では try をしかけたところまで脱出できることです。つまり、validate() が超複雑で、さらに細かい検証関数を呼び出すような作りにした場合でも、その中で例外を投げるだけで簡単に大域脱出できるということです。

Answer 2

=の比較演算子は=2つまたは3つです。
===の厳密な比較の方でいいと思います。

/* 誤 */
if(isError = false)

/* 正 */
if(isError == false)

if(isError === false)

また、他の方も仰っていますが、初期値をfalseにして、
エラーがあったらtrueにした方が、このように書けます。

var isError = false;

// エラーがあったら
isError = true;

if(isError){ //エラー処理 }

Answer 3

throw は処理を強制的に停止させたい場合に使いますが、せっかく throw したところを try-catch で例外を止めて処理させる部分に矛盾を感じます。
例外を発生させたいのなら throw new Error で強制終了させれば良いですし、静かにエラーを発生させたい(強制終了したくない)のなら throw を使わないようにしてみてはいかがでしょうか。

'use strict';
function validate (element) {
  element.checkValidity();

  var validity = element.validity,
      error = [];

  if (element.valueMissing) {
    error.push('required');
  }

  if (element.patternMismatch) {
    error.push('pattern');
  }

  return error;
}

function handleClick (event) {
  var error = validate(event.currentTarget.elements['hoge']),
      errorMsg {required: '必須項目です', pattern: '文法エラーです'};

  for (var i = 0, l = error.length; i < l; ++i) {
    console.error(errorMsg[error[i]]);
  }
}
jQuery(('.sample').on('click', handleClick);

Re: lmnwtr2027 さん

Answer 4

validate でスローせずに boolean を返してみてはどうですか？
ちなみに、isError という名前にする場合は true がエラーです。
false をエラーとしたいのであれば、変数名は isValid などにすべきですね。

$(".sample").click(function(){
    if (validate()){
        alert("Error発生");
        return false;
    }
    /* 上のチェックにひっかからない場合に行う処理をここに記述 */
})

function validate(){
    var isError = false;
    /*
     * 長いエラーチェック。エラーの場合、isError = trueをセット。
     */
    return isError;
}