catch-img

JavaScriptでのfunction(関数)や戻り値の使い方

戻り値の取得は、色々なプログラムで利用されます。JavaScriptにおける戻り値の使い方について学んでいきましょう。function(関数)の戻り値についての基本的な書き方をはじめ、戻り値に関する基本を解説します。技術研修などでJavaScriptを学ばれている方はしっかり理解しましょう。

目次[非表示]

  1. 1.functionの戻り値とは?
    1. 1.1.functionの処理結果で返される値
    2. 1.2.呼び出し元へ返すにはreturnを使う
  2. 2.戻り値のパターンによる処理の違い
    1. 2.1.戻り値が複数の場合
    2. 2.2.戻り値が配列の場合
  3. 3.さまざまな戻り値の返し方
    1. 3.1.戻り値を指定せずreturn文実行
    2. 3.2.function(関数)を戻り値に指定することもできる
    3. 3.3.戻り値をtrueかfalseで返すことはできる?
    4. 3.4.戻り値を使った条件分岐
  4. 4.functionや戻り値、returnを覚え先に進もう

functionの戻り値とは?

JavaScriptの「function」は、処理をまとめた関数のことです。JavaScriptでは、functionの中で戻り値を返すよう処理を記載する場合が多く存在します。

そもそも、戻り値とは何でしょうか?戻り値の役割と書き方について見ていきましょう。

functionの処理結果で返される値

戻り値とは、function(関数)が実行された結果、呼び出し元に渡される値のことです。

let sample = 'I am a man';
let Gender = sample.replace('man', 'woman');
console.log(Gender);

上記のコードでは、sampleの文字列の上でreplaceの関数を実行し、「man」と「woman」の2つの関数を引き渡しています。この関数の処理が完了した際に、戻り値を「Gender」という変数に代入するという処理を行っています。

戻り値とはこのように、計算の途中で値を別の関数に渡すために返すようなことを行うためのものです。

呼び出し元へ返すにはreturnを使う

戻り値を呼び出し元へ返すには、「return」を使います。基本的な戻り値の記述は以下です。

function 関数名(仮引数A, 仮引数B, ...){
 //実行する処理; return 戻り値;
}

JavaScriptでは、returnの記述がない関数は「undefined」として返します。また、return文の後には改行を入れることができず、改行があった場合は「;」が省略されているものとして判断されてしまいます。

戻り値を扱う上で注意しましょう。

■関連記事

  JavaScriptにおける引数の基本的考え方と関数への渡し方 | Java・フロントエンド研修のジョブサポート プログラミングにおいて、引数に対する理解は必須です。JavaScriptにおける引数の基本的な考え方や関数への渡し方を、実際のサンプルコードを見ながら理解していきましょう。引数をマスターすることが、JavaScript習得への近道です。 Java・フロントエンド研修のジョブサポート

オンライン・リモート講座(入門5日・基礎10日-株式会社ジョブサポート)

戻り値のパターンによる処理の違い

戻り値が1つとは限りません。複数の戻り値を扱う場合や、配列として扱う場合など、さまざまなパターンがあり、それによって処理が異なります。

ここでは、代表的な戻り値のパターンと、それによる処理の違いについて見ていきましょう。

戻り値が複数の場合

複数の戻り値を返す場合は、オブジェクトの形式にしてしまうのがもっともシンプルです。

function getgreet(name) {
 var greet = {
  name: name, text:function() {
   console.log('おはようございます,' + name + 'さん');
  }
 } 
 return greet;
}
console.log( getgreet('田中') );
getgreet('佐藤').text();

上記のコードでは、関数の中で任意のオブジェクトを作成しています。

オブジェクトの中身は、関数を実行する際に名前を受け取る「name:name」のメソッドと、受け取った名前を使ったテキストとして出力する出力する「console.log」のメソッドがあります。

この複数のメソッドを「return」すると、複数の値が入ったオブジェクト構造を、そのまま返すことができます。

上記のコードで、「console.log( getgreet('田中') );」と記述するとオブジェクトデータが、「getgreet('佐藤').text();」と記述すると、オブジェクトデータの中にあるtextのメソッドを実行します。

戻り値が配列の場合

戻り値を配列として返す場合は、引数に配列を指定します。

function getnumber( num ) {
 var results = [];
 for(var i=1; i<6; i++) {
  results.push( i + num );
 }
 return results;
}
console.log( getnumber(2) );

