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

初心者向けにJavaScriptでreturnを使って関数から値を返す方法について現役エンジニアが解説しています。returnを使うと呼び出し元に値を返すことが出来ます。戻り値には数値、文字列、真偽値、配列、オブジェクトなどが指定できます。関数から真偽値や文字列を返してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでreturnを使って関数から値を返す方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

returnとは

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

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

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

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

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

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは、実際に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を使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

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