JavaScriptの引数と戻り値の基礎中の基礎 #JavaScript

プロゲートのJavaScript 学習コース |||でつまずいた箇所がありましたので記事に整理してみました。
関数の引数と戻り値の理解に難しさを感じられている方のお力になれれば幸甚です。

JavaScriptは関数から理解するのが段々と酷になってきました。

もともとインフラ周りのエンジニアをやっておりましたので、関数の概念自体は理解しておりましたが実際にコードで書くとなるとやはり難しいです(笑)

何らかの数値や文字列を格納する変数と同じ入れ物であり、実行する処理を格納するのが関数であるという理解で差し支えありません。

単純に関数を定義して使うだけならば、条件分岐で習ったIf文に近しい下記のような書き方ですが、引数と戻り値という概念が加わるので混乱することがあります。

関数の定義とは

const introduce = fuction(){
  console.log("こんにちは")；
}；
introduce();

定数introduceを定義してfunction(){};の{}内に処理を記載します。
これだけで関数の出来上がりです。ここまでを「関数の定義」と呼びます。

『定数名();』と記載することで関数内の処理が実行されます。
処理であるconsole.log("こんにちは")；が関数introduceに格納されており、introduce();と書くことでそのまま中の処理が実行されて「こんにちは」と表示されます。

※JavaScriptのES6バージョンから「function()」の部分を「() =>」とするだけで関数が定義できるようになっており、この関数の書き方をアロー関数と呼びます。

ややこしくなるかもですが、JavaScriptの仕様で予め用意された関数も存在しており、オリジナルの関数を使いたい場合に定義が必要になります。

私と同様に引数と戻り値によって苦しむ初学者の方もいらっしゃると思いますので、こちらで私の体験談を踏まえながらどのように学習したのかをご紹介させて頂きます。

引数とは関数に与える追加情報のようなものであり、戻り値とは呼び出し元で受け取る関数の処理結果のことです・・・と言われてもピント来ませんよね。

正確に理解しようとして調査して考えていても難しいと思いますので、手を動かして「こういうものだ」と一種のおまじないだと思ってコードを書いてみると理解できるようになります。

const greet = (name) => {
  console.log(`こんにちは、${name}さん`);
};
greet('田中');

上記のコードで「こんにちは、田中さん」と表示されます。

ロジックとしてはアロー関数の() =>{};にある()の中に引数としてnameを記載します。
そして定義したgreet関数を呼び出す際に()内に値を入れてgreet('田中');と記載することで、引数nameに渡されます。

すると、greet関数内のconsole.log(こんにちは、${name}さん);のnameにも値が反映されて、greet関数を実行すると上記の処理結果になります。

const add = (a, b) => {
  return a + b;
};
const sum = add('1,3');
console.log(sum);

上記のコードで「4」と表示されます。

「return 値」で指定するとその値が戻り値として、呼び出し元であるadd関数に戻ります。上記のコードでは、add('1,3')が関数を呼び出しており、そのまま戻り値に置き換わります。

つまり、return 「a + b;」のaとbにadd('1,3')の1,3が入るので4が呼び出し元であるadd関数に戻ります。

そして、定数sumの中に代入されて、sumを実行して4が出力されるという仕組みです。

プロゲートで私が理解するのに時間がかかった問題「6.戻り値とは」のコードを参考に引数と戻り値の応用例を解説致します。


const half = (number) => {
  return number / 2;
};
const result = half (130);

console.log(`130の半分は${result}です`);

上記のコードで「130の半分は65です」と表示されます。

half関数を定義して引数にnumberを指定してありますね。
そうしたら、returnでnumber / 2を戻り値として返しています。

half(130)にてhalf関数の引数に130を加えたので、numberに130が代入されます。
ここで私は躓きましたが、もっと引数の扱い方が定着していればスムーズでした。
result定数にそのまま代入しているので、出力結果は「130の半分は65です」になります。

理解をしようとするよりも「習うよりも慣れろ」的な話だと思います。
数学の勉強方法に近しいものがあり、新しい公式を使って取り敢えず問題を解きながら覚えるのが習得時間の短縮に繋がりました。