Open5日前にコメント追加3

JavaScriptつみトレ6章　関数を作る

sec1_関数の定義

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

let　変数名　=　（引数）=>　{
　　関数で行う処理
}

c6_1_1.js

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

//実行結果
//忍者です。
//本日、手裏剣３個の製造をお願いします

一行目の「manufOrder()」に「console.log(忍者です。本日、手裏剣３個の製造をお願いします);」の処理を入れている

引数を受け取る

c6_1_2.js

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

//実行結果
//服部様
//忍者です。
//本日、手裏剣３個の製造をお願いします
//河村様
//忍者です。
//本日、手裏剣３個の製造をお願いします

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

c6_1_3.js

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

manufOrder3('服部','手裏剣３個');
manufOrder3('河村','まきびし４個');

//実行結果
//服部様
//忍者です。
//本日、手裏剣３個の製造をお願いします
//河村様
//忍者です。
//本日、まきびし４個の製造をお願いします

戻り値を返す

戻り値を返すにはreturn文を書き戻り値として返したい値や式を書く

c6_1_4.js

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

return文が実行されるとreturnの直後に書かれた値や式を戻り値として、呼び出された関数から抜け出す

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

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

manufOrder4('服部',getOrder2(3,0));
manufOrder4('河村',getOrder2(1,4));

//実行結果
//服部様
//忍者です。本日、手裏剣3個の製造をお願いします
//河村様
//忍者です。本日、手裏剣1個まきびし4個の製造をお願いします

function記法で関数を定義する

function記法には関数の定義だけで１つの文を終える関数宣言（function文）、アロー関数のように関数を変数に変換する関数式（function式）の２種類がある

function文
function 関数名 (引数) {
関数で行う処理
}

function式
let 変数名 = function(引数) {
関数で行う処理
}

//function文
function manufOrder5(){
    console.log(`忍者です。
    本日、手裏剣３個の製造をお願いします。`);
}

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

あ

sec2_さまざまな引数

仮引数のデフォルト値

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

c6_2_1.js

let wokashi = (spring,summer,fall,winter) => {
    console.log(`春は${spring} 夏は${summer}
    秋は${fall} 冬は${winter}`);
}
wokashi('あけぼの','夜','夕暮れ')

//実行結果
//春はあけぼの 夏は夜
//秋は夕暮れ 冬はundefined

値を指定されなかった引数winterの値はundefinedになる

c6_2_2.js

let wokashi2 = (spring,summer,fall,winter='つとめて') => {
    console.log(`春は${spring} 夏は${summer} 
    秋は${fall} 冬は${winter}`);
}
wokashi2('あけぼの','夜','夕暮れ')

//実行結果
//春はあけぼの 夏は夜 
//秋は夕暮れ 冬はつとめて

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

関数を定義するとき、最後の引数の前に...をつけると、０個以上の引数が配列にまとめられてその仮引数に渡される
これを「残余引数」と言う

c6_2_3.js

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

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

//実行結果
//犬は桃太郎の友達
//犬は桃太郎の友達
//猿は桃太郎の友達
//キジは桃太郎の友達

あ

sec3_関数を引数として渡す

関数に名前をつけない

JavaScriptの関数やメソッドの中には、関数を引数として受け取るものがある
filterメソッドは、真偽値を返す関数を引数として受け取るメリットで、関数の実行結果がTrueになる要素だけを新しい配列にして返す

c6_3_1.js

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

//実行結果
//["beautiful"]

6文字より長いものだけを抽出するプログラム

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

c6_3_2.js

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

console.log(squared);

//実行結果
//[1,4,9,16,25]

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