JavaScript超入門⑤ 関数で処理をまとめよう
function、引数、戻り値、アロー関数、変数のスコープを学びます。
第5回では、処理へ名前を付けて再利用できる関数を学びます。
関数を作る
function greet() {
console.log("こんにちは");
}
greet();functionの後ろに関数名を書きます。greet()で関数を呼び出します。
引数を受け取る
function greet(name) {
console.log(`こんにちは、${name}さん`);
}
greet("Aoi");
greet("Ren");関数へ渡す値を引数と呼びます。
戻り値
function add(a, b) {
return a + b;
}
const answer = add(3, 5);
console.log(answer);returnを使うと、関数の外へ結果を返せます。
アロー関数
JavaScriptでは、次のような書き方もよく使われます。
const add = (a, b) => {
return a + b;
};これをアロー関数と呼びます。最初は通常のfunctionで流れを理解し、コードを読んでいて見かけたときに同じ種類のものだと分かれば十分です。
スコープ
function sample() {
const message = "関数の中";
console.log(message);
}messageは、この関数の波かっこの中だけで使えます。変数を使える範囲をスコープと呼びます。
小さな練習
2つの数字を受け取り、大きい方を返すlarger関数を作ってください。
模範解答
function larger(a, b) {
if (a >= b) {
return a;
}
return b;
}
console.log(larger(12, 7));解説
aがb以上ならaを返し、その時点で関数を終了します。条件に当てはまらない場合だけ最後のreturnへ進み、bを返します。同じ値ならaを返します。
まとめ
- functionで関数を作れます。
- 引数で値を渡し、returnで結果を返します。
- アロー関数は関数を書く別の方法です。