LoginSignup
2
1

More than 3 years have passed since last update.

【JavaScript】try...catch文、throw文について【例外処理】

Last updated at Posted at 2020-12-08

Nuxt.jsの教材で初めて見て「なにこれ?」となったので

throw文

開発者が明示的にエラーを投げる(throw)ことが出来る。

main.js
throw 'エラーです!!'

スクリーンショット 2020-12-08 20.26.12.png


ただ、直接文字列を投げるのはNGらしい。
(スタックトレースを取得できない為)

Errorオブジェクトを使うのが正解

main.js
throw new Error('エラーです!!');

スクリーンショット 2020-12-08 20.30.53.png


何も投げないのもNG

main.js
throw;

スクリーンショット 2020-12-08 20.35.39.png


エラーが発生した時点で処理が止まります

main.js
console.log('実行されます!!');
throw new Error('エラーです!!');
console.log('実行されません!!');

スクリーンショット 2020-12-08 20.41.42.png

try...catch文

エラー発生時に何らかの処理を続行できる

main.js
try {
  <エラーが発生する可能性のある処理>
} catch(<エラー>) {
  <エラー時の処理>
} finally {
  <後処理エラーが有っても無くてもする処理>
}
main.js
try {
  console.log('実行されます!!');
  throw new Error('エラーです!!');
  console.log('実行されません!!');
} catch (e) {
  console.log(e);
} finally {
  console.log('後処理!!');
}

スクリーンショット 2020-12-08 21.13.48.png

catchでエラーが処理されるとそのエラーが無かったことになり、実行が継続される。


catchfinallyはそれぞれ省略できる、
だが、両方省略はできない。

finallyを省略する

main.js
try {
  console.log('実行されます!!');
  throw new Error('エラーです!!');
  console.log('実行されません!!');
} catch(e) {
  console.log(e);
}

スクリーンショット 2020-12-08 21.24.18.png


catchを省略する

main.js
try {
  console.log('実行されます!!');
  throw new Error('エラーです!!');
  console.log('実行されません!!');
} finally {
  console.log('後処理!!');
}

スクリーンショット 2020-12-08 21.32.37.png

しかし、この場合エラーは処理されていないので、外側のエラーが発生する。


エラー内容が入っているeも省略できる

main.js
try {
  console.log('実行されます!!');
  throw new Error('エラーです!!');
  console.log('実行されません!!');
} catch  {
  console.log('こっちがホントのエラーです!!');
} finally {
  console.log('後処理!!');
}

スクリーンショット 2020-12-08 21.38.44.png


catchで再度エラーを投げる

main.js
try {
  console.log('実行されます!!');
  throw new Error('エラーです!!');
  console.log('実行されません!!');
} catch(e)  {
  throw new Error(e);
} finally {
  console.log('後処理!!');
}

console.log('実行されません!!');

スクリーンショット 2020-12-08 21.45.48.png

catchで再度エラーを投げてもfinallyの処理は実行される。

ネストもできる

main.js
try {
  console.log('実行されます!!');
  try {
    console.log('実行されます!!');
    throw new Error('エラーです!!');
    console.log('実行されません!!');
  } catch (e) {
    console.log('内側' + e);
  }
} catch (e) {
  console.log('外側' + e);
}

スクリーンショット 2020-12-08 21.57.51.png

この場合エラーは内側でのみ処理される。


関数からもエラーを補足できる

main.js
const error = () => {
  throw new Error('関数からエラーです!!');
  console.log('実行されません!!');
}

try {
  console.log('実行されます!!');
  error()
  console.log('実行されません!!');
} catch (e) {
  console.log(e);
} finally {
  console.log('後処理!!');
}

スクリーンショット 2020-12-08 22.03.31.png

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1