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
ふつうの技術スタックでアート作品を作ってみる
akira888
1
840
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
効率的な開発手段として VRTを活用する
ishkawa
0
140
Discover Metal 4
rei315
2
130
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
120
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
XP, Testing and ninja testing
m_seki
3
240
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
It's Worth the Effort
3n
185
28k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Practical Orchestrator
shlominoach
189
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing for humans not robots
tammielis
253
25k
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 を通過しました