【IT】ReactのためのJavaScript基礎構文の復習③

T A

2023年5月27日 11:41

皆さま
こんにちは

今日も
JavaScriptライブラリであるReact.jsで
前提となるJavaScriptの基礎構文を復習します。

今回の学習内容

１．無名関数
２．即時関数
３．コールバック関数
を学習します。

今回の環境

任意のディレクトリに
・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回のみ利用する関数ために
　　無名関数にすることでコードがシンプルになる。
・グローバルスコープ名を定義する必要がないため、
　　関数名の重複を防ぐ

・main.js

console.log("１．無名関数")
// 通常の関数宣言
function nomalFunc(){
  console.log('こんにちは 通常の関数宣言')
}

// 無名関数
const mumeiFunc = function(){
  console.log('こんにちは 無名関数')
}
nomalFunc();
mumeiFunc();
console.log("");

２．即時関数

・関数を定義すると同時に実行される構文
・関数を定義してから呼び出すという手間を簡略化
・一回だけ必要な処理を、グローバルスコープを汚染せずに実行する方法

・main.js

console.log("２．即時関数")
// 即時関数
let firstname;
let lastname;
(function(firstname, lastname) {
  console.log("こんにちは " + firstname + ' ' + lastname + "!!!");
}("すくりぷと", "ジャバ太郎"));
console.log("");

３．コールバック関数

・引数として受け取った関数を実行する関数
・ある処理が終わった後に任意の関数を実行する際に使用
　（特定のタミングで実行）

・main.js

console.log("３．コールバック関数")
// 基礎的な例
function kontiwa() {
  console.log('こんにちは');
}

function aisatuKoudo(callback) {
  callback();
}

aisatuKoudo(kontiwa);

// 応用例　（setTimeoutでの場合）
function kontiwa2(name) {
  console.log('こんにちは2 ' + name);
}

setTimeout(() => kontiwa2('タイム太郎'),2000)
console.log("");

それぞれの結果

結果をブラウザーの検証画面のコンソールより確認できます。

では

この記事が気に入ったらサポートをしてみませんか？