JavaScript関数 引数型戻り値return型の定義書き方編

今回は引数がある関数や戻り値を返す関数型を扱います。はじめてプログラムする方にとっては引数や戻り値がある関数型は少し難問かもしれませんがreturnの仕組みを理解して使えるようにしてください。なおこのページは初心者向けですのでオブジェクト関数に関しては別の機会に解説します。

引数がある関数

引数とはどんなものなのか調べましょう

引数で値を渡す

サンプルではボタン1をクリックするとアラートで「5」が表示され、ボタン2をクリックすると「田中」が表示されます。

 <button onclick="clk(5)">ボタン1</button><br>
<button onclick="clk('田中')">ボタン2</button>
<script>
function clk(引数) {
alert(引数);
}
</script>

サンプル（別窓）

「引数」によってボタン部分から値が渡されてきました。「引数」変数ですが「var」や「let」などの宣言はありません。引数の部分を日本語にしましたが、通常は半角英数字にしてくださいね。今回はわかりやすいようにわざと漢字にしただけです。

引数が複数の場合のサンプル

テキストボックスの数値は半角で入力してくださいね

<form>
<input type="text" id="nm1"><br>
<input type="text" id="nm2"><br>
<button onclick="clk()">ボタン</button>
</form>
<script>
function clk() {
let x;//変数宣言
let y;//変数宣言
//テキストボックスの値を変数に代入
x = document.getElementById("nm1").value;
y = document.getElementById("nm2").value;
//関数の引数に値を渡して呼び出し
keisan(x, y);
}
function keisan(a, b) {
//文字列を数値に変換して足し算
alert(parseInt(a, 10) + parseInt(b, 10));
}
</script>

サンプル（別窓）

テキストボックスに数値を入れてボタンをクリックすると関数 clk()が実行されます。テキストボックスの値をx,yの変数に格納して関数keisan(x, y)を呼び出しつつ引数に値を渡しています。呼び出された関数keisan(a, b)は足し算をしてアラートで結果を表示します。

このあたりの値の受け渡しと関数の呼び出しがわかればもう心配いりません、合格です。わからない場合は少し時間をおいてからまた考えてください。この方法は必須です。

「parseInt(a, 10)」は変数aが文字列になっているため整数にするためのコマンドです、これもつかいますので覚えてください。

parseInt(型変更したい値, 進数);
文字列などの値を指定された整数の進数に変換します。 日本人はたいてい10進数なので10にすることが多いです

戻り値がある関数

戻り値のある関数もめっちゃ重要です。関数の中にreturnを記述します。

引数が1個の関数の例

単純なreturn文

 <button onclick="clk()">ボタン</button>
<script>
function clk() {
alert(keisan(5));//結果が戻される 
}
function keisan(a) {
return a;//ココの値を返す
}
</script>

サンプル（別窓）

アラートの中で関数keisanが呼び出され値5を受け取って再度アラートの中に戻しています。

 

引数が1個でただ値を返す関数の例です。ここまでくると頭がおかしくなりそうです。

 <form>
<input type="text" id="nm1"><br>
<button onclick="clk()">ボタン</button>
</form>
<script>
function clk() {
let x;//変数宣言 
//テキストボックスの値を変数に代入
x = document.getElementById("nm1").value;
//関数の引数に値を渡して呼び出し
alert(keisan(x));//結果が戻される 
}
function keisan(a) { 
return a;//ココの値を返す
}
</script>

サンプル（別窓）

アラートのなかで関数keisanは値を受け取ってそのままreturnで戻しています。

 

引数が複数の場合のサンプル。かなりややこしいけどプログラミングでは普通に出てくる

<form>
<input type="text" id="nm1"><br>
<input type="text" id="nm2"><br>
<button onclick="clk()">ボタン</button>
</form>
<script>
function clk() {
let x;//変数宣言
let y;//変数宣言
//テキストボックスの値を変数に代入
x = document.getElementById("nm1").value;
y = document.getElementById("nm2").value;
//関数の引数に値を渡して呼び出し
alert(keisan(x, y));//計算結果が戻される 
}
function keisan(a, b) {
//文字列を数値に変換して足し算
let ans = parseInt(a, 10) + parseInt(b, 10);
return ans;
}
</script>

サンプル（別窓）

return

returnに値を書かない場合

returnのうしろの何もつけないとundefinedが戻ってきます。

<button onclick="clk()">ボタン</button>
<script>
function clk() {
alert(keisan(5));//結果が戻される 
}
function keisan(a) {
return 
}
</script>

サンプル（別窓）

undefinedは重要ですがこのページでは記載しません。今はこんなのがあるという感じでいいですよ。

returnで処理を中断する

これはif文などで大活躍しますがまだif文はやってませんので違うパターンを掲載します

onclick / onsubmitイベントを中断させることができます。

<body>
<a href="https://www.yahoo.co.jp/" onclick="return false">ヤフー！</a>
</body>

この場合ヤフーのサイトは表示されません。

return　返す値;
returnの後の値を返します

 

だいぶ長くなりましたがここで出てくる関数ははじめてプログラムするにとにはかなりハードルが高いです。少々つまずいても諦めないでくださいね、必ずわかるときが来ますよ。チョー重要な事項なので先に進んでからまた戻ってきて学習しても大丈夫です。

 

このページはこれでおしまいです。

お疲れ様でした！

前のページ　 INDEX　 次のページ

コメント

ホーム