JavaScriptの引数・戻り値の使い方をマスターしよう!
生徒
「JavaScriptの関数で、引数とか戻り値ってよく聞くけど、何のことかわかりません。教えてもらえますか?」
先生
「もちろんです!引数と戻り値は関数の大切な仕組みなので、わかりやすく説明しますね。」
生徒
「お願いします。なるべく簡単に理解したいです。」
先生
「では、まず引数から説明して、次に戻り値についてお話しします!」
1. 引数とは?関数に渡す「材料」のようなもの
引数(ひきすう)とは、関数に渡す値のことです。関数が「何か作業をするときに使う材料」のようなものと考えるとわかりやすいです。
例えば、関数に数字を渡して、その数字を使って計算したり、文字を渡して画面に表示したりします。
引数は関数の丸カッコの中に書きます。具体例を見てみましょう。
function greet(name) {
console.log("こんにちは、" + name + "さん!");
}
greet("太郎");
この例では、name が引数です。関数を呼ぶときに "太郎" を渡しています。
その結果、画面に「こんにちは、太郎さん!」と表示されます。
2. 戻り値とは?関数が結果を「返す」仕組み
戻り値(もどりち)とは、関数が処理を終えた後に返す値のことです。たとえば、関数に材料を渡して何か計算した結果を返すイメージです。
戻り値は関数の中で return キーワードを使って指定します。
例を見てみましょう。
function add(a, b) {
return a + b;
}
const result = add(3, 5);
console.log(result);
ここでは、add 関数が 2つの数字 a と b を受け取り、足し算した結果を return で返しています。
戻り値を変数 result に受け取り、それを画面に表示すると「8」となります。
3. 引数と戻り値を使うと、関数がもっと便利になる!
引数を使うことで、関数に色々なデータを渡して柔軟に動かせます。戻り値を使うと、関数から結果をもらって他の処理に使えます。
例えば、次のように書くと、好きな名前で挨拶して、その長さも教えてくれます。
function greetAndCount(name) {
console.log("こんにちは、" + name + "さん!");
return name.length;
}
const len = greetAndCount("花子");
console.log("名前の文字数は " + len + " です。");
このコードは、画面に「こんにちは、花子さん!」と表示し、名前の文字数を戻り値で返して、続けて表示しています。
4. 引数や戻り値がない関数もある
関数によっては引数や戻り値がない場合もあります。例えば、画面にただメッセージを表示するだけの関数は引数や戻り値が不要です。
function sayHello() {
console.log("こんにちは!");
}
sayHello();
この関数は決まったメッセージを表示するだけで、引数や戻り値はありません。
5. 引数は複数使えて、戻り値はひとつだけ
関数には複数の引数を渡せます。カンマ(,)で区切って複数指定します。
function multiply(a, b) {
return a * b;
}
console.log(multiply(4, 6));
戻り値は基本的にひとつだけ返せますが、オブジェクトや配列を使えば複数の値をまとめて返すことも可能です。
6. まとめないけど最後に注意点
引数や戻り値は関数を使いこなす上で重要な基本です。プログラムの柔軟性や再利用性がぐっと高まります。
最初は「関数は材料を受け取って、結果を返す」と覚えておくと理解しやすいです。