Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript Course at Arzano Royal Institute of ...
Search
homuler
April 28, 2017
Programming
0
68
JavaScript Course at Arzano Royal Institute of Magic
JavaScriptのスコープの基礎と、記号のみを使った数の表現について。JavaScriptの初学者向け
homuler
April 28, 2017
Tweet
Share
More Decks by homuler
See All by homuler
Style Transfer Overview in 5 minutes
homuler
0
85
Rust ownership from legal perspective
homuler
1
100
Other Decks in Programming
See All in Programming
チームの境界をブチ抜いていけ
tokai235
0
170
CSC509 Lecture 04
javiergs
PRO
0
300
Swift Concurrency - 状態監視の罠
objectiveaudio
2
520
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
120
止められない医療アプリ、そっと Swift 6 へ
medley
1
170
理論と実務のギャップを超える
eycjur
0
130
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
31k
Leading Effective Engineering Teams in the AI Era
addyosmani
2
320
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Typedesign – Prime Four
hannesfritz
42
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Thoughts on Productivity
jonyablonski
70
4.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for Performance
lara
610
69k
Agile that works and the tools we love
rasmusluckow
331
21k
Transcript
JAVASCRIPT COURSE AT ARZANO ROYAL INSTITUTE OF MAGIC
SCOPE について 学生 「変数宣言なんて、とっくに極めてるっつーの」 ** 「じゃあ、今日はその変数宣言について・・」
変数宣言 サンプルコード 実行結果 function foo(a) { b = a; return
a + b; } var b = 1; console.log(foo(2)); 4 b == 2
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
Q. STRICT MODE だと・・ サンプルコード 実行結果 function foo(a) { 'use
strict'; b = a; return a + b; } // var b = 1; console.log(foo(2)); ReferenceError // 実行時
SCOPE の原理 1. コンパイル時に、コードの実行箇所ごとに有効な変数のマップが構成される 2. 変数宣言を見つけると、Compiler がScope を参照 3. Scope
に未登録の場合、新たに変数を登録する 4. 変数を見つけた際は、Scope に登録されているか参照 5. 見つからない場合は、上位Scope を順番に参照
参照の種類 1. 代入先としての変数(LHS lookup ) 失敗すると。最後のスコープで変数を作成する 2. 値の参照としての変数(RHS lookup )
失敗すると、ReferenceError を投げる
Q. 逆パターンだと・・ サンプルコード 実行結果 function foo(a) { // "use strict";
a = b; return a; } // var b = 1; console.log(foo(2)); ReferenceError // RHS lookup 失敗
FUNCTION SCOPE JavaScript のスコープは(ほぼ)関数スコープ(だった)
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();
Q. VAR を使った宣言 サンプルコード 実行結果 function foo() { console.log(a); a
= 2; var a = 1; console.log(a); console.log(window.a); } foo(); undefined 1 undefined
A. VAR を使った宣言 サンプルコード function foo() { var a; console.log(a);
a = 2; a = 1; console.log(a); console.log(window.a); } foo();
Q. 関数のホイスティング サンプルコード 実行結果 foo(); bar(); var foo = function
bar() {}; TypeError ReferenceError
宣言の競合 サンプルコード 実行結果 foo(); var foo; function foo() { console.log(1);
} 1 // var foo 無視
宣言の競合 サンプルコード 実行結果 foo(); var foo; function foo() { console.log(1);
} foo = function() { console.log(2); } function foo() { console.log(3); } 3
ブロック内の宣言 サンプルコード 実行結果 foo(); var flag = true; if (flag)
{ function foo() { console.log(1); } } else { function foo() { console.log(2); } } 2
BLOCK SCOPE let とconst で一般的に使えるようになった 従来はcatch 節に限定
BLOCK SCOPE (IF 文) サンプルコード 実行結果 if (foo) { var
foo = false; } else { foo = true; } console.log(foo); true
BLOCK SCOPE (LET ) サンプルコード 実行結果 { let foo =
false; } console.log(foo); ReferenceError
BLOCK SCOPE (TDZ ) サンプルコード 実行結果 { foo = true;
let foo = false; } ReferenceError
TYPEOF 演算子 サンプルコード 実行結果 { console.log(typeof a); console.log(typeof b); let
b = 1; } 'undefined' ReferenceError // typeof演算子 信用
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); }
BLOCK SCOPE (FOR 文) サンプルコード for (let i = 1;
i < 5; i++) { // 実質for 内 毎回新 i 宣言 setTimeout(() => { console.log(i); }, 1000 * i); }
黒魔術講義
暗黙の型変換について 詳細は別冊テキストで学習ください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
記号 ≒ MANA +, -, !, *, [, ] 6
つも使える
任意の自然数を記号を使って表現してみる
STEP1 真理値 実行結果 ![] !![] false true
STEP2 単位元と生成元 実行結果 +![] +!![] 0 1
STEP3 加群Z 実行結果 !![] + !![] !![] + !![] +
!![] - !![] 2 3 -1
STEP4 文字列へのキャスト(その1) 実行結果 [] + [] ''
STEP5 文字列へのキャスト(その2) 実行結果 [] + [+!![]] '1'
STEP6 結合 -> 数値へキャスト 実行結果 +[[+!![]] + [!![] + !![]]]
// +[[1] + [2]] // +['12'] 12
STEP7 括弧 実行結果 [!![] + !![] + !![]] * [!![]
+ !![]] + !![] + [+![]] - !![] // [3] * [2] 6 // + true + [0] - true // '10' - 1 9
※ここまでは魔術を使っておりません
STEP8 指数 実行結果 +[+!![] + [!![] + []][+![]][!![] + !![]
+ !![]] + [+!![]]] // +[1 + ['true'][0][3] + [1]] = +['1e1'] 10
STEP9 ??? 実行結果 +[+!![] + [!![] + []][+![]][!![] + !![]
+ !![]] + [!![] + !![]] + [+![]]] // +[1 + ['true'][0][3] + [2] + [0]] 100000000000000000000
スライド内のコードの使用は自己責任でお願いします 最後のコードは、所属するプロジェクトのESLINT を通過しました