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

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


# throw文

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

```javascript:main.js
throw 'エラーです！！'
```

![スクリーンショット 2020-12-08 20.26.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/9fa63ef7-8c40-9864-5735-2859fc4b5f94.png)
***
ただ、直接文字列を投げるのはNGらしい。
（スタックトレースを取得できない為）

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

```javascript:main.js
throw new Error('エラーです！！');
```



![スクリーンショット 2020-12-08 20.30.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/ea1f8571-b0cc-29a8-ac1c-ce4630814f26.png)


***

何も投げないのもNG

```javascript:main.js
throw;
```
![スクリーンショット 2020-12-08 20.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/5f69e203-eb23-3f62-98d8-818f3b74430b.png)
***
エラーが発生した時点で処理が止まります

```javascript:main.js
console.log('実行されます！！');
throw new Error('エラーです！！');
console.log('実行されません！！');
```
![スクリーンショット 2020-12-08 20.41.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/028186ae-d4b3-2186-9480-14a4c49f9038.png)


# try...catch文

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

```javascript:main.js
try {
  <エラーが発生する可能性のある処理>
} catch(<エラー>) {
  <エラー時の処理>
} finally {
  <後処理（エラーが有っても無くてもする処理）>
}
```

```javascript: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/9388524d-1f48-0419-b7b7-c67967b7b48e.png)

`catch`でエラーが処理されるとそのエラーが無かったことになり、実行が継続される。
***
`catch`、`finally`はそれぞれ省略できる、
だが、両方省略はできない。

###`finally`を省略する

```javascript:main.js
try {
  console.log('実行されます！！');
  throw new Error('エラーです！！');
  console.log('実行されません！！');
} catch(e) {
  console.log(e);
}
```
![スクリーンショット 2020-12-08 21.24.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/c2916f97-7a70-0b5f-0413-da961b97bbd4.png)
***

###`catch`を省略する
```javascript:main.js
try {
  console.log('実行されます！！');
  throw new Error('エラーです！！');
  console.log('実行されません！！');
} finally {
  console.log('後処理!!');
}
```

![スクリーンショット 2020-12-08 21.32.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/8141bf3d-a843-ad0c-c115-3430842250c4.png)


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

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

```javascript:main.js
try {
  console.log('実行されます！！');
  throw new Error('エラーです！！');
  console.log('実行されません！！');
} catch  {
  console.log('こっちがホントのエラーです！！');
} finally {
  console.log('後処理!!');
}
```
![スクリーンショット 2020-12-08 21.38.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/853d0ec9-c25a-c46a-a455-8a092aa5dc15.png)

***

###`catch`で再度エラーを投げる

```javascript: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/a1d07d44-2091-3775-e0de-7abbe7c92264.png)

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

###ネストもできる

```javascript: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/133826d6-5d56-6581-a020-c4b51f918006.png)

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

***

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

```javascript: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/3278551f-9fbc-9bae-f965-c6284e73a66c.png)