JavaScriptでreturnを使って関数から値を返す方法を現役エンジニアが解説【初心者向け】

JavaScriptでreturnを使って関数から値を返す方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

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

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

 

 

 

returnとは

returnとは、関数の処理を終了することを意味します。さらに、returnを使うことで関数から値を返すことができます。つまり、関数の処理を終了するとき、その関数を呼び出した側へ値を返すことができるのです。

なお、この関数を呼び出した側へ返す値のことを、戻り値と言います。

JavaScriptでreturnを使って関数から値を返す方法

関数を呼び出した側へ値を返す方法は、とても簡単です。

関数の中でreturn 0やreturn trueというように、returnの後ろに戻り値を記述します。この戻り値はreturn valueのように、変数を指定することもできます。戻り値には数値、文字列、真偽値、配列、オブジェクトなどが指定できます。

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

実際に書いてみよう

それでは、実際にreturnを使って関数から値を返すコードを書いてみましょう。まずは数値を返す関数を書いてみます。

function add(a, b) {
  return a + b
}
const ret = add(1, 2)
console.log(ret) // 3

引数で渡した2つの値を足し算した結果を返す関数です。引数に1と2を渡したので、戻り値は1+2つまり3となります。

次に文字列を返す関数を書いてみます。

function getFullName(lastName, firstName) {
  return `${lastName}${firstName}`
}

const ret = getFullName('鈴木', '太郎')
console.log(ret) // 鈴木太郎

引数で渡した苗字と名前を繋げてフルネームを返す関数です。引数に苗字である鈴木と名前の太郎を渡したので、戻り値は鈴木太郎となります。

続いて真偽値を返す関数を書いてみます。

function judge(a, b) {
  return a === b
}
const ret = judge(1, 2)
console.log(ret) // false

引数で渡した2つの値が同じであるか否かを返す関数です。引数に1と2を渡したので、これらは同じでないので戻り値はfalseとなります。

最後に、アロー関数の場合にreturnがどのようになるかを見てみましょう。

const add = (a,b) => a + b
const ret = add(1, 2)
console.log(ret) // 3

最初の例で使用した足し算を行う関数をアロー関数で記述しました。このようにアロー関数であればreturnを省略して書くこともできます。

 

筆者プロフィール

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

 

 

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。