JavaScript備忘録　関数について #JavaScript

JavaScript関数の書き方について、サンプルです。

index.html

<!DOCTYPE html>
<html lang="ja">
    <meta charset="uft-8">
    <head>
        <title>Step01</title>
        <script src="index01.js"></script>
    </head>
    <body>
        Chromeのデベロッパーツール(Ctrl+Shift+I)よりConsoleにて出力を確認してください。
    </body>
</html>

index01.js

//関数の定義
function myFunc1(a, b) {
    return a + b;
}
console.log("myFunc1呼び出し");
console.log(myFunc1(1, 1));

//定義した関数を代入することができます。
let val1 = function myFunc2(a, b) {
    return a + b;
}
console.log("val1呼び出し");
console.log(val1(1, 2));

//名前のない関数を変数に代入して
//function(){}を無名関数や、匿名関数と呼びます
let val2 = function (a, b) {
    return a + b;
}
console.log("val2呼び出し");
console.log(val2(1, 3));

//アロー関数式を使うと、funciotnの記述が省略できる
//引数と関数本体の間に=>を記述する
let val3 = (a, b) => { return a + b };
console.log("val3呼び出し");
console.log(val3(1, 4));

//関数本体がreturnだけの場合の{}とreturnも省略できます。
let val4 = (a, b) => a + b;
console.log("val4呼び出し");
console.log(val4(1, 5));

//即時関数を使った書き方
//無名関数を()で囲って、記述します
console.log("即席関数呼び出し");
console.log(
    (function (a, b) { return a + b })(1, 6)
);

//即時関数にアロー関数式を組み合わせた場合
console.log("即席関数、アロー関係式呼び出し");
console.log(
    ((a, b) => a + b)(1, 7)
);

//関数に関連してもう少し紹介します
//高階関数、コールバック関数と呼ばれる例です
//myHighOrderのように関数を引数として受け取る関数を、高階関数と呼びます
function myHighOrder(a, b, myFunc) {
    myFunc(a, b);
}

//myCallBackのように引数として渡される関数をコールバック関数と呼びます
let myCallBack = function (a, b) {
    // バッククオート`内の${}に変数を埋め込むことができます。
    console.log(`${a}を${b}乗すると` + Math.pow(a, b));   
}

//呼び出して実行します
console.log("コールバック関数例１");
myHighOrder(2, 10, myCallBack);

//コールバック関数を引数のところに直接記述することもできます
console.log("コールバック関数例２");
myHighOrder(2, 10, function (a, b) {
    console.log(`${b}を${a}乗すると` + Math.pow(b, a)); 
});

//さらに簡略化して記述すると
console.log("コールバック関数例３");
myHighOrder(4, 3, (a, b) => {
    console.log(`${b}を${a}乗すると` + Math.pow(b, a)); 
});

//コールバック関数の活用例として、組み込みオブジェクトのArrayのメソッドforEachがあります
//2倍して出力するコールバック関数をforEachに組み込んでいます
//コールバック関数の第1引数は配列の値になります。
console.log("コールバック関数例４");
let data = [1, 2, 3, 4, 5];
data.forEach(function (a) {
    console.log(a * 2);
});

//配列の各要素を2倍する例です
//コールバック関数の第2引数はindex、第3引数は呼び出されている配列
console.log("コールバック関数例５");
data.forEach(function (a, i, d) {
    d[i] = a * 2;
    //data[i] = a * 2; と同じ結果
});
console.log(data.toString());

//一定時間後に呼び出されるsetTimeoutの例
console.log("setTimeout,setInterval例");
setTimeout(function () { console.log("2秒経過しました") }, 2000);

//一定間隔で処理を呼び出すsetIntervalの例
let counter = 0;
let timerId = setInterval(function () {
    console.log("500ミリ秒毎処理します" + (++counter) + "回目");
    if (counter == 10) { clearInterval(timerId) }
}, 500);

JavaScript備忘録 関数について

JavaScript備忘録　関数について