【IT】ReactのためのJavaScript基礎構文の復習③
皆さま
こんにちは
今日も
JavaScriptライブラリであるReact.jsで
前提となるJavaScriptの基礎構文を復習します。
今回の学習内容
1.無名関数
2.即時関数
3.コールバック関数
を学習します。
今回の環境
任意のディレクトリに
・index.html
・main.js
の二つのファイルを用意します。
・index.html (main.jsへは都度記入します)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScriptの補習</title>
</head>
<body>
<h1>JavaScriptの補習</h1>
<script src="main.js"></script>
</body>
</html>
index.htmlをVScodeで開き、Go Liveで簡易Web画面を開き、
右クリックで検証を開きます。
1.無名関数
・関数名なしに関数を定義する記法
・高階関数を利用する際にコードがシンプルになる
・高階関数を使う際に1回のみ利用する関数ために
無名関数にすることでコードがシンプルになる。
・グローバルスコープ名を定義する必要がないため、
関数名の重複を防ぐ
・main.js
console.log("1.無名関数")
// 通常の関数宣言
function nomalFunc(){
console.log('こんにちは 通常の関数宣言')
}
// 無名関数
const mumeiFunc = function(){
console.log('こんにちは 無名関数')
}
nomalFunc();
mumeiFunc();
console.log("");
2.即時関数
・関数を定義すると同時に実行される構文
・関数を定義してから呼び出すという手間を簡略化
・一回だけ必要な処理を、グローバルスコープを汚染せずに実行する方法
・main.js
console.log("2.即時関数")
// 即時関数
let firstname;
let lastname;
(function(firstname, lastname) {
console.log("こんにちは " + firstname + ' ' + lastname + "!!!");
}("すくりぷと", "ジャバ太郎"));
console.log("");
3.コールバック関数
・引数として受け取った関数を実行する関数
・ある処理が終わった後に任意の関数を実行する際に使用
(特定のタミングで実行)
・main.js
console.log("3.コールバック関数")
// 基礎的な例
function kontiwa() {
console.log('こんにちは');
}
function aisatuKoudo(callback) {
callback();
}
aisatuKoudo(kontiwa);
// 応用例 (setTimeoutでの場合)
function kontiwa2(name) {
console.log('こんにちは2 ' + name);
}
setTimeout(() => kontiwa2('タイム太郎'),2000)
console.log("");
それぞれの結果
結果をブラウザーの検証画面のコンソールより確認できます。
では