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
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
効率的な開発手段として VRTを活用する
ishkawa
0
140
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.6k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Rails Girls Zürich Keynote
gr2m
95
14k
The Language of Interfaces
destraynor
158
25k
We Have a Design System, Now What?
morganepeng
53
7.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Site-Speed That Sticks
csswizardry
10
690
Done Done
chrislema
184
16k
Practical Orchestrator
shlominoach
189
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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 を通過しました