LoginSignup
2
0

More than 3 years have passed since last update.

【javascript】もう迷わない!初めての戻り値(return)【イラスト解説】

Posted at

returnの戻るってなんやねん!と思った初学者は少なくないはず。
自分も就職する前の独学時代はreturnの必要性がわかりませんでした。
スクールや職場の先輩にわかりやすく説明して頂いたのでそれをイラストでまとめてみました。
下記コードは2代入した数字を倍にしてconsole.logで表示するシンプルな関数。

function double(value){
  const  hang = value * 2;
  return hang;
}

const result = double(10);
console.log(result);

スクリーンショット 2020-11-09 23.09.35.png

returnがない場合どうなる!?

function double(value){
  const  hang = value * 2;
  //   return data;
}

const result = double(10);
console.log(result);

スクリーンショット 2020-11-09 23.10.58.png

どうしてこうなるの?

returnが存在しない場合、今回のコードではdouble関数は計算はしたけど、結果が代入されないから。
returnされる時の流れをイラストにしてみました。
3行目では、returnを使って、result変数に代入した値を返します。これが俗に言う戻り値です。
スクリーンショット 2020-11-09 23.25.04.png

returnをコメントアウト(削除)した時のイラストはこちら↓
スクリーンショット 2020-11-09 23.17.28.png

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0