JavaScriptのエラーハンドリングをシンプルにまとめる

処理がネストされていくと少し混乱してしまうので,思考整理がてら書きます.

try catch文

try catch文のおさらい

typescript

const mainFn = () => {
  try {
    /* エラーをハンドリングしたい処理群 */
  } catch (error) { // errorは投げられたエラーの内容
    /* エラーが起きた時の処理 */
  } finally {
    /* エラーでもそうでなくても実行したい処理 */
  }
};

これを書かずに何かしらのエラーがおきた場合は,そこで処理が停止して,Uncaught Errorとしてやばそうな感じでお知らせされます.怖いですね.

これはエラーハンドリングがされていない状態だからです.

try catchで書いた場合はそこで処理が停止して,try { }の中でエラーおきた場合はcatch { }の内容を処理してくれるようになります.

これがエラーハンドリングがされている状態ということになります.

いずれも処理はエラー時に停止します.

関数がネストされているとどうなるの？

検証してみました.

nestedFnに数字を指定して実行することで,奇数ならエラー→3の倍数ならエラーという順番に処理が走ります.

typescript

/* 奇数を受け取るとエラーになる関数 */
const nestedNestedFn = (n: number) => {
  if (n % 2 === 0) {
    return n;
  } else {
    throw new Error('紀州梅');
  }
};

/* 3の倍数を受け取るとアホ（エラー）になる関数 */
const nestedFn = (n: number) => {
  const result = nestedNestedFn(n);
  if (result % 3 === 0) {
    return result;
  } else {
    throw new Error('FUGA🤪');
  }
};

try catchなし

typescript

const mainFn = () => {
  const result1 = nestedFn(2);
  console.log('result1: ', result1);

  const result2 = nestedFn(6);
  console.log('result2: ', result2);

  const result3 = nestedFn(4);
  console.log('result3: ', result3);

	console.log('finish');
};

エラーがおきた場合はそこで処理は終了し,怖いエラー（Uncaught Error）になります.

また,最後のconsole.log('finish');は実行されません.

try catchでハンドリング

typescript

const mainFn = () => {
  try {
    /* エラーをハンドリングしたい処理群 */
    const result1 = nestedFn(2);
    console.log('result1: ', result1);

    const result2 = nestedFn(6);
    console.log('result2: ', result2);

    const result3 = nestedFn(4);
    console.log('result3: ', result3);
  } catch (error) {
    /* エラーが起きた時の処理 */
    console.error(error); // errorは投げられたエラーの内容
  }
  
  console.log('finish');
};

エラーがおきた場合はそこで処理は終了し,コンソールにエラーが表示されます.

また,最後のconsole.log('finish');は実行されます.

Create by

nobuyuki.K

学校の先生→Web系エンジニア
Next.js / TypeScript / TailwindCSS / Notion が好き。

- Table of contents -

try catch文関数がネストされているとどうなるの？try catchなし try catchでハンドリング

公開: 2023-05-04

更新: 2023-08-28

いいね: 0 件

コメント: 0 件

カテゴリ:

programming

タグ:

JavaScript

error