-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjavascript-typescript-topic-reference.html
More file actions
1748 lines (1695 loc) · 118 KB
/
Copy pathjavascript-typescript-topic-reference.html
File metadata and controls
1748 lines (1695 loc) · 118 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The JavaScript & TypeScript Field Guide — ES2025/ES2026, TS 6, Cloud & Fintech, by Topic</title>
<meta name="description" content="An interactive, topic-organized field guide to 150 JavaScript & TypeScript concepts as of ES2025/ES2026 and TypeScript 6 — language, types, objects, async, modern syntax, the TS type system, tooling — plus production-ready cloud & fintech patterns, with real code examples. Tap any card to learn it." />
<meta name="author" content="Abhaykumar Bhuva" />
<meta name="keywords" content="JavaScript, TypeScript, ES2025, ES2026, TypeScript 6, Temporal, async await, generics, Node.js, promises, cloud, fintech, idempotency, BigInt money, periodic table alternative" />
<meta name="robots" content="index, follow" />
<meta name="color-scheme" content="dark light" />
<meta id="meta-theme-color" name="theme-color" content="#0a0d12" />
<link rel="canonical" href="https://abhaybhuvagithub.github.io/neuralstack/javascript-typescript-topic-reference.html" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="JS/TS Guide" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="NeuralStack" />
<meta property="og:title" content="The JavaScript & TypeScript Field Guide — by Topic" />
<meta property="og:description" content="150 JavaScript & TypeScript concepts through ES2025/ES2026 and TypeScript 6 — language, types, async, the TS type system and tooling, plus production-ready cloud & fintech patterns. Organized by topic, interactive, searchable, free." />
<meta property="og:url" content="https://abhaybhuvagithub.github.io/neuralstack/javascript-typescript-topic-reference.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="The JavaScript & TypeScript Field Guide — by Topic" />
<meta name="twitter:description" content="150 JS & TS concepts through ES2025/ES2026 and TypeScript 6 — with production-ready cloud & fintech code." />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='13' fill='%230a0d12'/%3E%3Crect x='7' y='7' width='50' height='50' rx='10' fill='none' stroke='%233178c6' stroke-width='3'/%3E%3Ctext x='32' y='27' font-family='monospace' font-size='9' fill='%237d8a9c' text-anchor='middle'%3EES26%3C/text%3E%3Ctext x='32' y='47' font-family='Arial,sans-serif' font-size='18' font-weight='700' fill='%233178c6' text-anchor='middle'%3EJS%2FTS%3C/text%3E%3C/svg%3E" />
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"WebSite",
"name":"The JavaScript & TypeScript Field Guide — by Topic",
"url":"https://abhaybhuvagithub.github.io/neuralstack/javascript-typescript-topic-reference.html",
"description":"An interactive, topic-organized field guide to 150 JavaScript & TypeScript concepts as of ES2025/ES2026 and TypeScript 6, with production-ready cloud & fintech code examples.",
"author":{"@type":"Person","name":"Abhaykumar Bhuva","url":"https://www.linkedin.com/in/abhaybhuva/"}
}
</script>
<script>
(function(){try{var t=localStorage.getItem("jstr-theme");if(t!=="light"&&t!=="dark"){t=(window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches)?"light":"dark";}document.documentElement.setAttribute("data-theme",t);}catch(e){document.documentElement.setAttribute("data-theme","dark");}})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
:root{
--ink:#0a0d12;--panel:#11161f;--panel-2:#161d28;
--line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
--text:#e8edf4;--text-soft:#c4cedb;--muted:#7d8a9c;--muted-2:#566273;
--link:#4d9be0;--link-hover:#8fc7f0;
--bg-glow-1:rgba(49,120,198,.14);--bg-glow-2:rgba(247,223,30,.08);
--foundations:#f7df1e;--architecture:#2dd4bf;--training:#ffd043;--language:#6c8cff;
--generative:#ff6fae;--agents:#5fd068;--evaluation:#38bdf8;--systems:#ff8a4c;
--safety:#f6685e;--data:#31c48d;
--display:"Space Grotesk",system-ui,sans-serif;--body:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
[data-theme="light"]{
--ink:#f5f6f8;--panel:#ffffff;--panel-2:#ffffff;
--line:rgba(12,18,28,.10);--line-strong:rgba(12,18,28,.20);
--text:#141820;--text-soft:#3a4452;--muted:#5a6675;--muted-2:#929cab;
--link:#2563a8;--link-hover:#1e4f76;
--bg-glow-1:rgba(37,99,168,.08);--bg-glow-2:rgba(176,116,20,.05);
--foundations:#b59a00;--architecture:#0d9488;--training:#b07414;--language:#3b54c9;
--generative:#db2777;--agents:#2f9e44;--evaluation:#0284c7;--systems:#ea580c;
--safety:#dc2626;--data:#0f9d6b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:radial-gradient(1200px 600px at 80% -10%, var(--bg-glow-1), transparent 60%),
radial-gradient(900px 500px at 0% 110%, var(--bg-glow-2), transparent 55%),var(--ink);
color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;
min-height:100vh;line-height:1.5;transition:background-color .3s ease, color .3s ease;
}
.wrap{max-width:1320px;margin:0 auto;padding:clamp(20px,4vw,52px) clamp(14px,3vw,40px) 80px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--panel-2);
color:var(--text);border:1px solid var(--line-strong);border-radius:8px;padding:10px 16px;
font-family:var(--mono);font-size:13px;text-decoration:none}
.skip-link:focus{left:12px}
.noscript-msg{margin:24px 0;padding:16px 18px;border:1px solid var(--line-strong);border-radius:12px;
background:var(--panel);color:var(--text-soft);font-size:14px;line-height:1.6}
header{margin-bottom:26px}
.header-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.header-top .eyebrow{margin-bottom:0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
color:var(--muted);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--line-strong)}
h1{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.02em;
font-size:clamp(28px,5.4vw,58px);margin:0 0 14px}
h1 .thin{font-weight:300;color:var(--muted)}
.lede{max-width:64ch;color:var(--text-soft);font-size:clamp(14px,1.4vw,16px);font-weight:300}
.meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;
font-family:var(--mono);font-size:12px;color:var(--muted)}
.meta b{color:var(--text);font-weight:500}
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:26px 0 18px}
.search{position:relative;flex:1 1 240px;max-width:340px}
.search input{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);
font-family:var(--mono);font-size:13px;padding:11px 14px 11px 38px;border-radius:10px;outline:none;
transition:border-color .18s ease, box-shadow .18s ease}
.search input::placeholder{color:var(--muted-2)}
.search input:focus{border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(49,120,198,.18)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.legend{display:flex;flex-wrap:wrap;gap:7px}
.chip{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);
font-family:var(--mono);font-size:11px;letter-spacing:.02em;padding:6px 11px;border-radius:999px;
cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all .16s ease}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px -1px var(--c)}
.chip:hover{color:var(--text);border-color:var(--line-strong)}
.chip.active{color:#0a0d12;background:var(--c);border-color:var(--c);font-weight:500}
.chip.active .dot{background:#0a0d12;box-shadow:none}
[data-theme="light"] .chip.active{color:#fff}
[data-theme="light"] .chip.active .dot{background:#fff}
.theme-toggle{appearance:none;display:inline-flex;align-items:center;gap:8px;
border:1px solid var(--line);background:var(--panel);color:var(--text);
font-family:var(--mono);font-size:12px;padding:9px 14px;border-radius:999px;cursor:pointer;
transition:border-color .16s ease,background-color .16s ease,color .16s ease}
.theme-toggle:hover{border-color:var(--line-strong)}
.theme-toggle:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.theme-toggle .tt-ico{width:15px;height:15px;display:inline-block}
.theme-toggle .tt-ico .sun{display:none}.theme-toggle .tt-ico .moon{display:inline}
[data-theme="light"] .theme-toggle .tt-ico .sun{display:inline}
[data-theme="light"] .theme-toggle .tt-ico .moon{display:none}
.scroller{overflow-x:auto;overflow-y:hidden;padding:6px 2px 10px;margin:0 -2px;
-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-color:var(--line-strong) transparent}
.scroller::-webkit-scrollbar{height:9px}
.scroller::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:9px}
.table{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-auto-rows:auto;gap:clamp(3px,.5vw,6px);min-width:880px}
.cell{--c:#3178c6;position:relative;aspect-ratio:1/1;border:1px solid var(--line);
background:linear-gradient(160deg, color-mix(in srgb, var(--c) 13%, var(--panel)) 0%, var(--panel) 78%);
border-radius:7px;padding:5px 5px 4px;cursor:pointer;text-align:left;color:var(--text);
display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .2s ease;font-family:var(--body)}
.cell::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--c);opacity:.7}
.cell .num{font-family:var(--mono);font-size:9px;color:var(--muted);line-height:1}
.cell .sym{font-family:var(--display);font-weight:600;color:var(--c);
font-size:clamp(13px,1.7vw,21px);line-height:1;letter-spacing:-.01em;margin-top:auto}
.cell .name{font-size:8px;line-height:1.12;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;margin-top:3px;min-height:0;color:var(--muted)}
.cell:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 55%,transparent);
box-shadow:0 10px 26px -14px var(--c),0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent) inset;z-index:3}
.cell:focus-visible{outline:2px solid var(--c);outline-offset:2px;z-index:4}
.cell.dim{opacity:.14;filter:saturate(.35)}
.cell.in-cat{opacity:1;filter:none;outline:2px dashed var(--c);outline-offset:3px;
box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent) inset,0 8px 22px -14px var(--c);z-index:2}
.cell.selected{transform:translateY(-3px);box-shadow:0 0 0 2px var(--c),0 14px 30px -14px var(--c);border-color:var(--c);z-index:4}
.marker{aspect-ratio:1/1;border:1px dashed var(--line-strong);border-radius:7px;display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:clamp(11px,1.5vw,16px);color:var(--muted);background:transparent}
.series-gap{grid-column:1 / -1;height:26px;display:flex;align-items:flex-end;padding-left:2px}
.series-gap span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.scrim{position:fixed;inset:0;background:rgba(5,7,10,.55);backdrop-filter:blur(2px);
opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:40}
.scrim.show{opacity:1;pointer-events:auto}
.detail{--c:#3178c6;position:fixed;z-index:50;right:24px;top:24px;width:min(400px,calc(100vw - 32px));
background:var(--panel-2);border:1px solid var(--line-strong);border-radius:16px;
padding:24px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);max-height:calc(100vh - 48px);overflow:auto;
transform:translateY(-12px) scale(.98);opacity:0;pointer-events:none;
transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .22s ease}
.detail.show{transform:none;opacity:1;pointer-events:auto}
.detail::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:16px 16px 0 0;background:var(--c)}
.detail .close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:8px;
border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s ease}
.detail .close:hover{color:var(--text);border-color:var(--line-strong)}
.detail .d-top{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.detail .d-num{font-family:var(--mono);font-size:12px;color:var(--muted)}
.detail .d-sym{font-family:var(--display);font-weight:700;font-size:46px;line-height:1;color:var(--c);letter-spacing:-.02em}
.detail .d-name{font-family:var(--display);font-weight:500;font-size:20px;margin:10px 0 14px}
.detail .d-cat{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);
padding:4px 10px;border-radius:999px;margin-bottom:16px;letter-spacing:.04em}
.detail .d-cat .dot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.detail .d-desc{color:var(--text-soft);font-size:14.5px;font-weight:300;line-height:1.62}
.byline{margin-top:14px;font-size:13px;color:var(--muted);font-weight:300}
a.ln{color:var(--link);text-decoration:none;font-weight:500;border-bottom:1px solid transparent;transition:border-color .15s ease,color .15s ease}
a.ln:hover{color:var(--link-hover);border-bottom-color:currentColor}
.visitors b{color:var(--text)}
footer{margin-top:42px;border-top:1px solid var(--line);padding-top:20px;
font-family:var(--mono);font-size:11px;color:var(--muted-2);line-height:1.7;max-width:74ch}
.foot-line{margin-bottom:6px}.foot-line b{color:var(--text)}
.foot-byline{margin-top:12px;font-family:var(--body);font-size:13px;color:var(--muted)}
.knowledge{--c:var(--training);position:relative;display:flex;gap:16px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
margin:24px 0 2px;padding:18px 20px 18px 22px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
background:linear-gradient(150deg,color-mix(in srgb,var(--c) 10%,var(--panel)),var(--panel) 72%)}
.knowledge::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.kn-main{flex:1 1 360px;min-width:0}
.kn-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
letter-spacing:.2em;text-transform:uppercase;color:var(--c);margin-bottom:9px}
.kn-eyebrow svg{width:14px;height:14px}
.kn-fact{margin:0;font-size:15px;line-height:1.6;color:var(--text-soft);font-weight:300}
.kn-fact b{color:var(--text);font-weight:500}
.kn-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.kn-jump{font-family:var(--mono);font-size:12px;color:var(--c);text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .15s ease;white-space:nowrap}
.kn-jump:hover{border-bottom-color:currentColor}.kn-jump[hidden]{display:none}
.kn-btn{appearance:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--c);
background:transparent;color:var(--c);font-family:var(--mono);font-size:12.5px;font-weight:500;
padding:10px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;
transition:background-color .16s ease,color .16s ease;touch-action:manipulation}
.kn-btn:hover{background:var(--c);color:var(--ink)}
.kn-btn:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.kn-fade{animation:knfade .35s ease}
@keyframes knfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.scroll-hint{display:none;align-items:center;gap:8px;margin:0 0 8px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em}
.scroll-hint svg{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (hover:none){.cell:active{transform:translateY(-2px)}}
.cell,.chip,.theme-toggle,.close,.search input,.skip-link{touch-action:manipulation}
@media (max-width:760px){.scroll-hint{display:flex}}
@media (max-width:640px){
.wrap{padding-top:18px}.header-top{margin-bottom:12px}.meta{gap:12px;font-size:11px}
.detail{right:0;left:0;bottom:0;top:auto;width:100%;border-radius:18px 18px 0 0;
transform:translateY(16px);max-height:82vh;overflow:auto;padding-top:30px}
.detail.show{transform:none}
.detail::after{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:4px;background:var(--line-strong)}
.controls{flex-direction:column;align-items:stretch;gap:12px}.search{max-width:none}
.search input{padding-top:13px;padding-bottom:13px}.legend{gap:8px}.chip{padding:9px 13px;font-size:12px}
.theme-toggle{align-self:flex-start;padding:11px 16px}
.knowledge{flex-direction:column;align-items:stretch;gap:14px}.kn-actions{justify-content:space-between}.kn-btn{flex:0 0 auto}
.table{min-width:760px}.cell .name{font-size:7.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.anim .cell{animation:pop .5s both;animation-delay:calc(var(--i,0)*5ms)}
@media print{
:root{--ink:#fff;--panel:#fff;--panel-2:#fff;--text:#000;--text-soft:#222;--muted:#444;--muted-2:#666;--line:#ccc;--line-strong:#999}
body{background:#fff;color:#000}.controls,.theme-toggle,.scrim,.detail,.skip-link,.search{display:none!important}
.scroller{overflow:visible}.table{min-width:0}
.cell{break-inside:avoid;box-shadow:none!important;transform:none!important}.cell::before{opacity:1}a.ln{color:#000}
}
.tod{display:inline-flex;align-items:center;gap:6px}
.tod a{color:var(--link);text-decoration:none;border-bottom:1px solid transparent;font-weight:500}
.tod a:hover{border-bottom-color:currentColor}
.toolbar{display:flex;flex-direction:column;gap:14px;margin:26px 0 18px}
.tb-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.tb-filters{gap:18px}
.pill-btn{appearance:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--c,var(--foundations));
background:transparent;color:var(--c,var(--foundations));font-family:var(--mono);font-size:12.5px;font-weight:500;
padding:10px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background-color .16s ease,color .16s ease;touch-action:manipulation}
.pill-btn:hover{background:var(--c,var(--foundations));color:var(--ink)}
.pill-btn:focus-visible{outline:2px solid var(--c,var(--foundations));outline-offset:2px}
.pill-btn svg{width:14px;height:14px}
.quiz-launch{--c:var(--agents)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.seg-btn{appearance:none;background:transparent;border:0;color:var(--muted);font-family:var(--mono);font-size:12px;
padding:9px 14px;cursor:pointer;transition:background-color .15s ease,color .15s ease;touch-action:manipulation}
.seg-btn+.seg-btn{border-left:1px solid var(--line)}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:color-mix(in srgb,var(--foundations) 16%,var(--panel));color:var(--text)}
.seg-btn:focus-visible{outline:2px solid var(--foundations);outline-offset:-2px}
.levelfilter{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lf-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.lchip{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);
font-family:var(--mono);font-size:11px;padding:6px 11px;border-radius:999px;cursor:pointer;transition:all .15s ease;touch-action:manipulation}
.lchip:hover{color:var(--text);border-color:var(--line-strong)}
.lchip.active{background:var(--text);color:var(--ink);border-color:var(--text);font-weight:500}
.progress{display:flex;align-items:center;gap:10px;min-width:180px}
.pbar{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden;min-width:90px}
.pbar-fill{height:100%;width:0;border-radius:6px;background:var(--agents);transition:width .35s ease}
.pcount{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.cell .check{position:absolute;top:3px;right:4px;width:11px;height:11px;border-radius:50%;
background:var(--agents);color:var(--ink);font-size:8px;line-height:11px;text-align:center;
opacity:0;transform:scale(.5);transition:opacity .15s ease,transform .15s ease}
.cell.learned .check{opacity:1;transform:none}
#tooltip{--c:var(--foundations);position:fixed;z-index:60;max-width:248px;pointer-events:none;
background:var(--panel-2);border:1px solid var(--line-strong);border-left:3px solid var(--c);
border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.45;color:var(--text-soft);
box-shadow:0 14px 34px -18px rgba(0,0,0,.8);opacity:0;transform:translate(-50%,-100%) translateY(-4px);transition:opacity .12s ease}
#tooltip.show{opacity:1}#tooltip.below{transform:translate(-50%,0) translateY(4px)}
#tooltip b{display:block;color:var(--c);font-family:var(--display);font-weight:600;font-size:13px;margin-bottom:3px}
.view{margin-top:6px}
.lv-group{margin-bottom:26px}
.lv-h{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.lv-h .lv-count{color:var(--muted-2)}
.lv-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.lv-item{--c:var(--foundations);display:flex;align-items:center;gap:12px;text-align:left;
border:1px solid var(--line);border-left:3px solid var(--c);border-radius:10px;padding:10px 12px;
background:var(--panel);cursor:pointer;color:var(--text);transition:border-color .15s ease,transform .15s ease;
font-family:var(--body);width:100%;min-width:0}
.lv-item:hover{transform:translateX(2px);border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.lv-item:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.lv-sym{font-family:var(--display);font-weight:600;color:var(--c);font-size:17px;min-width:30px}
.lv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lv-name{font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:7px}
.lv-name .lv-yr{font-family:var(--mono);font-size:10px;color:var(--muted-2);font-weight:400}
.lv-desc{display:block;max-width:100%;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-item .check{margin-left:auto;color:var(--agents);font-size:12px;opacity:0}
.lv-item.learned .check{opacity:1}
.lv-item[hidden]{display:none!important}
.lv-group[hidden]{display:none!important}
#view-timeline .tl-note{font-family:var(--mono);font-size:11px;color:var(--muted-2);margin:0 0 18px;line-height:1.5}
#view-timeline .lv-group{position:relative;padding-left:24px;margin-bottom:20px;border-left:2px solid var(--line)}
#view-timeline .lv-group::before{content:"";position:absolute;left:-7px;top:3px;width:11px;height:11px;
border-radius:50%;background:var(--foundations);box-shadow:0 0 0 3px var(--ink)}
#view-timeline .lv-h{color:var(--foundations);font-size:13px}
.totd{display:inline-flex;align-items:center;gap:11px;margin:16px 0 0;padding:9px 15px;border:1px solid var(--line);
border-radius:999px;background:var(--panel);cursor:pointer;font-family:var(--body);color:var(--text);
transition:border-color .15s ease;touch-action:manipulation;max-width:100%}
.totd[hidden]{display:none}.totd:hover{border-color:var(--line-strong)}
.totd-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.totd-sym{font-family:var(--display);font-weight:600;color:var(--foundations)}
.totd-name{font-size:13px;color:var(--text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.totd-go{color:var(--muted);font-family:var(--mono);margin-left:2px}
.quiz-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(5,7,10,.6);backdrop-filter:blur(3px)}
.quiz-overlay[hidden]{display:none}
.quiz-card{--c:var(--agents);position:relative;width:min(520px,100%);background:var(--panel-2);
border:1px solid var(--line-strong);border-radius:18px;padding:26px 24px 22px;box-shadow:0 40px 90px -40px rgba(0,0,0,.85)}
.quiz-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:18px 18px 0 0;background:var(--c)}
.quiz-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.quiz-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--c)}
.quiz-score{font-family:var(--mono);font-size:12px;color:var(--muted)}
.quiz-q{font-size:15px;line-height:1.55;color:var(--text-soft);margin:0 0 18px}
.quiz-opts{display:flex;flex-direction:column;gap:9px}
.quiz-opt{appearance:none;text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--text);
font-family:var(--body);font-size:14px;padding:12px 14px;border-radius:10px;cursor:pointer;
transition:border-color .15s ease,background-color .15s ease;touch-action:manipulation}
.quiz-opt:hover:not(:disabled){border-color:var(--line-strong)}.quiz-opt:disabled{cursor:default}
.quiz-opt.correct{border-color:var(--agents);background:color-mix(in srgb,var(--agents) 16%,var(--panel))}
.quiz-opt.wrong{border-color:var(--safety);background:color-mix(in srgb,var(--safety) 14%,var(--panel))}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;min-height:34px}
.quiz-feedback{font-size:13px;color:var(--muted)}
.quiz-feedback.ok{color:var(--agents)}.quiz-feedback.no{color:var(--safety)}
.d-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.d-example{margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--text-soft)}
.d-example pre{margin:0;font-family:var(--mono);white-space:pre-wrap;word-break:break-word}
.d-prod{margin-top:14px;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--data) 40%,transparent);
background:color-mix(in srgb,var(--data) 8%,var(--panel))}
.d-prod .d-label{color:var(--data)}
.d-prod pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--text-soft)}
.d-debug,.d-test,.d-live{margin-top:14px;padding:12px 14px;border-radius:10px}
.d-debug{border:1px solid color-mix(in srgb,var(--training) 40%,transparent);background:color-mix(in srgb,var(--training) 8%,var(--panel))}
.d-debug .d-label{color:var(--training)}
.d-test{border:1px solid color-mix(in srgb,var(--agents) 40%,transparent);background:color-mix(in srgb,var(--agents) 8%,var(--panel))}
.d-test .d-label{color:var(--agents)}
.d-live{border:1px solid color-mix(in srgb,var(--evaluation) 45%,transparent);background:color-mix(in srgb,var(--evaluation) 9%,var(--panel))}
.d-live .d-label{color:var(--evaluation)}
.d-debug pre,.d-test pre,.d-live pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--text-soft)}
.d-related{margin-top:16px}
.d-related-chips{display:flex;flex-wrap:wrap;gap:7px}
.r-chip{appearance:none;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);background:transparent;
color:var(--c);font-family:var(--mono);font-size:11.5px;padding:5px 10px;border-radius:999px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.r-chip:hover{background:var(--c);color:var(--ink)}
.d-actions{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.d-learn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
border:1px solid var(--c);background:transparent;color:var(--c);font-family:var(--mono);font-size:12.5px;
font-weight:500;padding:10px 14px;border-radius:10px;cursor:pointer;transition:all .15s ease;touch-action:manipulation}
.d-learn:hover{background:color-mix(in srgb,var(--c) 14%,transparent)}.d-learn.on{background:var(--c);color:var(--ink)}
.d-links{display:flex;gap:8px;flex-wrap:wrap}
.d-link{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);
font-family:var(--mono);font-size:11.5px;padding:7px 12px;border-radius:8px;cursor:pointer;text-decoration:none;transition:all .15s ease;touch-action:manipulation}
.d-link:hover{color:var(--text);border-color:var(--line-strong)}.d-link.copied{color:var(--agents);border-color:var(--agents)}
@media (max-width:640px){.tb-row{flex-direction:column;align-items:stretch}.seg{width:100%}.seg-btn{flex:1}.progress{min-width:0}.lv-items{grid-template-columns:1fr}}
.menu-fab{appearance:none;flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .16s ease,background-color .16s ease;touch-action:manipulation}
.menu-fab:hover{border-color:var(--line-strong)}
.menu-fab:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.menu-fab svg{width:19px;height:19px}
.header-top .eyebrow{margin-right:auto}
.tmenu-scrim{position:fixed;inset:0;background:rgba(5,7,10,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:75}
.tmenu-scrim.show{opacity:1;pointer-events:auto}
.tmenu{position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);z-index:76;background:var(--panel-2);border-right:1px solid var(--line-strong);box-shadow:0 0 60px -20px rgba(0,0,0,.8);padding:22px 16px;overflow-y:auto;transform:translateX(-104%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.tmenu.show{transform:none}
.tmenu-head{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:2px 4px 14px}
.tmenu-item{appearance:none;display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid transparent;border-radius:10px;padding:11px 12px;background:transparent;color:var(--text);font-family:var(--body);font-size:14px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease;touch-action:manipulation}
.tmenu-item:hover{background:color-mix(in srgb,var(--c,var(--link)) 12%,transparent);border-color:color-mix(in srgb,var(--c,var(--link)) 35%,transparent)}
.tmenu-item:focus-visible{outline:2px solid var(--c,var(--link));outline-offset:-2px}
.tmenu-item .tmenu-dot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--link));flex:0 0 auto;box-shadow:0 0 8px -1px var(--c,var(--link))}
.tmenu-item .tmenu-label{flex:1;min-width:0}
.tmenu-item .tmenu-count{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.tmenu-all{justify-content:center;color:var(--muted);border:1px solid var(--line);margin-bottom:10px;font-family:var(--mono);font-size:12px}
.tmenu-all:hover{color:var(--text);border-color:var(--line-strong);background:transparent}
@media print{.menu-fab,.tmenu,.tmenu-scrim{display:none!important}}
.asst-fab{position:fixed;right:20px;bottom:20px;z-index:80;width:56px;height:56px;border-radius:50%;
border:none;background:var(--foundations);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 12px 30px -10px var(--foundations),0 4px 10px -4px rgba(0,0,0,.5);transition:transform .18s ease, box-shadow .18s ease}
.asst-fab:hover{transform:translateY(-2px) scale(1.04)}
.asst-fab:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.asst-fab svg{width:26px;height:26px}
[data-theme="light"] .asst-fab{color:#fff}
.asst-fab .asst-badge{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;
background:var(--generative);border:2px solid var(--ink)}
.asst-panel{position:fixed;right:20px;bottom:88px;z-index:82;width:min(370px,calc(100vw - 32px));
height:min(560px,calc(100vh - 130px));display:flex;flex-direction:column;
background:var(--panel-2);border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;
box-shadow:0 30px 70px -24px rgba(0,0,0,.8);transform:translateY(14px) scale(.98);opacity:0;pointer-events:none;
transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.asst-panel.open{transform:none;opacity:1;pointer-events:auto}
.asst-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--foundations)}
.asst-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
.asst-avatar{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--foundations) 22%,var(--panel));
color:var(--foundations);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.asst-avatar svg{width:17px;height:17px}
.asst-title{flex:1;min-width:0}
.asst-title b{display:block;font-family:var(--display);font-size:14px;font-weight:600;color:var(--text)}
.asst-title span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.asst-close{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);
cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.asst-close:hover{color:var(--text);border-color:var(--line-strong)}
.asst-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;scrollbar-color:var(--line-strong) transparent}
.asst-log::-webkit-scrollbar{width:8px}.asst-log::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
.asst-msg{max-width:88%;font-size:13px;line-height:1.5;padding:9px 12px;border-radius:12px;word-break:break-word}
.asst-msg.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line);color:var(--text-soft);border-bottom-left-radius:4px}
.asst-msg.me{align-self:flex-end;background:color-mix(in srgb,var(--foundations) 20%,var(--panel));
border:1px solid color-mix(in srgb,var(--foundations) 45%,transparent);color:var(--text);border-bottom-right-radius:4px}
.asst-msg b{color:var(--text);font-weight:600}
.asst-msg pre{margin:8px 0 2px;font-family:var(--mono);font-size:11.5px;white-space:pre-wrap;word-break:break-word;
background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--text-soft);max-height:180px;overflow:auto}
.asst-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.asst-chip{appearance:none;border:1px solid color-mix(in srgb,var(--foundations) 40%,transparent);background:transparent;
color:var(--foundations);font-family:var(--mono);font-size:11px;padding:5px 10px;border-radius:999px;cursor:pointer;
transition:background-color .14s ease,color .14s ease}
.asst-chip:hover{background:var(--foundations);color:var(--ink)}
[data-theme="light"] .asst-chip:hover{color:#fff}
.asst-foot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);align-items:center}
.asst-input{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--text);font-family:var(--body);
font-size:13px;padding:10px 12px;border-radius:10px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.asst-input:focus{border-color:var(--line-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--foundations) 16%,transparent)}
.asst-send{width:38px;height:38px;flex:0 0 auto;border-radius:10px;border:none;background:var(--foundations);color:var(--ink);
cursor:pointer;display:flex;align-items:center;justify-content:center}
.asst-send:hover{filter:brightness(1.08)}[data-theme="light"] .asst-send{color:#fff}
.asst-send svg{width:17px;height:17px}
@media (max-width:640px){.asst-panel{right:12px;left:12px;width:auto;bottom:82px;height:min(70vh,520px)}.asst-fab{right:14px;bottom:14px}}
@media print{.asst-fab,.asst-panel{display:none!important}}
</style>
</head>
<body>
<a class="skip-link" href="#view-topics">Skip to the topics</a>
<div class="wrap">
<header>
<div class="header-top">
<button class="menu-fab" id="menu-fab" type="button" aria-label="Open topics menu" aria-expanded="false" title="Browse topics">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
</button>
<div class="eyebrow">A field guide · 150 terms · by topic</div>
<button class="theme-toggle" id="theme-toggle" aria-label="Switch color theme" aria-pressed="false" title="Switch color theme">
<span class="tt-ico" aria-hidden="true">
<svg class="moon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
<svg class="sun" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.2"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
</span>
<span class="tt-label" id="tt-label">Light</span>
</button>
</div>
<h1>The <span class="thin">JavaScript & TypeScript</span> Field Guide</h1>
<p class="lede">150 building blocks of modern JavaScript (ES2025/ES2026) and TypeScript 6 — organized <b>by topic</b>, not as a grid — from syntax and data structures to objects, functions, async, the standard library and the TypeScript type system, plus a dedicated topic of production-ready <b>cloud & fintech</b> patterns. Each card carries a plain-language definition, a code example, and where it matters, a production-grade snippet. Tap any card to dig in.</p>
<div class="meta">
<span><b id="count">150</b> terms</span>
<span><b>10</b> topics</span>
<span class="visitors" aria-live="polite"><b id="visitors-top">…</b> visitors</span>
<span class="tod">Term of the day: <a id="tod-link" href="#">…</a></span>
</div>
<div class="byline">Curated & built by <a class="ln" href="https://www.linkedin.com/in/abhaybhuva/" target="_blank" rel="noopener">Abhaykumar Bhuva ↗</a></div>
</header>
<section class="knowledge" aria-label="Out of the box fact">
<div class="kn-main">
<div class="kn-eyebrow">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.6 4.6L18 9l-4.4 1.4L12 15l-1.6-4.6L6 9l4.4-1.4z"/><path d="M19 14l.7 2 .2.1 2 .7-2 .7-.2.1-.7 2-.7-2-.1-.2-2-.7 2-.7.1-.2z"/></svg>
Out of the box
</div>
<p class="kn-fact" id="kn-fact" aria-live="polite"></p>
</div>
<div class="kn-actions">
<a class="kn-jump" id="kn-jump" href="#" hidden></a>
<button class="kn-btn" id="kn-surprise" type="button">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3h5v5M21 3l-7 7M8 21H3v-5M3 21l7-7M21 16v5h-5M14 14l7 7M3 8V3h5M10 10 3 3"/></svg>
Surprise me
</button>
</div>
</section>
<button class="totd" id="totd" type="button" hidden>
<span class="totd-k">Term of the day</span>
<span class="totd-sym" id="totd-sym"></span>
<span class="totd-name" id="totd-name"></span>
<span class="totd-go" aria-hidden="true">→</span>
</button>
<div class="toolbar">
<div class="tb-row">
<label class="search">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
<input id="search" type="text" placeholder="Search terms…" autocomplete="off" spellcheck="false" />
</label>
<div class="seg" id="viewseg" role="tablist" aria-label="View">
<button class="seg-btn active" data-view="topics" role="tab" aria-selected="true">Topics</button>
<button class="seg-btn" data-view="timeline" role="tab" aria-selected="false">Timeline</button>
<button class="seg-btn" data-view="list" role="tab" aria-selected="false">A–Z</button>
</div>
<button class="pill-btn quiz-launch" id="quiz-open" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.1 9a3 3 0 1 1 4.4 2.6c-.8.5-1.5 1.2-1.5 2.4"/><path d="M12 17h.01"/></svg>
Quiz me
</button>
</div>
<div class="legend" id="legend"></div>
<div class="tb-row tb-filters">
<div class="levelfilter" id="levelfilter">
<span class="lf-label">Level</span>
<button class="lchip active" data-level="0">All</button>
<button class="lchip" data-level="1">Beginner</button>
<button class="lchip" data-level="2">Intermediate</button>
<button class="lchip" data-level="3">Advanced</button>
</div>
<div class="progress" title="Terms you've marked as learned">
<div class="pbar"><div class="pbar-fill" id="pbar-fill"></div></div>
<span class="pcount" id="pcount">Learned 0 / 150</span>
</div>
</div>
</div>
<noscript>
<div class="noscript-msg">This interactive guide loads its 150 concepts with JavaScript. Please enable JavaScript to view and explore it.</div>
</noscript>
<div class="view" id="view-topics"></div>
<div class="view" id="view-timeline" hidden></div>
<div class="view" id="view-list" hidden></div>
<footer id="footer">
<div class="foot-line" aria-live="polite"><b id="visitors-bottom">…</b> visitors to this page</div>
<div class="foot-line" id="foot-meta"></div>
<div class="foot-line"><a class="ln" id="suggest-link" href="https://github.com/abhaybhuvagithub/neuralstack/issues/new" target="_blank" rel="noopener">Suggest a term ↗</a></div>
<div class="foot-byline">Curated & built by <a class="ln" href="https://www.linkedin.com/in/abhaybhuva/" target="_blank" rel="noopener">Abhaykumar Bhuva ↗</a></div>
<div class="foot-line" style="margin-top:6px">Built with <a class="ln" href="https://www.anthropic.com/claude" target="_blank" rel="noopener">Anthropic Claude ↗</a></div>
</footer>
</div>
<div class="tmenu-scrim" id="tmenu-scrim"></div>
<nav class="tmenu" id="tmenu" aria-label="Topics navigation">
<div class="tmenu-head">Jump to a topic</div>
<button class="tmenu-item tmenu-all" id="tmenu-all" type="button">Show all topics</button>
<div id="tmenu-list"></div>
</nav>
<button class="asst-fab" id="asst-fab" type="button" aria-label="Open the page assistant" title="Assistant">
<span class="asst-badge" aria-hidden="true"></span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a7 7 0 0 1 7 7v1a7 7 0 0 1-7 7H8l-4 3v-4a7 7 0 0 1-1-3.5V10a7 7 0 0 1 7-7z"/><circle cx="9" cy="11" r="1"/><circle cx="15" cy="11" r="1"/></svg>
</button>
<aside class="asst-panel" id="asst-panel" role="dialog" aria-label="Page assistant">
<div class="asst-head">
<div class="asst-avatar" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="7" width="16" height="12" rx="3"/><path d="M12 3v4M9 13h.01M15 13h.01"/></svg></div>
<div class="asst-title"><b>Assistant</b><span>acts on this page · no external AI</span></div>
<button class="asst-close" id="asst-close" type="button" aria-label="Close assistant">✕</button>
</div>
<div class="asst-log" id="asst-log"></div>
<div class="asst-foot">
<input class="asst-input" id="asst-input" type="text" placeholder="Ask or command… e.g. explain, search, quiz" autocomplete="off" spellcheck="false" />
<button class="asst-send" id="asst-send" type="button" aria-label="Send"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg></button>
</div>
</aside>
<div class="scrim" id="scrim"></div>
<aside class="detail" id="detail" role="dialog" aria-modal="false" aria-labelledby="d-name">
<button class="close" id="close" aria-label="Close">✕</button>
<div class="d-top"><span class="d-num" id="d-num"></span><span class="d-sym" id="d-sym"></span></div>
<div class="d-name" id="d-name"></div>
<span class="d-cat" id="d-cat"><span class="dot"></span><span id="d-cat-label"></span></span>
<p class="d-desc" id="d-desc"></p>
<div class="d-example" id="d-example" hidden><span class="d-label">Example</span><pre id="d-example-text"></pre></div>
<div class="d-prod" id="d-prod" hidden><span class="d-label">Production pattern · cloud / fintech</span><pre id="d-prod-text"></pre></div>
<div class="d-debug" id="d-debug" hidden><span class="d-label">Debugging</span><pre id="d-debug-text"></pre></div>
<div class="d-test" id="d-test" hidden><span class="d-label">Testing</span><pre id="d-test-text"></pre></div>
<div class="d-live" id="d-live" hidden><span class="d-label">From a live app</span><pre id="d-live-text"></pre></div>
<div class="d-related" id="d-related" hidden><span class="d-label">Related</span><div class="d-related-chips" id="d-related-chips"></div></div>
<div class="d-actions">
<button class="d-learn" id="d-learned" type="button"></button>
<div class="d-links">
<button class="d-link" id="d-copy" type="button">Copy definition</button>
<button class="d-link" id="d-sharelink" type="button">Copy link</button>
<a class="d-link" id="d-more" target="_blank" rel="noopener">Learn more ↗</a>
</div>
</div>
</aside>
<div id="tooltip" aria-hidden="true"></div>
<div class="quiz-overlay" id="quiz" hidden role="dialog" aria-modal="true" aria-label="Quiz">
<div class="quiz-card">
<button class="close" id="quiz-close" aria-label="Close quiz">✕</button>
<div class="quiz-head">
<span class="quiz-eyebrow">Quiz</span>
<span class="quiz-score" id="quiz-score">Score 0 / 0</span>
</div>
<p class="quiz-q" id="quiz-q"></p>
<div class="quiz-opts" id="quiz-opts"></div>
<div class="quiz-foot">
<span class="quiz-feedback" id="quiz-feedback"></span>
<button class="pill-btn quiz-launch" id="quiz-next" type="button" hidden>Next →</button>
</div>
</div>
</div>
<script>
const FAMILIES = {
foundations:{"label":"Language Basics","c":"#f7df1e"},
training:{"label":"Types & Data Structures","c":"#ffd043"},
architecture:{"label":"Objects, Classes & Prototypes","c":"#2dd4bf"},
generative:{"label":"Functions & Functional","c":"#ff6fae"},
language:{"label":"Async & Concurrency","c":"#6c8cff"},
systems:{"label":"Modern JS (ES2024–ES2026)","c":"#ff8a4c"},
agents:{"label":"TypeScript Type System","c":"#3178c6"},
evaluation:{"label":"Modules, Runtime & Tooling","c":"#38bdf8"},
safety:{"label":"Errors, Testing & Safety","c":"#f6685e"},
data:{"label":"Cloud & Fintech","c":"#31c48d"}
};
// symbol -> [name, family, description]
const D = {
letc:["let / const","foundations","Block-scoped bindings; const forbids reassignment (not deep immutability). Prefer them over var."],
varr:["var","foundations","Function-scoped, hoisted declaration kept only for legacy code — avoid in new code."],
hoist:["Hoisting","foundations","Declarations are moved to the top of their scope; let/const stay in a temporal dead zone until defined."],
scope:["Scope & closures","foundations","Lexical scoping: inner functions capture the variables of the scope they were defined in."],
typeof:["typeof","foundations","A unary operator returning a value's primitive type as a string."],
coerce:["Type coercion","foundations","Implicit conversion between types; a frequent source of bugs, tamed by ===."],
eqeq:["=== vs ==","foundations","=== compares without coercion; always prefer it over the loosely-equal ==."],
truthy:["Truthy / falsy","foundations","Values coerce to boolean in conditions; \"\", 0, null, undefined, NaN are falsy."],
tmpl:["Template literals","foundations","Backtick strings with ${expr} interpolation and multi-line support."],
tern:["Ternary","foundations","The cond ? a : b expression for choosing a value inline."],
optchain:["Optional chaining ?.","foundations","Short-circuits to undefined instead of throwing when a link is null/undefined."],
nullish:["Nullish ?? / ??=","foundations","Supplies a default only when the left side is null or undefined (not other falsy values)."],
spread:["Spread / rest","foundations","... expands iterables into calls/literals and collects the rest of arguments or elements."],
destr:["Destructuring","foundations","Unpacks arrays and objects into named bindings, with defaults and renaming."],
thisk:["this","foundations","The call-site-dependent receiver; arrow functions capture the enclosing this."],
numt:["number","training","IEEE-754 double — fast but inexact; never store money as a plain number."],
bigint:["BigInt","training","Arbitrary-precision integers (10n) — ideal for money in minor units and large ids."],
strt:["string","training","Immutable UTF-16 text with a rich method set and template-literal syntax."],
boolt:["boolean","training","true / false, produced by comparisons and logical operators."],
symt:["Symbol","training","Unique, immutable identifiers used as non-colliding object keys and well-known hooks."],
arrt:["Array","training","An ordered, resizable list with functional methods (map, filter, reduce)."],
objt:["Object","training","A dynamic collection of key/value pairs — the core aggregate of JavaScript."],
mapt:["Map","training","A keyed collection preserving insertion order and allowing any key type."],
sett:["Set","training","A collection of unique values with fast membership and set operations."],
weak:["WeakMap / WeakSet","training","Collections holding keys weakly so the GC can reclaim them — good for private data and caches."],
json:["JSON","training","Parse and stringify data interchange; add a reviver/replacer for Dates and BigInt."],
datet:["Date / Temporal","training","Legacy Date, superseded by the immutable, timezone-correct Temporal API (ES2026)."],
regex:["RegExp","training","Pattern matching for search, validation and replacement over strings."],
typedarr:["Typed Arrays","training","Fixed-type binary buffers (Uint8Array, Float16Array) for bytes and numeric data."],
nullund:["null / undefined","training","Two distinct empties: undefined is 'not set', null is an intentional 'no value'."],
objlit:["Object literal","architecture","{ } syntax with shorthand, computed keys and method definitions."],
proto:["Prototype chain","architecture","Objects delegate property lookups up a chain of prototypes — JS's inheritance model."],
classk:["class","architecture","Syntactic sugar over prototypes for constructors, methods and inheritance."],
ctor:["constructor","architecture","The method run by new to initialize a fresh instance."],
extends:["extends / super","architecture","Derive a subclass and call the base constructor or methods via super."],
getset:["get / set","architecture","Accessor properties that run logic behind plain property syntax."],
staticm:["static","architecture","Members on the class itself, including static blocks for initialization."],
privf:["Private #fields","architecture","Truly private class members prefixed with # and inaccessible outside."],
instof:["instanceof","architecture","Tests whether an object's prototype chain includes a constructor's prototype."],
mixin:["Mixin","architecture","Composing behavior by copying or wrapping, since JS has single prototype inheritance."],
objcreate:["Object.create","architecture","Creates an object with an explicit prototype, no class required."],
newk:["new","architecture","Allocates an object, links its prototype and runs the constructor."],
factory:["Factory function","architecture","A plain function returning objects — closures over private state, no this or new."],
freeze:["Object.freeze","architecture","Shallowly prevents adding, removing or changing an object's properties."],
entries:["Object.entries / keys","architecture","Iterate an object's own enumerable properties as arrays or a Map."],
fndecl:["Function declaration","generative","A named, hoisted function usable before its definition in the source."],
arrow:["Arrow function","generative","Concise (a) => a syntax with no own this, arguments or prototype."],
closf:["Closure","generative","A function retaining access to its defining scope's variables after that scope returns."],
hof:["Higher-order function","generative","A function that takes or returns other functions — the basis of composition."],
callb:["Callback","generative","A function passed to be invoked later, on completion or per element."],
iife:["IIFE","generative","An immediately-invoked function expression that runs once and scopes its internals."],
curry:["Currying / partial","generative","Transforming a multi-arg function into a chain of single-arg calls; bind fixes leading args."],
defparam:["Default parameters","generative","Parameter defaults evaluated when an argument is undefined."],
restp:["Rest parameters","generative","Collect trailing arguments into a real array with ...args."],
pure:["Pure functions","generative","Deterministic, side-effect-free functions — easy to test, cache and parallelize."],
mfr:["map / filter / reduce","generative","Declarative array transforms that replace imperative loops."],
compose:["Composition","generative","Building pipelines by combining small functions, e.g. pipe(f, g, h)."],
genf:["Generators function*","generative","Functions that yield a lazy, pausable stream of values and can receive input."],
memo:["Memoization","generative","Caching a pure function's results keyed by its arguments."],
recur:["Recursion","generative","A function calling itself; mind the call-stack limit and prefer iteration when deep."],
promise:["Promise","language","An object representing the eventual result of an async operation."],
asyncawait:["async / await","language","Write asynchronous code in a linear, readable style over promises."],
evloop:["Event loop","language","The single-threaded scheduler that runs tasks, timers and microtasks to completion."],
microtask:["Microtasks","language","Promise callbacks run in a high-priority queue that drains before the next macrotask."],
settimeout:["setTimeout / setInterval","language","Schedule macrotasks after a delay; not a precise timer."],
pall:["Promise.all","language","Runs promises concurrently and resolves with all results, rejecting on the first failure."],
pallsettled:["Promise.allSettled","language","Waits for every promise and reports each outcome without short-circuiting."],
prace:["Promise.race / any","language","Settles as soon as the first promise settles (race) or fulfills (any)."],
abort:["AbortController","language","A signal to cancel fetches and awaited work — the basis of timeouts."],
asynciter:["for await…of","language","Consumes an async iterable, awaiting each value — perfect for paged streams."],
worker:["Web / Worker threads","language","True parallelism in a separate thread, communicating by messages."],
fetchapi:["fetch","language","The promise-based HTTP client built into browsers and Node."],
eventtarget:["EventTarget / emitter","language","Publish/subscribe eventing via addEventListener or Node's EventEmitter."],
qmicro:["queueMicrotask","language","Schedules a callback on the microtask queue, after the current job."],
withresolvers:["Promise.withResolvers","language","Creates a promise with its resolve/reject exposed — clean deferreds (ES2024)."],
esm:["ES Modules","systems","Static import/export with tree-shaking and top-level await."],
tla:["Top-level await","systems","Await at module scope, letting a module block on async setup."],
arrat:["Array.at()","systems","Relative indexing, so arr.at(-1) reads the last element."],
sclone:["structuredClone","systems","A built-in deep clone for most data, replacing JSON round-trips."],
groupby:["Object.groupBy","systems","Partitions an iterable into groups keyed by a callback (ES2024)."],
findlast:["findLast / findLastIndex","systems","Search an array from the end for the last match."],
iterhelp:["Iterator helpers","systems","Lazy .map/.filter/.take chained directly on iterators (ES2025)."],
reesc:["RegExp.escape","systems","Safely escape user input before building a dynamic RegExp (ES2025)."],
f16:["Float16Array","systems","A half-precision typed array using half the memory of Float32 (ES2025)."],
temporal:["Temporal","systems","An immutable, timezone-aware date/time API replacing Date (ES2026)."],
usingk:["using / await using","systems","Explicit resource management that disposes on scope exit, like RAII (ES2026)."],
errcause:["Error cause","systems","new Error(msg, { cause }) chains the original failure for better traces."],
changearr:["Immutable array methods","systems","toSorted, toReversed, with return copies instead of mutating (ES2023)."],
sumprecise:["Math.sumPrecise","systems","Exact summation of floats without accumulated rounding error (ES2026)."],
iserror:["Error.isError","systems","Reliably detects Error instances across realms (ES2026)."],
annot:["Type annotations","agents","Explicit : Type on variables, parameters and returns, checked by tsc, erased at runtime."],
iface:["interface","agents","A named object shape that can be extended and merged; ideal for public contracts."],
typealias:["type alias","agents","Names any type — unions, tuples, mapped and conditional types included."],
union:["Union types","agents","A | B means a value is one of several types; narrow before use."],
intersect:["Intersection types","agents","A & B combines multiple types into one that satisfies all."],
generics:["Generics","agents","Type parameters <T> for reusable, type-safe functions and classes."],
enumt:["enum / const enum","agents","A named set of constants; prefer unions of literals or as const in modern TS."],
tuple:["Tuple types","agents","Fixed-length, positionally-typed arrays like [number, string]."],
literalt:["Literal types","agents","Exact-value types such as \"buy\" | \"sell\" for precise APIs."],
keyoft:["keyof / indexed","agents","keyof T is the union of T's keys; T[K] indexes a property type."],
mapped:["Mapped types","agents","Transform every property of a type, the basis of Partial and Readonly."],
cond:["Conditional types","agents","T extends U ? X : Y computes types, with infer to extract parts."],
utility:["Utility types","agents","Built-ins like Partial, Pick, Omit, Record and ReturnType."],
narrow:["Narrowing / guards","agents","typeof, in and custom is-predicates refine a union within a branch."],
satisfies:["satisfies / as const","agents","Validate a value against a type without widening it; as const freezes literals."],
node:["Node.js","evaluation","A V8-based server runtime with async I/O and a vast package ecosystem."],
npm:["npm / pnpm","evaluation","Package managers that install, resolve and lock dependencies from a registry."],
pkgjson:["package.json","evaluation","The project manifest declaring scripts, dependencies and module type."],
esmcjs:["ESM vs CommonJS","evaluation","The two module systems; ESM (import) is the standard, CJS (require) the legacy."],
bundler:["Bundler (Vite/esbuild)","evaluation","Tools that resolve, transform and bundle modules for fast dev and small output."],
tsconfig:["tsconfig.json","evaluation","Configures the TypeScript compiler: target, strictness and module resolution."],
transpile:["Transpilation","evaluation","Compiling modern/TS syntax down to a target the runtime supports."],
v8:["V8 / JIT","evaluation","The engine that JIT-compiles and optimizes hot JavaScript to machine code."],
gcjs:["Garbage collection","evaluation","Automatic memory reclamation via generational, mark-and-sweep collection."],
deno:["Deno / Bun","evaluation","Modern runtimes with built-in TS, testing and web-standard APIs."],
lint:["ESLint / Prettier","evaluation","A linter that catches bug patterns and a formatter that standardizes style."],
srcmap:["Source maps","evaluation","Map compiled output back to original source for debugging."],
vitest:["Vitest / Jest","evaluation","Fast unit-test runners with mocking, snapshots and coverage."],
trycatch:["try / catch","safety","Runs risky code and handles thrown errors; pair with finally for cleanup."],
throwk:["throw","safety","Raises any value as an error — throw Error objects, not strings."],
errtypes:["Error types","safety","Built-ins like TypeError and RangeError plus your own subclasses."],
customerr:["Custom errors","safety","Domain error classes (InsufficientFundsError) make failures explicit and catchable."],
finallyk:["finally","safety","Always runs after try/catch for releasing resources."],
optcatch:["Optional catch binding","safety","catch { } without a parameter when the error isn't needed (ES2019)."],
strictnull:["strictNullChecks","safety","TS flags possible null/undefined access at compile time."],
exhaust:["Exhaustiveness","safety","A never-typed default proves a switch handled every union case."],
assertf:["Assertions","safety","console.assert and assertion functions that narrow types when they pass."],
zodv:["Schema validation","safety","Runtime validators (Zod/Valibot) that parse untrusted input into typed data."],
immut:["Immutability","safety","Object.freeze and copy-on-write patterns to prevent accidental mutation."],
typeguard:["Type predicates","safety","Functions returning x is T that let the compiler narrow safely."],
unknownt:["unknown vs any","safety","unknown forces a check before use; any disables type safety — avoid it."],
nevert:["never","safety","The type of values that never occur — unreachable code and impossible states."],
eslintrules:["Static analysis","safety","Linters and tsc --noUncheckedIndexedAccess catch bugs before runtime."],
moneyjs:["Money (no float)","data","Store amounts as BigInt minor units or a decimal library (dinero.js/big.js), never number."],
decimaljs:["Decimal library","data","big.js / decimal.js give exact base-10 arithmetic with explicit rounding for currency."],
idemp:["Idempotency key","data","A client key making a retried payment or POST safe to apply exactly once."],
retry:["Retry + backoff","data","Re-issue transient failures with exponential backoff and jitter."],
circuit:["Circuit breaker","data","Stop calling a failing dependency for a cool-down to prevent cascading outages."],
timeout:["Timeouts / AbortSignal","data","Bound every call with AbortSignal.timeout(ms) so requests can't hang forever."],
httpc:["HTTP client (undici/fetch)","data","Pooled, keep-alive HTTP for calling services; set timeouts and retries."],
webframe:["Express / Fastify","data","Web frameworks for routing, middleware and validation in Node services."],
zodapi:["Zod validation","data","Validate and coerce request bodies at the edge before they reach domain logic."],
jwt:["JWT auth","data","Verify signed bearer tokens (jose) with issuer, audience and expiry checks."],
hmacv:["HMAC webhook verify","data","Validate inbound webhooks with a constant-time HMAC comparison."],
ratelimit:["Rate limiting","data","Token-bucket throttling to shield APIs and enforce per-client quotas."],
mq:["Message Queue","data","Durable async messaging (Kafka/SQS) decoupling producers; consume idempotently."],
otel:["OpenTelemetry","data","Vendor-neutral traces, metrics and logs for distributed Node services."],
secretsenv:["Secrets / config","data","Load secrets from env or a vault, validated at boot — never commit them."],
ledger:["Double-entry ledger","data","Record every movement as balanced debits and credits in an append-only journal."],
coldstart:["Serverless cold start","data","Minimize bundle size and lazy-load to cut Lambda/edge cold-start latency."]
};
// difficulty: 1 beginner, 2 intermediate, 3 advanced (default 2)
const LEVEL = {
letc:1,
varr:2,
hoist:2,
scope:2,
typeof:1,
coerce:2,
eqeq:1,
truthy:1,
tmpl:1,
tern:1,
optchain:1,
nullish:1,
spread:2,
destr:2,
thisk:3,
numt:1,
bigint:2,
strt:1,
boolt:1,
symt:3,
arrt:1,
objt:1,
mapt:2,
sett:2,
weak:3,
json:1,
datet:2,
regex:2,
typedarr:3,
nullund:1,
objlit:1,
proto:3,
classk:1,
ctor:1,
extends:2,
getset:2,
staticm:2,
privf:2,
instof:2,
mixin:3,
objcreate:3,
newk:1,
factory:2,
freeze:2,
entries:1,
fndecl:1,
arrow:1,
closf:2,
hof:2,
callb:1,
iife:3,
curry:3,
defparam:1,
restp:2,
pure:2,
mfr:1,
compose:3,
genf:3,
memo:2,
recur:2,
promise:1,
asyncawait:1,
evloop:2,
microtask:3,
settimeout:1,
pall:2,
pallsettled:2,
prace:2,
abort:2,
asynciter:3,
worker:3,
fetchapi:1,
eventtarget:2,
qmicro:3,
withresolvers:3,
esm:1,
tla:2,
arrat:1,
sclone:2,
groupby:2,
findlast:2,
iterhelp:3,
reesc:2,
f16:3,
temporal:2,
usingk:3,
errcause:2,
changearr:2,
sumprecise:3,
iserror:2,
annot:1,
iface:1,
typealias:1,
union:1,
intersect:2,
generics:2,
enumt:2,
tuple:2,
literalt:2,
keyoft:3,
mapped:3,
cond:3,
utility:2,
narrow:2,
satisfies:2,
node:1,
npm:1,
pkgjson:1,
esmcjs:2,
bundler:2,
tsconfig:2,
transpile:2,
v8:3,
gcjs:2,
deno:2,
lint:1,
srcmap:2,
vitest:2,
trycatch:1,
throwk:1,
errtypes:2,
customerr:2,
finallyk:1,
optcatch:2,
strictnull:2,
exhaust:3,
assertf:2,
zodv:2,
immut:2,
typeguard:2,
unknownt:2,
nevert:3,
eslintrules:2,
moneyjs:1,
decimaljs:2,
idemp:3,
retry:2,
circuit:3,
timeout:2,
httpc:2,
webframe:1,
zodapi:2,
jwt:2,
hmacv:3,
ratelimit:2,
mq:2,
otel:2,
secretsenv:2,
ledger:3,
coldstart:2
};
const LEVEL_NAME={1:"Beginner",2:"Intermediate",3:"Advanced"};
function getLevel(s){ return LEVEL[s]||2; }
// approximate year each feature became prominent (JS edition / TS)
const YEAR = {
letc:2015,
arrow:2015,
promise:2015,
classk:2015,
tmpl:2015,
spread:2015,
destr:2015,
genf:2015,
symt:2015,
mapt:2015,
sett:2015,
esm:2015,
defparam:2015,
restp:2015,
asyncawait:2017,
entries:2017,
optchain:2020,
nullish:2020,
bigint:2020,
pallsettled:2020,
tla:2021,
weak:2015,
privf:2022,
arrat:2022,
optcatch:2019,
groupby:2024,
withresolvers:2024,
changearr:2023,
errcause:2022,
sclone:2022,
iterhelp:2025,
reesc:2025,
f16:2025,
temporal:2026,
usingk:2026,
sumprecise:2026,
iserror:2026,
annot:2012,
iface:2012,
generics:2012,
typealias:2012,
satisfies:2022,
utility:2016,
mapped:2016,
cond:2018,
node:2009,
npm:2010,
deno:2020,
vitest:2021,
zodv:2020,
jwt:2015,
otel:2021,
fetchapi:2017
};
const RELATED = {
moneyjs:["decimaljs","bigint","ledger"],
decimaljs:["moneyjs","ledger","numt"],
idemp:["retry","circuit","hmacv"],
retry:["circuit","timeout","httpc"],
circuit:["retry","timeout","otel"],
ledger:["moneyjs","decimaljs","zodapi"],
promise:["asyncawait","pall","withresolvers"],
asyncawait:["promise","asynciter","abort"],
classk:["proto","ctor","extends"],
generics:["utility","cond","mapped"],
union:["narrow","literalt","intersect"],
zodapi:["zodv","annot","hmacv"],
temporal:["datet","usingk","sumprecise"],
hmacv:["jwt","idemp","secretsenv"],
mfr:["compose","hof","iterhelp"]
};
function getRelated(s){
if(RELATED[s]) return RELATED[s].filter(x=>D[x]);
const fam=D[s][1];
return Object.keys(D).filter(x=>x!==s && D[x][1]===fam).slice(0,3);
}
// short concept examples
const EXAMPLE = {
letc:"const rate = 0.029; let count = 0;",