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
AIともっと楽するE2Eテスト
myohei
8
3k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
GPUを計算資源として使おう!
primenumber
1
250
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
PipeCDのプラグイン化で目指すところ
warashi
1
300
NPOでのDevinの活用
codeforeveryone
0
900
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.8k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
How to Ace a Technical Interview
jacobian
278
23k
Git: the NoSQL Database
bkeepers
PRO
430
65k
It's Worth the Effort
3n
185
28k
Building an army of robots
kneath
306
45k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Automating Front-end Workflow
addyosmani
1370
200k
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 を通過しました