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);