returnとは JavaScript


昨日の引数に引き続き、またもよく理解できていないreturnで躓く場面が発生。そのためサイトなどで調べたことを自分なりの解釈でまとめていく。


参考書などでは「戻り値」と書かれていて、関数を戻すという説明がほとんどだ。

何を言っているんだ…

それで「あぁ、関数を戻すんだな!」ってなるほど自分は頭が良くない。


そのためサイトで例題を見ながら理解しようとした。

function hello(name) {
  return 'こんにちは' + name + 'くん';
  }
  console.log(hello('ニート'));

よくある例題の中で一番シンプルだろう。

これを実行すると

こんにちは、ニートくん

となる。

もしreturnを使わなければこうなる。

undefined


つまり、一番下のconsole.log()でhelloという関数を呼び出しても中が空っぽだということだ。

returnを使うことで関数の処理の内容がhelloという関数の中に入って(ここで戻るというとわかりにくくなる)、次に呼び出したら使えようになるということだろう。


さて少し難しくなるが面白い例題があった。(MDNの例題)

function getRectArea(width, height) {
 if (width > 0 && height > 0) {
   return width * height;
 }
 return 0;
}

console.log(getRectArea(3, 4));

console.log(getRectArea(-3, 4));

なんか長くて難しく感じる…

が、よく考えるとすごくシンプルだ。アルファベットの量に惑わされてはいけない。

これは関数の中に条件式が入っていて、下で具体的にその関数を使っている。

わかりにくいのでまとめると

function 関数名(引数){

if文(条件式){
    条件の時の処理内容 
    }
 条件に合わなかったときの処理
 
}

実行1
実行2

こんな形になっている。

だからreturnが二つあるからといって別に特別な考え方が必要なのではなく、

条件がOKならif文の中のreturnを使って

条件が合わなければ外側のreturnを使う

ただこれだけ。

もしも外側のreturn 0;がなかったら実行2の処理結果がundefinedになる。なぜならIf文の条件にも合わないし、returnされていないから関数が空っぽ。



この記事が気に入ったらサポートをしてみませんか?