今回は無名関数についてです。オブジェクトのメソッドとおおいに関係があります。
1 無名関数
関数の書式
function 関数の名前(引数){ 処理 return 戻り値; }
無名関数の書式
const 変数の名前 = function(引数){
関数の処理
}
上では関数を定義して処理を記述しているのに対し、下では変数に関数を代入しているのがわかります。
実際の例を見ていきましょう。
HTML(一部)
<script>
let a = 5;
let b = 4;
const f = function(x, y){
return x + y;
}
let c = f(a, b);
document.write("<p>" + c + "</p>");
</script>
ブラウザ
<script> 以下の1行目及び2行目で、変数 a 変数 b にそれぞれ数値を代入しています。
次に3行目から5行目において無名関数を定義しています。つまり、引数 x と引数 y とを足すという関数が変数 f に代入されるというものです。
そして6行目では変数 f の引数として変数 a と変数 b とが指定されることにより、無名関数が呼び出され、結果的に変数 c には計算結果が代入されることになります。
最後に7行目で変数 c の値を出力しています。
さて、この関数の定義を変更してみましょう。
HTML(一部)
<script>
let a = 5;
let b = 4;
const f = function(x, y){
return x * y;
}
let c = f(a, b);
document.write("<p>" + c + "</p>");
</script>
ブラウザ
足し算を掛け算に変更してみました。
2 コールバック関数
無名関数はどういった場面で使われるのでしょうか。
その前にコールバック関数というものを紹介します。
HTML(一部)
<script>
function f1(a) {
a();
document.write("<p>f1に記述</p>");
}
function f2() {
document.write("<p>f2に記述</p>");
}
f1(f2);
</script>
ブラウザ
ここでは f2( ) がコールバック関数となります。
<script> 以下の8行目をみると、f1 の引数として f2 が指定されています。
1行目には f1 が定義されており、変数 a を引数として f1 が実行されることになります。
すると、変数 a の中身は関数 f2 ですので、f2 に定義された「f2 に記述」が出力されることになるのです。
その後、f1 に直接記載のある「f1 に記述」が出力されます。
このようにコールバック関数とは、ほかの関数の引数として利用できるものなのです。
3 無名関数を利用する
またコールバック関数はメソッドの引数としても利用ができます。
多くの書籍で紹介されているのは forEach メソッドです。
このメソッドは、配列の要素を順にコールバック関数の引数として渡すものであり、その前提としてコールバック関数を引数として受け取るというものです。
書式
配列.forEach(コールバック関数の処理)
HTML(一部)
<ul>
<script>
let w = ["コール","バック","関数"]
w.forEach(function(a){
document.write("<li>" + a + "</li>");
});
</script>
</ul>
ブラウザ
まず、配列 w からひとつずつ要素が取り出され、引数 a に「コール」が代入され、処理が実行されます。
それが配列の要素の数だけ繰り返されることになります。
4 次回
さて次回はとても重要な考え方である「オブジェクト」を見ていきます。
カテゴリー
更新記事
- 『日本経済新聞』を読む 2(DAC、株主優待、オピオイド、ベトナム車市場、離れ小島)
- 『日本経済新聞』を読む 1(リバースメンタリング、CBT、EBPM、地方創生DAO、IBD)
- テーマ株投資(7か月)
- 『会社四季報 2024年 3集 夏号』を読む 20(RPF、DtoC、ToF、駅ナカ、CX)
- 『会社四季報 2024年 3集 夏号』を読む 19(ATC、プローブカード、ニューデリー、商品CFD、SUV、FPC、IFRS)
- 『会社四季報 2024年 3集 夏号』を読む 18(シャリ玉ロボット、YAGレーザー、シナジー、SaaS、クルーズ、DFBレーザー)
- 『会社四季報 2024年 3集 夏号』を読む 17(DSP、サーメタル、自動小銃、ダイカストマシン、FPSO、サーボモーター、水晶振動子)
- 『会社四季報 2024年 3集 夏号』を読む 16(クロスセル、eVTOL、CFCC、RFID、配当性向、事業承継)
- 『会社四季報 2024年 3集 夏号』を読む 15(SiC半導体、NAS電池、フェロニッケル、フェライト粉、スポンジチタン)
- 『会社四季報 2024年 3集 夏号』を読む 14(AI警備システム、プロダクトアウト、ホットメルト接着剤、放熱ゲル、パイル、カソード)
- 『会社四季報 2024年 3集 夏号』を読む 13(PLM、ファクタリング、BCP、グリシン、メタクリル樹脂、アクティブシニア)
- テーマ株投資(6か月)
- 『会社四季報 2024年 3集 夏号』を読む 12(カプロラクタム、ゼロトラスト、RAG、ERP、シリカ)
- 『会社四季報 2024年 3集 夏号』を読む 11(オリゴマー、エッジAI、MLCC、ジルコニウム、アセチレンガス、ファインケミカル)
- 『会社四季報 2024年 3集 夏号』を読む 10(フラッシュハンドル、自動配膳ロボット、R-SUD、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証)
- 『会社四季報 2024年 3集 夏号』を読む 9(ペロブスカイト太陽電池、プロテイン、銀だこ、尿素SCR、エクソソーム)
- 『会社四季報 2024年 3集 夏号』を読む 8(ドミナント、EBITDA、SAF、消防車、キャンプ用品、GIGAスクール、ボウリング場)
- 『会社四季報 2024年 3集 夏号』を読む 7(MD、パーム椰子、GMS、EC、デジタルサイネージ、ハラール認証、ヴィーガンコスメ)
- 『会社四季報 2024年 3集 夏号』を読む 6(BIM、CMS、つけまつげ、CDMO、BNPL、EDI、CRM)
- 『会社四季報 2024年 3集 夏号』を読む 5(アグリゲーション、EMS、BPO、のれん、カカオ豆、オーツミルク)
- 『会社四季報 2024年 3集 夏号』を読む 4(SEP、社内起業、ZEP、VPP、DOE、バイオセンサー、PBX)
- 『会社四季報 2024年 3集 夏号』を読む 3(海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電)
- テーマ株投資(5か月)
- 『会社四季報 2024年 3集 夏号』を読む 2
- 『会社四季報 2024年 3集 夏号』を読む 1
- JavaScript でDOM 2
- JavaScript でDOM 1
- JavaScript でオブジェクト 5
- JavaScript でオブジェクト 4
- JavaScript でオブジェクト 3
タグ
break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) ことば (2) アンガーマネジメント (1) インソース (1) ココナラ (11) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (3) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (2) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (29) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (11) IGS (11) Kラーニング (1)