上記では、指定した数字に1ずつ加算した値を5個まで格納する関数を作っていますので、[ 3, 4, 5, 6, 7 ]が返されます。

■関連記事

  JavaScriptの戻り値に困ったら。基本ルールを丁寧に解説 | Java・フロントエンド研修のジョブサポート JavaScriptには戻り値(もどりち)を返すためのreturn文があります。戻り値を適切に使えるようになると、JavaScriptでできることが増えます。戻り値の基本ルールに加え、エラーを吐いた場合の対処法について解説します。 Java・フロントエンド研修のジョブサポート

通年開講プロエンジニア育成コース(Java1~3ヶ月)-株式会社ジョブサポート

さまざまな戻り値の返し方

戻り値について、return文を使わない場合や、関数を指定する場合、そのほか、さまざまな戻り値の返し方について見ていきましょう。

戻り値を指定せずreturn文実行

戻り値を指定せずにreturn文を記述した場合は、underfindが返ってきます。

なお、function内の処理が最後まで実行されると、JavaScriptでは自動的に関数の呼び出し元に処理が戻るので、functionの最後であればreturnの記述は不要です。

return文が実行された場合、そこでfunctionの処理が終了して呼び出し元に処理が戻るため、returnはfunctionの処理を途中で中断させたい場合などにも使われます。

function(関数)を戻り値に指定することもできる

function(関数)自体を戻り値として指定することもできます。次のコードを見てみましょう。

function count(number) {
 return function(number) {
  return number + 1;
 }
}
var result = count();
console.log( result(3) );

このコードでは、「引数にプラス1をする」という簡単な処理のオブジェクトを作っています。関数がresultに代入され、上記の例では3の値に1がプラスされて4の値を返してきます。

この仕組みを応用して、もっと複雑なfunctionを戻り値として指定して、Webアプリやショッピングサイトなどを制作することもあります。

戻り値をtrueかfalseで返すことはできる?

以下のサンプルコードとと共に見ていきましょう。

function greet( name ) {
 var result = name + 'さん、おはようございます';
 if( name ) {
  return true;
 }
 else {
  return false;
 }
}
console.log(greet() );

この例では、引数である名前が記述されていません。そのため、通常の処理をすると関数内のnameはunderfindとして出力されますので、if文に当てはめると、falseの値が実行されます。

returnの値が真(true)でない場合はfalseの値を返す、という処理を入れておけば、上記のコードではfalseの値を返します。

戻り値を使った条件分岐

戻り値をそのまま条件分岐に当てはめてみましょう。

function Jud( countA, countB ) {
 return countA + countB;
}
if( Jud(5, 7) > 10) {
 console.log( '10より上' );
}
else {
 console.log( '10以下');
}

この式では、countAとcountBの合計値を戻り値として返し、続くif文で「それが10より大きいなら'10より上'というログを出す」「10以下なら'10以下'というログを出す」ということを行っています。

このように、戻り値を条件分岐に当てはめてその後の処理を変えるという記述はJavaScriptではよく使いますので、覚えておくと良いでしょう。

■関連記事

  フロントエンド(HTML5・CSS・JavaScript)入門5日講座-ジョブサポート フロントエンド(HTML5・CSS・JavaScript)入門5日講座は通学で基礎力強化します。スキルチェンジ、基礎から学びたい方向けの講座です。貴社の希望開始日、オンライン受講の選択も可能です。Java・フロントエンド研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート


functionや戻り値、returnを覚え先に進もう

戻り値は、JavaScriptではよく使います。戻り値を使った条件分岐を行うことで、例えば「1000円以上の場合は配送料無料」というような、ショッピングで見られるような処理も行えるようになるためです。

戻り値は、JavaScriptを使う上では大切な要素なので、必ず使えるようになっておきましょう。基本的な書き方だけでなく、戻り値が複数である場合や配列である場合、戻り値を返さなかった場合など、いくつものパターンを覚えることが重要です。


法人研修の実績2500名以上!若手、新人エンジニア採用後

Java研修はジョブサポートお任せ下さい


ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava研修(通学、オンライン・リモート講座)を行っています。助成金を活用すれば費用負担を軽減して研修受講ができるのため若手、新人エンジニア採用計画と合わせてご検討下さい。

新人・若手エンジニアの基礎知識、ビジネススキルを強化

プロエンジニア育成コース(Java研修1~3ヶ月)


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。