【Javascript】try・catch・throw・finallyを試してみた

初めに

try...catchなどの例外処理について、学習した内容を纏めてみました。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

エラーが出そうな関数の処理

例えば以下のような配列の特定の要素を出力する関数があるとします。

 const fruits = ['apple', 'banana', 'mango', 'orange'];
    function getFruitName(num) {
      num += 1;
      document.write(fruits[num]);
    }
    getFruitName(3);

fruitsの4番目はないため、画面に何も表示されません。当たり前ですが、このような場合でもちゃんとエラーが表示するようにしたいことってありますね。

throw

throwは意図的に例外を生成することができます。

throw 'エラー発生';

コンソールには赤文字で以下のように表示されます。

しかしこのようなやり方は非推奨で、errorオブジェクトそ生成してからthrowします。

const err = new Error('エラー');
throw err;

先ほどの例に戻ってと意図的に例外を投げてみます。

    const fruits = ['apple', 'banana', 'mango', 'orange'];
    function getFruitName(num) {
      num += 1;
      if (fruits[num] != null) {
        document.write(fruits[num]);
      } else {
        const err = new Error('エラー');
        throw err;
      }
    }
    getFruitName(3);

このようにしてエラーが表示されない場合でも、意図的に表示させることができました。

try...catch

エラーが予想される関数などを実行する場合に、そのエラーに対して何らかの処理をするために使われるのがtry...catch構文です。

  try {
      getFruitName(3);
    }
    catch (e) {              //eにはエラーの内容が格納されている
      document.write(e);
    }

ブラウザーにはerrorの内容をcatchして画面に表示されます。

catchの引数にはthrow errの戻り値が格納されていて、エラーの内容が入っています。

finally

例外が発生してもしなくても必ず処理したい命令などを扱う場合にはfinallyを使います。

   try {
      getFruitName(3);
    }
    catch (e) {
      document.write(e);
    }
    finally {
      document.write('お疲れ様です')
    }

参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try...catch
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Error
https://qiita.com/Tsuyoshi84/items/c50fbbf30a2af387efdf