JavaScript Course at Arzano Royal Institute of Magic

JavaScriptのスコープの基礎と、記号のみを使った数の表現について。JavaScriptの初学者向け

Transcript

1. JAVASCRIPT COURSE AT ARZANO ROYAL INSTITUTE OF MAGIC
2. SCOPE について 学生 「変数宣言なんて、とっくに極めてるっつーの」 ＊＊ 「じゃあ、今日はその変数宣言について・・」
3. 変数宣言 サンプルコード 実行結果 function foo(a) { b = a; return a + b; } var b = 1; console.log(foo(2)); 4 b == 2
4. Q. B の宣言をコメントアウトすると・・ サンプルコード 実行結果 function foo(a) { // "use strict"; b = a; return a + b; } // var b = 1; console.log(foo(2)); 4 window.b = 2 // undefined -> 2
5. Q. STRICT MODE だと・・ サンプルコード 実行結果 function foo(a) { 'use strict'; b = a; return a + b; } // var b = 1; console.log(foo(2)); ReferenceError // 実行時
6. SCOPE の原理 1. コンパイル時に、コードの実行箇所ごとに有効な変数のマップが構成される 2. 変数宣言を見つけると、Compiler がScope を参照 3. Scope に未登録の場合、新たに変数を登録する 4. 変数を見つけた際は、Scope に登録されているか参照 5. 見つからない場合は、上位Scope を順番に参照
7. 参照の種類 1. 代入先としての変数（LHS lookup ） 失敗すると。最後のスコープで変数を作成する 2. 値の参照としての変数（RHS lookup ） 失敗すると、ReferenceError を投げる
8. Q. 逆パターンだと・・ サンプルコード 実行結果 function foo(a) { // "use strict"; a = b; return a; } // var b = 1; console.log(foo(2)); ReferenceError // RHS lookup 失敗
9. FUNCTION SCOPE JavaScript のスコープは（ほぼ）関数スコープ（だった）
10. FUNCTION SCOPE の例 サンプルコード function foo() { var a = 1; function bar(a) { // a shadowing // i 見 console.log(a + i); } for (var i = 1; i < 10; i++) { bar(i); } } foo();
11. Q. VAR を使った宣言 サンプルコード 実行結果 function foo() { console.log(a); a = 2; var a = 1; console.log(a); console.log(window.a); } foo(); undefined 1 undefined
12. A. VAR を使った宣言 サンプルコード function foo() { var a; console.log(a); a = 2; a = 1; console.log(a); console.log(window.a); } foo();
13. Q. 関数のホイスティング サンプルコード 実行結果 foo(); bar(); var foo = function bar() {}; TypeError ReferenceError
14. 宣言の競合 サンプルコード 実行結果 foo(); var foo; function foo() { console.log(1); } 1 // var foo 無視
15. 宣言の競合 サンプルコード 実行結果 foo(); var foo; function foo() { console.log(1); } foo = function() { console.log(2); } function foo() { console.log(3); } 3
16. ブロック内の宣言 サンプルコード 実行結果 foo(); var flag = true; if (flag) { function foo() { console.log(1); } } else { function foo() { console.log(2); } } 2
17. BLOCK SCOPE let とconst で一般的に使えるようになった 従来はcatch 節に限定
18. BLOCK SCOPE （IF 文） サンプルコード 実行結果 if (foo) { var foo = false; } else { foo = true; } console.log(foo); true
19. BLOCK SCOPE （LET ） サンプルコード 実行結果 { let foo = false; } console.log(foo); ReferenceError
20. BLOCK SCOPE （TDZ ） サンプルコード 実行結果 { foo = true; let foo = false; } ReferenceError
21. TYPEOF 演算子 サンプルコード 実行結果 { console.log(typeof a); console.log(typeof b); let b = 1; } 'undefined' ReferenceError // typeof演算子 信用
22. IIFE サンプルコード サンプルコード（正） クロージャは使えると今でも便利 for (var i = 1; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000 * i); } for (var i = 1; i < 5; i++) { (function (j) { setTimeout(() => { console.log(j); }, 1000 * j); })(i); }
23. BLOCK SCOPE （FOR 文） サンプルコード for (let i = 1; i < 5; i++) { // 実質for 内 毎回新 i 宣言 setTimeout(() => { console.log(i); }, 1000 * i); }
24. 黒魔術講義
25. 暗黙の型変換について 詳細は別冊テキストで学習くださいm(_ _)m console.log(10 - '1'); // 9 console.log(10 - '1' + '1'); // '91' console.log(10 - '1' - '1'); // 8 console.log(10 - ('1' + '1')); // -1
26. 記号 ≒ MANA +, -, !, *, [, ] 6 つも使える
27. 任意の自然数を記号を使って表現してみる
28. STEP1 真理値 実行結果 ![] !![] false true
29. STEP2 単位元と生成元 実行結果 +![] +!![] 0 1
30. STEP3 加群Z 実行結果 !![] + !![] !![] + !![] + !![] - !![] 2 3 -1
31. STEP4 文字列へのキャスト（その１） 実行結果 [] + [] ''
32. STEP5 文字列へのキャスト（その２） 実行結果 [] + [+!![]] '1'
33. STEP6 結合 -> 数値へキャスト 実行結果 +[[+!![]] + [!![] + !![]]] // +[[1] + [2]] // +['12'] 12
34. STEP7 括弧 実行結果 [!![] + !![] + !![]] * [!![] + !![]] + !![] + [+![]] - !![] // [3] * [2] 6 // + true + [0] - true // '10' - 1 9
35. ※ここまでは魔術を使っておりません
36. STEP8 指数 実行結果 +[+!![] + [!![] + []][+![]][!![] + !![] + !![]] + [+!![]]] // +[1 + ['true'][0][3] + [1]] = +['1e1'] 10
37. STEP9 ？？？ 実行結果 +[+!![] + [!![] + []][+![]][!![] + !![] + !![]] + [!![] + !![]] + [+![]]] // +[1 + ['true'][0][3] + [2] + [0]] 100000000000000000000
38. スライド内のコードの使用は自己責任でお願いします 最後のコードは、所属するプロジェクトのESLINT を通過しました