6章_関数を作る

01_関数の定義

アロー関数式で関数を定義する

今までは組み込み関数
アロー関数式　自分で関数を定義
引数をカッコに囲んで書き、アロー「=>」のあと関数で行う処理を記述
アロー関数式を代入文の右辺に書くことで一連の処理を行う関数を変数に代入することができる
関数を定義することのメリット　一度書いた処理を再利用できる
製造業者に発注の内容を送るプログラム

c6_1_1.js

let manufOrder = () => {
    console.log(`忍者です。
本日、手裏剣3個の製造をお願いします。`);
}

manufOrder(); //manufOrder関数を呼び出す

引数を受け取る

アローの前のカッコの中に引数を書くと、呼び出し元から引数を受け取る

c6_1_2.js

let manufOrder2 = (name) => {
    console.log(`${name}様
    忍者です。
    本日、手裏剣3個の製造をお願いします。`);
}

manufOrder2('服部');  //引数’服部’を渡して関数を呼び出す
manufOrder2('河村');  //引数’河村’を渡して関数を呼び出す

仮引数と実引数

仮引数→関数を定義するときに関数名の後ろのカッコにカッコで囲んで書かれる引数
実引数→関数を呼び出すときに実際に渡される値

引数を二つ以上受け取ることもできる

c6_1_3.js

let manufOrder3 = (name, order) => {
    console.log(`${name}様
    忍者です。
    本日、${order}の製造をお願いします。`);
}

manufOrder3('服部', '手裏剣3個');   //引数を追加
manufOrder3('河村', 'まきびし4個'); //引数を追加

戻り値を返す

自分で定義する関数でも、呼び出し元に戻り値を返すことができる
return文を使う
return文が実行されると、returnの直後に書かれた値や式を戻り値として呼び出された関数から抜け出す
関数から戻り値を返すようにしておくと複数の関数を組み合わせて使うときに便利

c6_1_4.js

let getOrder = (shurikenNum, makibishiNum) => {
    orderText = '';
    if (shurikenNum > 0) {
        orderText += `手裏剣${shurikenNum}個`;
    }
    if (makibishiNum > 0) {
        orderText += `まきびし${makibishiNum}個`;
    }
    return orderText;
}

let manufOrder4 = (name, order) => {
    console.log(`${name}様
    忍者です。
    本日、${order}の製造をお願いします。`);
}

manufOrder4('服部', getOrder(3, 0)); //引数を変更
manufOrder4('河村', getOrder(1, 4)); //引数を変更

割り当てる仕事が何十通りもあって指示を受ける人が何十人もいれば関数化しておいた方がいい

function記法で関数を定義する

function記法には関数の定義だけで1つの文を終えるfunction文
　　　　　　　　アロー関数式のように関数を変数に代入するfunction式がある

kamimura sora

02_様々な引数

仮引数のデフォルト値

関数を呼び出すとき実引数と仮引数の数が一致していなくてもエラーにはならない

c6_2_1.js

let wokashi = (spring, summer, fall, winter) => {
    console.log(`春は${spring} 夏は${summer}
    秋は${fall} 冬は${winter}`);
}

wokashi('あけぼの', '夜', '夕暮れ',);

値を指定されなかった引数winterの値はundefinedになっている
このような事態を避けるためには仮引数のデフォルト値を指定する
デフォルト値は実引数が渡されなかった場合の仮引数の値を代入式のような形で指定できる

c6_2_2.js

let wokashi2 = (spring, summer, fall, winter = 'つとめて') => {
    console.log(`春は${spring} 夏は${summer}
    秋は${fall} 冬は${winter}`);
}

wokashi2('あけぼの', '夜', '夕暮れ',);

余った引数を配列にまとめる残余引数

関数を定義するとき、最後の引数の前に...をつけると、0個以上の引数が配列にまとめられてその仮引数に渡される
これを残余引数というintroduceFriends関数を呼び出す際に、引数として書いたすべての値が配列にまとめられ、仮引数friendsに渡される

c6_2_3.js

let introduceFriends = (...friends) => {
    for (friend of friends) {
        console.log(`${friend}は桃太郎の友達。`);
    }
}

introduceFriends();
introduceFriends('犬');
introduceFriends('犬', '猿', 'キジ');

kamimura sora

03_関数を引数として渡す

関数に名前を付けない

アロー関数式やfunction式で関数を定義するとき代入文の右辺にアロー関数式を書くことで関数を変数に入れていた。
これらは関数というオブジェクトを返す式で、関数というオブジェクトは他の値と同じように変数に格納したり引数として関数に渡したりできる。
JavaScriptの関数やメソッドの中には関数を引数として受け取るものがある。
filterメソッド→真偽値を返す関数を引数として受け取るメソッド。

c6_3_1.js

let words = ['beautiful', 'big', 'strong'];
let result = words.filter((word) => word.length > 6);
console.log(result);

filuterメソッドは配列wordsの全ての要素に対して引数として受け取った関数を実行し結果がtrueだったものを新しい配列にして返す。
↑のプログラムでは文字列'beautiful'だけが条件を満たすため、新しい配列resultは文字列’beautiful’だけを要素として持っている。

関数を引数として受け取るメソッドとしてもう一つmapメソッド
mapメソッド→下の配列の要素に対して受け取った関数を実行しその結果を新しい配列として返す。

c6_3_2.js

let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(number => number ** 2);

console.log(squared);

mapメソッドは配列numbersの全ての要素に対して引数として受け取った関数を実行してその結果を新しい配列squaredに格納している。