知られているようで知られていない JavaScriptの仕様 4選

Transcript

1. 知られているようで知られていない JavaScriptの仕様 4選 syumai YACP::Fukuoka *S Tech Talks (2025/11/15)
2. 自己紹介 syumai ECMAScript 仕様輪読会 / Asakusa.go 主催 Software Design 2023年12月号から2025年2月号まで Cloudflare Workersの連載をしました Twitter (現𝕏): @__syumai Website: https://syum.ai
3. カンマ演算子
4. カンマ演算子 , の前後に式を受け取り、後ろの式の値を演算結果とする演算子 console.log((1, 2)); // 2 console.log(((1, 2), 3)); // 3 console.log((1, (2, 3), 4)); // 4
5. カンマ演算子 ある変数への操作を行った直後にその値を返したい時などに使える 大体の場合は文を分ければいいので、ほぼ出番がない const f = (a) => { let x = 0; return (x += a, x); // 変数を操作した直後に返却 }
6. カンマ演算子 2重配列を操作するfor文を1本で書きたい時とかに使えるらしい // 例 for (let i = 0, j = 9; i <= 9; i++, j--) { console.log(`a[${i}][${j}] = ${a[i][j]}`); } for ( // ここは普通の変数宣言 let i = 0, j = 9; i <= 9; // ここがカンマ演算子 i++, j-- ) { console.log(`a[${i}][${j}] = ${a[i][j]}`); } https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comma _operator#for_ループでのカンマ演算子の使用
7. カンマ演算子 関数オブジェクトにnameを持たせたくない時にも使える カンマ演算子を使えば、即時実行関数を使わなくていい const f1 = () => {}; // 宣言時に勝手に関数のnameに "f1" が設定される const f2 = (0, () => {}); // 式として評価してから代入しているので設定されない const f3 = (() => {})(); // 即時実行関数で評価してから代入しているので同様 console.log( f1.name, // "f1" f2.name, // "" f3.name, // "" );
8. direct eval / indirect eval
9. direct eval / indirect eval JavaScriptの世界には、2つの種類のevalがある direct eval indirect eval これらの違いを知っていますか？ function f() { let a = 0; eval("a = 1;"); // direct eval const _eval = eval; _eval("a = 2;"); // indirect eval }
10. direct eval / indirect eval direct evalは今のスコープを、indirect evalはグローバルスコープを操作する function f() { let a = 0; eval("a = 1;"); // direct eval const _eval = eval; _eval("a = 2;"); // indirect eval console.log(a); // 1 console.log(globalThis.a); // 2 }
11. indirect evalの入手方法 indirect evalは、 eval を一度式として評価することで入手できる カンマ演算子、optional chainなどが使える function f() { // いずれも indirect eval (0, eval)("a = 1;"); eval?.("b = 1;"); }
12. indirect eval、いつ使うのか？ （そもそもユーザーが記述したコードの実行にevalは使うべきじゃない前提 で、）eval呼び出しに渡されるコードから、関数スコープの変数を見せたくない 時に使える！
13. Directive Prologue
14. この関数はstrict mode扱いになる (function() { "use strict"; with ({}) {} // strict modeでは使えない })();
15. 次の関数はstrict mode扱いになるか？ (function() { "use not strict"; "use strict"; with ({}) {} // ? })();
16. 答え: strict mode扱いになる
17. strict mode扱いになる (function() { "use not strict"; "use strict"; // ちゃんとここのディレクティブが効く！ with ({}) {} })();
18. Directive Prologuesの定義 Directive Prologuesは、関数、スクリプト、モジュールの冒頭に続く最長の文字列 リテラルトークンの列でしかない その途中にどんな文字列が含まれたっていい https://tc39.es/ecma262/multipage/ecmascript-language-source-code.html#sec- directive-prologues-and-the-use-strict-directive
19. 有効なDirective Prologuesの例 (function() { "あいうえお"; 'abcde' // 明示的にセミコロンを打ったら、1行に書いてもOK "use hoge" // セミコロンを書かなくても、自動セミコロン挿入されるのでOK "" // 空文字もOK '' // シングルクォートもOK "use strict" // これが効く！ 'use fuga' // 後ろに続いててもOK with ({}) {} // strict modeなのでwith文は使えない })();
20. 無効なDirective Prologuesの例 ディレクティブの間に文字列以外のトークンがあると、「連続した文字列リテラ ルトークン」であるという条件が満たされない (function() { "use not strict"; 1; "use strict"; with ({}) {} // strict modeではないので、with文が使える })();
21. 無効なDirective Prologuesの例 ` はテンプレートリテラルであって、文字列リテラルではないので、Directive Prologuesになれない (function() { `use strict`; with ({}) {} // strict modeではないので、with文が使える })();
22. undefined扱いのObject
23. typeof document.all が undefined なのに document.all === undefined が false !?
24. https://developer.mozilla.org/ja/docs/Web/API/Document/all
25. ECMAScriptのObjectの仕様上で、 document dot all の専用の内部フィールド、 [[IsHTMLDDA]] が定義されている https://tc39.es/ecma262/multipage/additional-ecmascript-features-for-web- browsers.html#sec-IsHTMLDDA-internal-slot
26. typeof に、Objectに [[IsHTMLDDA]] フィールドがあるときに "undefined" という 文字列を返すオプショナルな仕様がある https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec- typeof-operator
27. jkr_2255さんの記事 https://qiita.com/jkr_2255/items/f9b7218d7a2b54424c12
28. ご清聴ありがとうございました！