JavaScriptで処理を終了する方法を現役エンジニアが解説【初心者向け】

JavaScriptで処理を終了する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

return文とは

return文とは、関数の処理を終了させ、関数を呼び出した側にデータを反映します。

このとき、関数を呼び出した側に、任意に指定した戻り値を返すことも可能です。

return文を省略した場合にはundefinedが戻り値として返されます。

そして、return文の後に書いたコードは処理として到達できないことに注意が必要です。

 

try…catch文とは

try…catch文とは、例外処理を制御するための記述です。

try…catch文はJavaScriptでエラーが起きることで処理が止まってしまった、といった事態を防ぐことができます。

また、その逆に意図して処理を止めたい時にも使うことが可能です。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

JavaScriptで処理を終了する方法

JavaScriptで処理を終了する方法は、関数であればreturn、関数でない場合はtry…catch文を使いましょう。

下記は簡単なコードです。

console.log(a)

console.log(1)

実行した場合、a is not definedというエラーが出現し、1がコンソールに出力されることなく処理が終了します。

そのためtry…catch文を使用しましょう。

try {

  console.log(a)

}

catch (e) {

  console.error(e)

}

console.log(1)

1がコンソールに出力されるようになります。

console.log(a)が実行されるとエラーが起きてcatch節に移り、console.error(e)によってコンソールにa is not definedというエラーが出力されるでしょう。

しかし、処理が止まることなく続くため、console.log(1)が実行されます。

 

次は、意図的に処理を止める処理を実装してみます。

const b = false

let obj

if (b) {

  obj = {

    a: 1

  }

}

console.log(obj.a)

コードを実行するとCannot read property ‘a’ of undefinedというエラーが出ます。

変数bがfalseのとき、変数objが初期化されないままconsole.log(obj.a)となり、そのプロパティaを参照しようとするためです。

変数bがfalseのときに処理を終了したい場合、下記のようなコードで実現することが可能です。

const b = false

let obj

try {

  if (b) {

    obj = {

      a: 1

    }

  }

  else {

    throw new Error('変数objは初期化されていません。')

  }

  console.log(obj.a)

}

catch (e) {

  console.error(e)

}

この記述では、変数bがfalseのときは処理が終了することにより、その後のconsole.log(obj.a)は実行されません。

 

執筆してくれたメンター

メンター久保田 Webシステム開発が中心のシステムエンジニア。 HTML、CSS、JavaScript（React、Vue.js）、PHP、Javaが守備範囲。 最初に選ぶポケモンは炎タイプ。

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。