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
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Hack Claude Code with Claude Code
choplin
4
2.1k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
ふつうの技術スタックでアート作品を作ってみる
akira888
1
850
Is Xcode slowly dying out in 2025?
uetyo
1
270
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
140
AIともっと楽するE2Eテスト
myohei
6
2.6k
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Optimizing for Happiness
mojombo
379
70k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Producing Creativity
orderedlist
PRO
346
40k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Unsuck your backbone
ammeep
671
58k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
It's Worth the Effort
3n
185
28k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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 を通過しました