JavaScriptのreturnについて

Question

returnの使い道がよくわかりません。
下記文章の場合、returnがなくても正常に動作します。
returnは具体的にどのようなときに使うのでしょうか？

function test(aiue){
  console.log('a'+aiue);
}
test('aaaa');

function testt(aiueo){
  var test =console.log(aiueo+"tes");
}
testt("aaa");

Answer 1

関数(function)には2つの意味があります。

• サブルーチン: 処理をまとめる
• 関数: 作用された値を戻り値として期待する

基本的に関数のほうが再利用し易いので、どちらでも実装出来そうな時は積極的に後者を採用しましょう。
例としてfizzbuzzを両方で作って見ましょう。

// Subroutine
var fizzbuzz = function (num) {
  if (num % (3 * 5) == 0) {
    console.log("FizzBuzz");
  } else if (num % 3 == 0) {
    console.log("Fizz");
  } else if (num % 5 == 0) {
    console.log("Buzz");
  } else {
    console.log(num);
  }
}
for (var i = 1; i <= 15; i++) {
  fizzbuzz(i);
}

// functional
var fizzbuzz = function (num) {
  if (num % (3 * 5) == 0) {
    return "FizzBuzz";
  } else if (num % 3 == 0) {
    return "Fizz";
  } else if (num % 5 == 0) {
    return "Buzz";
  }
  return num;
}
for (var i = 1; i <= 15; i++) {
  console.log(fizzbuzz(i));
}

ここまで読んで、
「いや、結局やってる事同じなんだから、ぶっちゃけ同じじゃね？」という心境でしょう。
この関数を再利用して別のことをしてみましょう。

では、FizzにもBuzzにもならず数字のまま残ってしまったものの配列を作って見ます。

var fizzbuzz = function (num) {
  if (num % (3 * 5) == 0) {
    return "FizzBuzz";
  } else if (num % 3 == 0) {
    return "Fizz";
  } else if (num % 5 == 0) {
    return "Buzz";
  }
  return num;
}
var results = []
for (var i = 1; i <= 15; i++) {
  if (typeof fizzbuzz(i) != "number") continue;
  results.push(i);
}
console.log(results); // [1, 2, 4, 7, 8, 11, 13, 14]

このように、作用されたものを戻り値として返させて、
関数呼び出し元が別途console.logを叩くというやり方にすると大幅に表現が増えます。

中級者以降になると、高階関数という関数に関数を詰めて実行するやり方を使いますが、それにより再利用することも可能です。
下記は高階関数を使ったFizzBuzzの実装例です。

// var fizzbuzz関数の宣言は省略
var items = [];
for (var i = 1; i <= 15; i++) items.push(i);
console.log(items.map(fizzbuzz).join("\n"));
items.map(fizzbuzz).forEach(function(it){console.log(it)}); // こっちも同じような出力になる

Answer 2

returnは以下の用途で使うのが一般的だと思います
0. 繰り返し(ループ)を抜けたいとき
0. 戻り値をまたプログラム中で使うとき

つまり、戻り値をプログラム中でまた使ったりしないときや、繰り返しを抜けたくない(もしくは繰り返し処理なんてそもそもしてない)ときはreturnは不要と考えていいかもしれません。

Comments

[ganbaru]

function testt(aiueo){
var test =console.log(aiueo+"tes");
}
testt("aaa");

というコードでは、
testt("aaa")
というコードはプログラム中で使ったことにならないのですか？

[退会済みユーザー]

testt("aaa")
というコードがプログラム中に書かれていればこのコードはプログラム中で使ったことになります。
「戻り値をまたプログラム中で使うとき」とは、関数が呼び出し元に何か値を返す必要がある場合は、returnを使用するべきだ、ということです。

Answer 3

console.logで表示したいだけならどちらでも良いです。
が、関数の実行結果を変数に代入したり、
別の関数の引数として使ったりする場合はreturn文を使わなければ無理です。

出力や利用方法を使うときに選べるのがreturn文の利点です。
関数内にconsole.logまで含めてしまうと、コンソール上への出力しかできません。

var add = function(a, b){
  return a + b;
}

// 返り値の5をnumに代入する
var num = add(1, 4);

// 2+4の計算結果の6が表示される
console.log(add(2, 4));

// 4という数値をアラートで出す
alert(add(1,3));

// 関数の実行結果をさらに2で割った数値をnum2に代入する
var num2 = add(2, 6) / 2