-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjavascript-mastery-guide.html
More file actions
943 lines (901 loc) · 48.8 KB
/
javascript-mastery-guide.html
File metadata and controls
943 lines (901 loc) · 48.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavaScript Mastery — A to Z Guide</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Syne:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0f1117;color:#ffffff;font-family:'Syne',sans-serif;min-height:100vh}
/* ── TOP BAR ── */
.topbar{background:#161b27;border-bottom:1px solid #2a3348;padding:.65rem 1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;position:sticky;top:0;z-index:300}
.logo{font-size:.95rem;font-weight:700;color:#eab308}
.logo span{color:#e2e8f0;font-weight:400;font-size:.78rem}
.topbar-right{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.srch{background:#1e2535;border:1px solid #2a3348;border-radius:8px;padding:.38rem .75rem;color:#ffffff;font-family:'Syne',sans-serif;font-size:.8rem;width:200px;outline:none}
.srch:focus{border-color:#eab308;background:#252d40}
.srch::placeholder{color:#6b7280}
.fbtn{background:#1e2535;border:1px solid #2a3348;border-radius:8px;padding:.36rem .65rem;color:#e2e8f0;font-size:.7rem;cursor:pointer;font-family:'Syne',sans-serif;transition:all .15s;white-space:nowrap}
.fbtn:hover,.fbtn.on{background:#252d40;color:#eab308;border-color:#eab30855}
.mob-toggle{display:none;background:#eab308;border:none;border-radius:8px;padding:.38rem .75rem;color:#000;font-size:.75rem;font-weight:700;cursor:pointer;font-family:'Syne',sans-serif;gap:.35rem;align-items:center;white-space:nowrap}
/* ── DESKTOP LAYOUT ── */
.layout{display:flex;height:calc(100vh - 50px)}
.sidebar{width:280px;min-width:280px;background:#161b27;border-right:1px solid #2a3348;overflow-y:auto;height:100%;position:sticky;top:50px}
.sb-inner{padding:.4rem .35rem}
.main{flex:1;overflow-y:auto}
.wrap{padding:1.25rem 1.5rem 2rem;max-width:920px}
/* ── MOBILE OVERLAY ── */
.mob-overlay{display:none;position:fixed;inset:0;background:#0f1117;z-index:400;flex-direction:column}
.mob-overlay.open{display:flex}
.mob-header{background:#161b27;border-bottom:1px solid #2a3348;padding:.65rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.mob-header-title{font-size:.9rem;font-weight:700;color:#ffffff}
.mob-close{background:#1e2535;border:1px solid #2a3348;border-radius:8px;padding:.35rem .7rem;color:#e2e8f0;font-size:.75rem;cursor:pointer;font-family:'Syne',sans-serif}
.mob-search{padding:.6rem .75rem;background:#161b27;border-bottom:1px solid #2a3348}
.mob-search input{width:100%;background:#1e2535;border:1px solid #2a3348;border-radius:8px;padding:.4rem .75rem;color:#ffffff;font-family:'Syne',sans-serif;font-size:.82rem;outline:none}
.mob-search input:focus{border-color:#eab308}
.mob-list{flex:1;overflow-y:auto;padding:.4rem .5rem}
.mob-filters{padding:.4rem .75rem .5rem;background:#161b27;display:flex;gap:.4rem;flex-wrap:wrap}
/* ── TOPIC ITEMS ── */
.qi{display:flex;align-items:flex-start;gap:.45rem;padding:.52rem .6rem;border-radius:7px;cursor:pointer;border:1px solid transparent;transition:all .12s;margin-bottom:2px}
.qi:hover{background:#1e2535;border-color:#2a3348}
.qi.active{background:#1e2535;border-left:3px solid #eab308;border-color:#eab30833}
.qi.hidden{display:none}
.qn{min-width:20px;font-size:.67rem;font-weight:700;color:#4b5563;margin-top:2px;font-family:'JetBrains Mono',monospace;flex-shrink:0}
.qi.active .qn{color:#eab308}
.qt{font-size:.75rem;color:#ffffff;line-height:1.4;flex:1}
.qi.active .qt{color:#ffffff}
/* ── WELCOME ── */
.welcome{text-align:center;padding:3.5rem 1rem}
.welcome h2{font-size:1.35rem;font-weight:700;color:#e2e8f0;margin-bottom:.6rem}
.welcome p{font-size:.84rem;color:#ffffff;line-height:1.75}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-top:1.5rem;text-align:left}
.wcard{background:#161b27;border:1px solid #2a3348;border-radius:8px;padding:.75rem}
.wcard h4{font-size:.72rem;font-weight:700;color:#eab308;margin-bottom:.3rem}
.wcard p{font-size:.72rem;color:#ffffff;line-height:1.5}
/* ── CONTENT RENDERING ── */
.prog-strip{background:#1e2535;border-radius:4px;height:3px;margin-bottom:1rem;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,#eab308,#facc15);border-radius:4px;transition:width .4s}
.qhead{display:flex;align-items:flex-start;gap:.65rem;margin-bottom:.85rem;flex-wrap:wrap}
.qnum{background:#eab308;color:#000;font-size:.67rem;font-weight:700;padding:3px 8px;border-radius:10px;font-family:'JetBrains Mono',monospace;margin-top:3px;flex-shrink:0}
.qtitle{font-size:1.05rem;font-weight:700;color:#ffffff;line-height:1.35;flex:1}
.badges{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.8rem;align-items:center}
.fbadge{font-size:.66rem;padding:2px 7px;border-radius:10px;border:1px solid;font-weight:600;color:#ffffff}
.def-section{background:#1e2535;border-left:3px solid #eab308;border-radius:0 8px 8px 0;padding:.75rem 1rem;font-size:.83rem;line-height:1.8;color:#ffffff;margin-bottom:1.1rem}
.def-section strong{color:#eab308}
.code-block code{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:#e5e7eb;line-height:1.6;display:block;white-space:pre}
.output-block{background:#000000;border:1px solid #10b98133;border-radius:10px;padding:1rem;margin-bottom:1.5rem;overflow-x:auto}
.output-block code{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:#10b981;line-height:1.4;display:block;white-space:pre}
.slabel{font-size:.65rem;font-weight:700;letter-spacing:.12em;color:#eab308;text-transform:uppercase;margin:1.5rem 0 .5rem;padding-left:2px}
.rcard{background:#161b27;border:1px solid #2a3348;border-radius:8px;padding:.7rem;margin-bottom:1.1rem}
.rcard h4{font-size:.65rem;font-weight:700;color:#facc15;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}
.rcard li{font-size:.76rem;color:#ffffff;list-style:none;padding:2px 0 2px 13px;position:relative;line-height:1.55}
.rcard li::before{content:'→';position:absolute;left:0;color:#eab308;font-size:.6rem;top:4px}
.code-block{background:#161b27;border:1px solid #2a3348;border-radius:8px;padding:.8rem;margin-bottom:1.1rem;overflow-x:auto}
.code-block code{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:#ffffff;line-height:1.6;display:block;white-space:pre}
/* Syntax Highlighting */
.kw{color:#fbbf24} /* Keyword */
.str{color:#34d399} /* String */
.com{color:#6b7280} /* Comment */
.fn{color:#60a5fa} /* Function */
.num{color:#f87171} /* Number/Bool */
.obj{color:#c084fc} /* Object/Prop */
.expl-box{background:#1a1f2e;border:1px solid #2a3348;border-radius:8px;padding:.75rem;margin-bottom:1.1rem;font-size:.78rem;color:#ffffff;line-height:1.7}
.expl-box strong{color:#facc15}
.navrow{display:flex;gap:.5rem;margin-top:1.4rem;padding-top:1rem;border-top:1px solid #2a3348}
.nbtn{background:#1e2535;border:1px solid #2a3348;border-radius:8px;padding:.5rem .8rem;color:#ffffff;font-size:.74rem;cursor:pointer;font-family:'Syne',sans-serif;transition:all .15s;flex:1;text-align:center;line-height:1.45}
.nbtn:hover{background:#252d40;color:#ffffff;border-color:#eab308}
.nbtn.off{opacity:.25;pointer-events:none}
/* Categories */
.badge-basic{background:#065f46;border-color:#10b981}
.badge-intermediate{background:#1e3a8a;border-color:#3b82f6}
.badge-advanced{background:#5b21b6;border-color:#a78bfa}
@media(max-width:768px){
.topbar{padding:.5rem .75rem}
.srch{display:none}
.fbtn:not(.mob-toggle){display:none}
.layout{display:block;height:auto}
.sidebar{display:none}
.main{width:100%}
.wrap{padding:1rem .75rem 2rem}
.mob-toggle{display:flex}
.qtitle{font-size:.95rem}
.wgrid{grid-template-columns:1fr}
}
</style>
</head>
<body>
<div class="topbar">
<div style="display:flex;align-items:center;gap:.75rem">
<a href="index.html" style="color:#e2e8f0;text-decoration:none;font-size:.8rem;padding:4px 8px;border:1px solid #2a3348;border-radius:6px;transition:all .15s">← Hub</a>
<div class="logo" style="cursor:pointer" onclick="location.reload()">JavaScript <span>A → Z Mastery</span></div>
</div>
<div class="topbar-right">
<input type="text" class="srch" id="searchbox" placeholder="Search JS topics..." onkeyup="filterTopics()">
<button class="fbtn" onclick="toggleFilter('all')" id="filter-all">All</button>
<button class="fbtn" onclick="toggleFilter('basic')" id="filter-basic">Basic</button>
<button class="fbtn" onclick="toggleFilter('advanced')" id="filter-adv">Advanced</button>
<button class="mob-toggle" onclick="toggleMob()">☰ Menu</button>
</div>
</div>
<div class="mob-overlay" id="moboverlay">
<div class="mob-header">
<div class="mob-header-title">JS Core Topics</div>
<button class="mob-close" onclick="toggleMob()">✕</button>
</div>
<div style="padding: .5rem .75rem; background: #161b27; border-bottom: 1px solid #2a3348;">
<a href="index.html" style="color: #e2e8f0; text-decoration: none; font-size: .75rem; display: flex; align-items: center; gap: .4rem;">
<span>←</span> Back to Mastery Hub
</a>
</div>
<div class="mob-search">
<input type="text" id="searchbox-mob" placeholder="Search..." onkeyup="filterTopicsMob()">
</div>
<div class="mob-list" id="moblist"></div>
</div>
<div class="layout">
<div class="sidebar">
<div style="padding: 1rem .75rem .5rem; border-bottom: 1px solid #2a3348; margin-bottom: .5rem;">
<a href="index.html" style="color: #e2e8f0; text-decoration: none; font-size: .7rem; display: flex; align-items: center; gap: .4rem;">
<span>←</span> Back to Mastery Hub
</a>
</div>
<div class="sb-inner" id="deskqlist"></div>
</div>
<div class="main">
<div class="wrap" id="content">
<div class="welcome">
<h2>Modern JavaScript Deep Dive</h2>
<p>Explore the engine, syntax, and patterns of the world's most popular language. From primitive types to complex event-driven architectures.</p>
<div class="wgrid">
<div class="wcard"><h4>Fundamentals</h4><p>Master scoping, types, and the nuances of JS execution.</p></div>
<div class="wcard"><h4>Async JS</h4><p>Deep dive into the Event Loop, Promises, and Async/Await.</p></div>
<div class="wcard"><h4>Advanced Patterns</h4><p>Closures, Prototypal Inheritance, and Modern ES6+.</p></div>
</div>
</div>
</div>
</div>
</div>
<script>
const topics = [
{id:1, title:"Variables & Scoping (var, let, const)", cat:"basic", level:"Fundamentals"},
{id:2, title:"Primitive vs Reference Types", cat:"basic", level:"Data Structure"},
{id:3, title:"Type Coercion & Strict Equality", cat:"basic", level:"Syntax"},
{id:4, title:"Operators & Template Literals", cat:"basic", level:"Syntax"},
{id:5, title:"Control Flow & Error Handling", cat:"basic", level:"Logic"},
{id:6, title:"Loops & Iteration Patterns", cat:"basic", level:"Logic"},
{id:7, title:"Functions & Arrow Functions", cat:"basic", level:"Logic"},
{id:8, title:"Scopes & Closures", cat:"intermediate", level:"Advanced JS"},
{id:9, title:"Hoisting & The TDZ", cat:"intermediate", level:"Core Engine"},
{id:10, title:"The 'this' Keyword & Binding", cat:"intermediate", level:"OOP Fundamentals"},
{id:11, title:"Array Mastery: Iteration Methods", cat:"basic", level:"Data Science"},
{id:12, title:"Destructuring, Rest & Spread", cat:"intermediate", level:"Modern ES6"},
{id:13, title:"Prototypal Inheritance", cat:"advanced", level:"Core Engine"},
{id:14, title:"Classes & Private Fields", cat:"intermediate", level:"Modern OOP"},
{id:15, title:"Promises & Async/Await", cat:"intermediate", level:"Async JS"},
{id:16, title:"The Event Loop & Concurrency", cat:"advanced", level:"Core Engine"},
{id:17, title:"Fetch API & HTTP Requests", cat:"intermediate", level:"Web APIs"},
{id:18, title:"Modules (ESM vs CommonJS)", cat:"intermediate", level:"Architecture"},
{id:19, title:"Sets, Maps & WeakRefs", cat:"intermediate", level:"Data Structure"},
{id:20, title:"DOM Navigation & Selection", cat:"basic", level:"Browser"},
{id:21, title:"Event Bubbling & Delegation", cat:"intermediate", level:"Browser"},
{id:22, title:"Storage: Local, Session & Cookies", cat:"basic", level:"Browser"},
{id:23, title:"Regular Expressions (RegExp)", cat:"intermediate", level:"Advanced"},
{id:24, title:"Symbols & Hidden Properties", cat:"advanced", level:"Advanced"},
{id:25, title:"Iterators & Generators", cat:"advanced", level:"Advanced"},
{id:26, title:"Memory Management & GC", cat:"advanced", level:"Core Engine"},
{id:27, title:"Functional Programming Concepts", cat:"advanced", level:"Patterns"},
{id:28, title:"Proxies & Reflection", cat:"advanced", level:"Metaprogramming"},
{id:29, title:"Shadow DOM & Web Components", cat:"advanced", level:"Browser"},
{id:30, title:"Modern Web APIs (Observer, etc.)", cat:"intermediate", level:"Browser"},
{id: 31, title: "Recursion", cat: "advanced", level: "Patterns"},
{id: 32, title: "Web Workers", cat: "advanced", level: "Browser"},
{id: 33, title: "Custom Errors", cat: "intermediate", level: "Logic"},
{id: 34, title: "Intl API", cat: "intermediate", level: "Browser"},
{id: 35, title: "Typed Arrays", cat: "advanced", level: "Data Structure"},
{id: 36, title: "Geolocation & Permissions", cat: "intermediate", level: "Web APIs"},
{id: 37, title: "Canvas API & Graphics", cat: "advanced", level: "Browser"},
{id: 38, title: "Performance API & Core Web Vitals", cat: "advanced", level: "Browser"},
{id: 39, title: "IndexedDB (NoSQL Storage)", cat: "advanced", level: "Storage"},
{id: 40, title: "Advanced Patterns & Logic", cat: "advanced", level: "Patterns"}
];
const content = {
1: {
def: "Understanding the difference between <code>var</code>, <code>let</code>, and <code>const</code> is the foundation of modern JS scoping.",
examples: [
{title:"Variable Declaration", code:`<span class="kw">var</span> x = 10; <span class="com">// Function scoped</span>
<span class="kw">let</span> y = 20; <span class="com">// Block scoped</span>
<span class="kw">const</span> z = 30; <span class="com">// Block scoped, constant</span>
<span class="kw">if</span> (<span class="kw">true</span>) {
<span class="kw">var</span> x = 50;
<span class="kw">let</span> y = 100;
}
console.log(x, y);`, output: "50 20"}
],
expl: [
"<strong>var</strong> is hoisted and function-scoped. It can lead to unintended variable leaking.",
"<strong>let</strong> and <strong>const</strong> were introduced in ES6 to provide block-scoping (inside {}).",
"<strong>const</strong> requires initialization and cannot be reassigned, but the data it points to (like objects) can still be modified unless frozen.",
"Always prefer <strong>const</strong> by default, <strong>let</strong> if reassignment is needed, and never use <strong>var</strong>."
]
},
2: {
def: "Primitives are passed by <strong>value</strong>, while objects are passed by <strong>reference</strong>.",
examples: [
{title:"Value vs Reference", code:`<span class="kw">let</span> a = 10;
<span class="kw">let</span> b = a;
b = 20; <span class="com">// a is still 10</span>
<span class="kw">let</span> obj1 = { name: <span class="str">'JS'</span> };
<span class="kw">let</span> obj2 = obj1;
obj2.name = <span class="str">'TS'</span>; <span class="com">// obj1.name is now 'TS'</span>
console.log(a, obj1.name);`, output: "10 \"TS\""}
],
expl: [
"Primitives are immutable and compared by value.",
"Reference types are stored in the <strong>heap</strong> and compared by their memory address (reference).",
"To truly copy a reference type, you must <strong>clone</strong> it (e.g., using spread operator or structuredClone)."
]
},
3: {
def: "JS automatically converts types in certain operations (coercion). Use <code>===</code> for strict equality.",
examples: [
{title:"Coercion & Equality", code:`console.log(5 + <span class="str">'5'</span>); <span class="com">// '55'</span>
console.log(5 - <span class="str">'2'</span>); <span class="com">// 3</span>
console.log(<span class="kw">false</span> == 0); <span class="com">// true (coercion)</span>
console.log(<span class="kw">false</span> === 0); <span class="com">// false (strict)</span>`, output: "\"55\"\n3\ntrue\nfalse"}
],
expl: [
"<strong>==</strong> performs type coercion, <strong>===</strong> does not.",
"Coercion can lead to confusing results like <code>[] == ![]</code> being true.",
"Always use <strong>===</strong> to avoid hard-to-track bugs.",
"Empty objects <code>{}</code> and arrays <code>[]</code> are always truthy."
]
},
4: {
def: "Modern JS uses <strong>Template Literals</strong> for cleaner string concatenation.",
examples: [
{title:"Operators & Strings", code:`<span class="kw">let</span> name = <span class="str">'Dev'</span>;
<span class="kw">let</span> age = 25;
<span class="kw">const</span> msg = <span class="str">\`User: \${name}, Age: \${age}\`</span>;
console.log(msg);`, output: "\"User: Dev, Age: 25\""}
],
expl: [
"Arithmetic: +, -, *, /, %, ** (exponent).",
"Logical: && (AND), || (OR), ! (NOT).",
"Optional Chaining (?.) allows reading properties deep in objects without checking every level.",
"Nullish Coalescing (??) is safer than || when working with 0 or empty strings."
]
},
5: {
def: "Control flow (if/else, switch) and <code>try/catch</code> for robust error handling.",
examples: [
{title:"Try/Catch Logic", code:`<span class="kw">try</span> {
<span class="kw">throw new</span> Error(<span class="str">'Oops!'</span>);
} <span class="kw">catch</span> (err) {
console.log(err.message);
} <span class="kw">finally</span> {
console.log(<span class="str">'Done'</span>);
}`, output: "\"Oops!\"\n\"Done\""}
],
expl: [
"Use <strong>if/else</strong> for complex conditions, <strong>switch</strong> for discrete values.",
"<strong>Try/Catch</strong> prevents the entire script from crashing on error.",
"You can throw custom objects or built-in Error types.",
"<strong>finally</strong> is useful for cleanup (like closing a loading spinner)."
]
},
6: {
def: "Use <code>for...of</code> for arrays and <code>for...in</code> for objects.",
examples: [
{title:"Iterating Structures", code:`<span class="kw">const</span> arr = [1, 2, 3];
<span class="kw">for</span> (<span class="kw">const</span> val <span class="kw">of</span> arr) {
console.log(val);
}
<span class="kw">const</span> obj = { a: 1 };
<span class="kw">for</span> (<span class="kw">const</span> key <span class="kw">in</span> obj) {
console.log(key);
}`, output: "1\n2\n3\n\"a\""}
],
expl: [
"Standard <strong>for</strong> loops are powerful but verbose.",
"<strong>while</strong> is best when the number of iterations is unknown.",
"<strong>for...of</strong> is for values, <strong>for...in</strong> is for keys.",
"Don't use <strong>for...in</strong> for arrays; it can be slow and iterate over prototype properties."
]
},
7: {
def: "Arrow functions provide a shorter syntax and don't have their own <code>this</code>.",
examples: [
{title:"Function Styles", code:`<span class="kw">function</span> regular(name) { <span class="kw">return</span> <span class="str">'Hi '</span> + name; }
<span class="kw">const</span> arrow = (name) => <span class="str">\`Hi \${name}\`</span>;
console.log(regular(<span class="str">'Bob'</span>));
console.log(arrow(<span class="str">'Bob'</span>));`, output: "\"Hi Bob\"\n\"Hi Bob\""}
],
expl: [
"Function declarations are hoisted; expressions are not.",
"Arrow functions are concise and great for callbacks.",
"Arrow functions inherit <code>this</code> from the lexical scope.",
"Rest parameters (<code>...args</code>) collect multiple arguments into an array."
]
},
8: {
def: "A <strong>Closure</strong> is a function that remembers its outer variables even after the outer function has finished.",
examples: [
{title:"Closure Counter", code:`<span class="kw">function</span> makeCounter() {
<span class="kw">let</span> count = 0;
<span class="kw">return function</span>() {
<span class="kw">return</span> ++count;
};
}
<span class="kw">const</span> counter = makeCounter();
console.log(counter());
console.log(counter());`, output: "1\n2"}
],
expl: [
"Closures allow functions to 'remember' variables even after the parent function has executed.",
"They are the basis for <strong>encapsulation</strong> and private variables in JS.",
"Crucial for functional programming and event handlers.",
"Warning: Overuse can lead to memory leaks if references aren't cleared."
]
},
9: {
def: "<strong>Hoisting</strong> is JS's behavior of moving declarations to the top. <strong>TDZ</strong> makes let/const safer.",
examples: [
{title:"Hoisting in Action", code:`console.log(a); <span class="com">// undefined</span>
<span class="kw">var</span> a = <span class="num">5</span>;
sayHi(); <span class="com">// Works!</span>
<span class="kw">function</span> sayHi() { console.log(<span class="str">"Hi"</span>); }`, output: "undefined\n\"Hi\""}
],
expl: [
"Only the declaration is hoisted, not the initialization.",
"Function declarations are hoisted entirely.",
"The <strong>Temporal Dead Zone</strong> (TDZ) is the period between entering scope and declaration where let/const cannot be accessed.",
"Hoisting was an implementation detail that became a language feature."
]
},
10: {
def: "The value of <code>this</code> depends on how a function is called. Use <code>bind</code>, <code>call</code>, or <code>apply</code> to control it.",
examples: [
{title:"Context Binding", code:`<span class="kw">const</span> person = {
name: <span class="str">'Alice'</span>,
greet: <span class="kw">function</span>() { console.log(<span class="kw">this</span>.name); }
};
<span class="kw">const</span> bound = person.greet.bind(person);
bound();`, output: "\"Alice\""}
],
expl: [
"Value depends on <strong>how</strong> a function is called, not where it's defined.",
"Global scope: <code>this</code> is window/global.",
"Method: <code>this</code> is the owner object.",
"Call/Apply/Bind allow manual control over <code>this</code>.",
"Arrow functions inherit <code>this</code>, regular functions don't."
]
},
11: {
def: "Array methods like <code>map</code>, <code>filter</code>, and <code>reduce</code> are essential for functional data processing.",
examples: [
{title:"Array Methods", code:`<span class="kw">const</span> nums = [1, 2, 3, 4];
<span class="kw">const</span> doubled = nums.map(n => n * 2);
<span class="kw">const</span> evens = nums.filter(n => n % 2 === 0);
console.log(doubled);
console.log(evens);`, output: "[2, 4, 6, 8]\n[2, 4]"}
],
expl: [
"<strong>map</strong> returns a NEW array of the same length.",
"<strong>filter</strong> returns a NEW array with elements that pass the test.",
"<strong>reduce</strong> is the most powerful; it can transform an array into any shape (object, number, etc.).",
"Avoid mutating original arrays; use these non-mutating methods instead."
]
},
12: {
def: "<strong>Destructuring</strong> allows unpacking values from arrays or properties from objects into distinct variables.",
examples: [
{title:"Object & Array Sugar", code:`<span class="com">// Object Destructuring</span>
<span class="kw">const</span> settings = { theme: <span class="str">'dark'</span>, volume: <span class="num">80</span> };
<span class="kw">const</span> { theme, volume: vol = <span class="num">50</span> } = settings;
<span class="com">// Spread (...) - Shallow copy/merge</span>
<span class="kw">const</span> newSettings = { ...settings, volume: <span class="num">100</span> };
<span class="com">// Rest (...) - Collect remaining items</span>
<span class="kw">const</span> [first, ...others] = [<span class="num">1</span>, <span class="num">2</span>, <span class="num">3</span>, <span class="num">4</span>];
console.log(vol, others);`, output: "80\n[2, 3, 4]"}
],
expl: [
"Destructuring makes code cleaner and reduces repetitive property access.",
"You can set default values during destructuring.",
"The spread operator <code>...</code> performs a <strong>shallow copy</strong>.",
"The rest operator must always be the last element in the pattern."
]
},
13: {
def: "Objects inherit properties from other objects via the <strong>Prototype Chain</strong>.",
examples: [
{title:"Prototypes", code:`<span class="kw">const</span> animal = { eats: <span class="kw">true</span> };
<span class="kw">const</span> rabbit = Object.create(animal);
console.log(rabbit.eats);
console.log(Object.getPrototypeOf(rabbit) === animal);`, output: "true\ntrue"}
],
expl: [
"Every object has an internal link to another object called its <strong>prototype</strong>.",
"When you access a property, JS looks at the object, then its prototype, then the prototype's prototype (the <strong>chain</strong>).",
"Methods should usually be placed on the prototype to save memory.",
"<code>__proto__</code> is the actual link; <code>prototype</code> is the object used to build that link for new instances."
]
},
14: {
def: "Classes are syntactic sugar over prototypes. Use <code>#</code> for private fields.",
examples: [
{title:"Modern Classes", code:`<span class="kw">class</span> User {
#id = 123;
<span class="kw">constructor</span>(name) { <span class="kw">this</span>.name = name; }
getId() { <span class="kw">return</span> <span class="kw">this</span>.#id; }
}
<span class="kw">const</span> u = <span class="kw">new</span> User(<span class="str">'Dev'</span>);
console.log(u.name, u.getId());`, output: "\"Dev\" 123"}
],
expl: [
"Classes support constructors, static methods, and inheritance (<code>extends</code>).",
"<strong>#</strong> denotes a private field that cannot be accessed outside the class.",
"Classes are not hoisted; you must define them before using them.",
"Classes always execute in <strong>strict mode</strong>."
]
},
15: {
def: "<strong>Promises</strong> and <strong>Async/Await</strong> make asynchronous code look synchronous.",
examples: [
{title:"Async Flow", code:`<span class="kw">const</span> wait = (ms) => <span class="kw">new</span> Promise(r => setTimeout(r, ms));
<span class="kw">async function</span> run() {
console.log(<span class="str">'Start'</span>);
<span class="kw">await</span> wait(100);
console.log(<span class="str">'End'</span>);
}
run();`, output: "\"Start\"\n\"End\""}
],
expl: [
"States: <strong>Pending</strong>, <strong>Fulfilled</strong>, <strong>Rejected</strong>.",
"Promises resolve the 'callback hell' by allowing chaining.",
"<strong>Microtasks</strong> (Promise callbacks) have higher priority than Macrotasks (setTimeout).",
"Use <code>Promise.all()</code> to run multiple async tasks in parallel."
]
},
16: {
def: "The <strong>Event Loop</strong> handles non-blocking I/O by offloading tasks to the browser APIs.",
examples: [
{title:"Loop Priority", code:`console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);`, output: "1\n4\n3\n2"}
],
expl: [
"<strong>Call Stack</strong>: Where synchronous code is executed.",
"<strong>Web APIs</strong>: Where async tasks (timers, fetch) wait.",
"<strong>Microtask Queue</strong>: Where Promise callbacks wait (Higher priority).",
"<strong>Callback Queue</strong>: Where timers and events wait (Lower priority).",
"The loop waits for the stack to be empty before pulling from queues."
]
},
17: {
def: "<code>fetch()</code> is the modern way to make network requests.",
examples: [
{title:"Fetch Data", code:`fetch(<span class="str">'https://api.github.com'</span>)
.then(res => res.json())
.then(data => console.log(<span class="str">'API Success'</span>))
.catch(err => console.log(<span class="str">'Failed'</span>));`, output: "\"API Success\""}
],
expl: [
"<code>fetch()</code> returns a Promise that resolves to a Response object.",
"It only rejects on network failure, not on 404/500 errors (use <code>res.ok</code>).",
"<code>await</code> pauses function execution until the promise resolves.",
"Always wrap <code>await</code> in a try/catch block."
]
},
18: {
def: "<strong>ES Modules</strong> (import/export) are standard in the browser and Node.js.",
examples: [
{title:"Module Export", code:`<span class="com">// math.js</span>
<span class="kw">export const</span> add = (a, b) => a + b;
<span class="com">// main.js</span>
<span class="kw">import</span> { add } <span class="kw">from</span> <span class="str">'./math.js'</span>;
console.log(add(5, 5));`, output: "10"}
],
expl: [
"ESM is the official standard and works in both browsers and Node.",
"CommonJS is synchronous; ESM is asynchronous.",
"Named exports must be imported with curly braces; default exports don't.",
"Modules always use strict mode automatically."
]
},
19: {
def: "<strong>Maps</strong> store key-value pairs, while <strong>Sets</strong> store unique values.",
examples: [
{title:"New Collections", code:`<span class="kw">const</span> s = <span class="kw">new</span> Set([1, 1, 2]);
<span class="kw">const</span> m = <span class="kw">new</span> Map([[<span class="str">'a'</span>, 1]]);
console.log(s.size, m.get(<span class="str">'a'</span>));`, output: "2 1"}
],
expl: [
"<strong>Set</strong> is great for removing duplicates from an array (<code>[...new Set(arr)]</code>).",
"<strong>Map</strong> maintains insertion order, unlike regular Objects.",
"<strong>WeakMap/WeakSet</strong> allow garbage collection of keys if no other references exist (prevents memory leaks).",
"Use <code>.size</code> to get the length of a Map/Set."
]
},
20: {
def: "The <strong>DOM</strong> (Document Object Model) is the interface that allows JS to interact with HTML.",
examples: [
{title:"DOM Interaction", code:`<span class="com">// Selection</span>
<span class="kw">const</span> btn = document.querySelector(<span class="str">'.btn'</span>);
console.log(btn ? <span class="str">"Found"</span> : <span class="str">"Missing"</span>);`, output: "\"Found\""}
],
expl: [
"<code>querySelector</code> is the modern, CSS-selector based way to find elements.",
"<code>querySelectorAll</code> returns a <strong>NodeList</strong> (not a true array, but has forEach).",
"Use <code>classList</code> instead of <code>className</code> for safer class manipulation.",
"Avoid frequent DOM updates; batch them to prevent performance issues (reflows/repaints)."
]
},
21: {
def: "Event propagation (Bubbling and Capturing) and <strong>Delegation</strong> are fundamental to efficient event handling in the browser.",
examples: [
{title:"Delegation Pattern", code:`document.querySelector(<span class="str">'ul'</span>).addEventListener(<span class="str">'click'</span>, (e) => {
<span class="kw">if</span> (e.target.tagName === <span class="str">'LI'</span>) {
console.log(<span class="str">"Item clicked:"</span>, e.target.textContent);
}
});`, output: "\"Item clicked: Item 1\""}
],
expl: [
"<strong>Bubbling</strong>: Event starts at the target and moves UP to the document root (default).",
"<strong>Capturing</strong>: Event starts at the root and moves DOWN to the target.",
"<strong>Delegation</strong> saves memory by using a single listener for many elements.",
"<code>e.preventDefault()</code> stops the default browser action (like following a link)."
]
},
22: {
def: "Browsers provide several ways to store data client-side with different lifespans and sizes.",
examples: [
{title:"Storage APIs", code:`localStorage.setItem(<span class="str">'theme'</span>, <span class="str">'dark'</span>);
console.log(localStorage.getItem(<span class="str">'theme'</span>));`, output: "\"dark\""}
],
expl: [
"<strong>LocalStorage</strong> stays even after browser restart (up to 5-10MB).",
"<strong>SessionStorage</strong> clears when the tab/window is closed.",
"<strong>Cookies</strong> are primarily for auth and are limited to 4KB.",
"Always JSON stringify objects before storing in Local/SessionStorage."
]
},
23: {
def: "<strong>Regular Expressions</strong> (RegExp) are patterns used to match character combinations in strings.",
examples: [
{title:"Regex Testing", code:`const regex = /hello/i;
console.log(regex.test(<span class="str">"Hello World"</span>));`, output: "true"}
],
expl: [
"<code>/pattern/flags</code>: Flags like <code>g</code> (global) and <code>i</code> (case-insensitive).",
"<code>.test()</code> returns true/false; <code>.match()</code> returns details.",
"Use backslashes to escape special characters like <code>.</code> or <code>?</code>.",
"Modern JS supports <strong>Named Capture Groups</strong> for clearer results."
]
},
24: {
def: "<strong>Symbols</strong> are unique and immutable primitive values, often used as unique keys for object properties.",
examples: [
{title:"Unique Keys", code:`<span class="kw">const</span> sym = Symbol(<span class="str">'id'</span>);
console.log(typeof sym);`, output: "\"symbol\""}
],
expl: [
"Symbols are guaranteed to be unique; even <code>Symbol('a') === Symbol('a')</code> is false.",
"They don't show up in <code>for...in</code> or <code>Object.keys()</code>.",
"Well-known symbols (like <code>Symbol.iterator</code>) define core language behaviors.",
"Use them to avoid property name collisions in large applications or libraries."
]
},
25: {
def: "<strong>Generators</strong> are functions that can be exited and later re-entered, maintaining their context.",
examples: [
{title:"Generator Flow", code:`<span class="kw">function*</span> gen() { <span class="kw">yield</span> 1; }
<span class="kw">const</span> it = gen();
console.log(it.next().value);`, output: "1"}
],
expl: [
"Generators use the <code>function*</code> syntax and <code>yield</code> keyword.",
"Calling a generator returns an <strong>Iterator</strong> object.",
"They are perfect for lazy evaluation and managing complex async flows.",
"<code>yield*</code> can be used to delegate to another generator."
]
},
26: {
def: "JavaScript manages memory automatically via <strong>Garbage Collection</strong> using the Mark-and-Sweep algorithm.",
examples: [
{title:"Reference Tracking", code:`let obj = { x: 1 };
obj = null; <span class="com">// Object now eligible for GC</span>
console.log(<span class="str">'Object released'</span>);`, output: "\"Object released\""}
],
expl: [
"Objects are collected when they are no longer <strong>reachable</strong> from the root.",
"Avoid global variables; they are never collected.",
"Always clear timers (<code>clearInterval</code>) and remove event listeners.",
"Circular references are handled by modern collectors, but depth can still be an issue."
]
},
27: {
def: "JS supports functional patterns like <strong>Higher-Order Functions</strong>, <strong>Immutability</strong>, and <strong>Pure Functions</strong>.",
examples: [
{title:"Pure Function", code:`<span class="kw">const</span> add = (a, b) => a + b;
console.log(add(2, 3));`, output: "5"}
],
expl: [
"Higher-Order Functions take or return other functions.",
"Immutability means never changing data, only creating updated copies.",
"Functional programming makes code more predictable and easier to test.",
"Declarative code (what to do) is often better than imperative code (how to do it)."
]
},
28: {
def: "The <strong>Proxy</strong> object allows you to create a wrapper for another object, intercepting fundamental operations.",
examples: [
{title:"Proxy Interceptor", code:`<span class="kw">const</span> user = { name: <span class="str">'Alice'</span> };
<span class="kw">const</span> proxy = <span class="kw">new</span> Proxy(user, {
get: (target, prop) => {
console.log(<span class="str">'Reading'</span>, prop);
<span class="kw">return</span> target[prop];
}
});
console.log(proxy.name);`, output: "\"Reading name\"\n\"Alice\""}
],
expl: [
"Proxies can intercept property access, assignment, function calls, etc.",
"<strong>Reflect</strong> is a built-in object that provides methods for interceptable operations.",
"Common uses: Logging, validation, data binding (like in Vue.js), and profiling.",
"Performance warning: Proxies add a small overhead to every operation."
]
},
29: {
def: "<strong>Web Components</strong> allow creating reusable, encapsulated custom elements with their own styling.",
examples: [
{title:"Custom Element", code:`<span class="kw">class</span> MyBtn <span class="kw">extends</span> HTMLElement {
<span class="kw">constructor</span>() {
<span class="kw">super</span>();
<span class="kw">this</span>.attachShadow({ mode: <span class="str">'open'</span> });
<span class="kw">this</span>.shadowRoot.innerHTML = <span class="str">\`<button><slot></slot></button>\`</span>;
}
}
customElements.define(<span class="str">'my-btn'</span>, MyBtn);`, output: "Custom element <my-btn> registered"}
],
expl: [
"<strong>Shadow DOM</strong> provides style encapsulation (CSS inside doesn't leak out).",
"<strong>HTML Templates</strong> (<code><template></code>) define markup that isn't rendered until needed.",
"<strong>Custom Elements</strong> allow extending the browser's HTML vocabulary.",
"Web Components work across any framework (React, Vue, or Vanilla)."
]
},
30: {
def: "Modern browsers offer powerful APIs for performance, layout, and device hardware.",
examples: [
{title:"Intersection Observer", code:`<span class="com">// Lazy loading or scroll animations</span>
<span class="kw">const</span> observer = <span class="kw">new</span> IntersectionObserver((entries) => {
entries.forEach(e => {
<span class="kw">if</span> (e.isIntersecting) e.target.classList.add(<span class="str">'visible'</span>);
});
});
observer.observe(document.querySelector(<span class="str">'.heavy-image'</span>));`, output: "Observer attached to .heavy-image"}
],
expl: [
"<strong>Intersection Observer</strong>: Detect when elements enter the viewport.",
"<strong>Resize Observer</strong>: Detect when an element's size changes.",
"<strong>Mutation Observer</strong>: Detect changes to the DOM tree.",
"<strong>Web Workers</strong>: Run heavy JS tasks in a background thread to keep the UI smooth."
]
},
31: {
def: "Recursion is when a function calls itself until it reaches a base case.",
examples: [
{title:"Factorial", code:`<span class="kw">const</span> fact = (n) => n <= 1 ? 1 : n * fact(n - 1);
console.log(fact(5));`, output: "120"}
],
expl: [
"Base Case: Essential to prevent infinite recursion.",
"Call Stack: Each recursive call adds a new frame to the stack.",
"Tail Call Optimization: Some JS engines optimize tail-recursive functions."
]
},
32: {
def: "Web Workers allow running complex logic in a separate thread without blocking the UI.",
examples: [
{title:"Main Thread", code:`<span class="kw">const</span> worker = <span class="kw">new</span> Worker(<span class="str">'worker.js'</span>);
worker.postMessage({ cmd: <span class="str">'start'</span> });`, output: "\"Message sent to worker\""}
],
expl: [
"Shared Memory: Use <code>SharedArrayBuffer</code> for high-performance communication.",
"No DOM Access: Workers cannot touch the <code>window</code> or <code>document</code>.",
"Message Passing: Data is cloned when sent via <code>postMessage</code>."
]
},
33: {
def: "Custom error classes allow you to categorize and handle specific application failures.",
examples: [
{title:"Custom Error", code:`<span class="kw">class</span> ApiError <span class="kw">extends</span> Error {
<span class="kw">constructor</span>(code) {
<span class="kw">super</span>(<span class="str">'API Error'</span>);
<span class="kw">this</span>.code = code;
}
}
<span class="kw">throw new</span> ApiError(404);`, output: "Uncaught ApiError: API Error (code: 404)"}
],
expl: [
"Inherit from the built-in <code>Error</code> class.",
"Use <code>super()</code> to set the message and maintain stack traces.",
"Check with <code>instanceof</code> in catch blocks."
]
},
34: {
def: "The Intl API provides language-sensitive string formatting and comparison.",
examples: [
{title:"Formatting", code:`<span class="kw">const</span> fmt = <span class="kw">new</span> Intl.NumberFormat(<span class="str">'en-US'</span>, { style: <span class="str">'currency'</span>, currency: <span class="str">'USD'</span> });
console.log(fmt.format(1234.56));`, output: "\"$1,234.56\""}
],
expl: [
"DateTimeFormat: For language-specific dates.",
"RelativeTimeFormat: For '2 days ago'.",
"Collator: For proper string sorting across languages."
]
},
35: {
def: "Typed Arrays provide a way to handle raw binary data in memory buffers.",
examples: [
{title:"Binary Data", code:`<span class="kw">const</span> buffer = <span class="kw">new</span> ArrayBuffer(8);
<span class="kw">const</span> view = <span class="kw">new</span> Int32Array(buffer);
view[0] = 100;
console.log(view.byteLength);`, output: "8"}
],
expl: [
"ArrayBuffer: The raw chunk of memory.",
"Views: Uint8Array, Float64Array, etc., provide typed access.",
"DataView: Manual offset-based access for complex binary structures."
]
},
36: {
def: "The <strong>Geolocation API</strong> allows the user to provide their location to web applications.",
examples: [
{title:"Get Location", code:`navigator.geolocation.getCurrentPosition((pos) => {
console.log(<span class="str">'Lat:'</span>, pos.coords.latitude);
console.log(<span class="str">'Lon:'</span>, pos.coords.longitude);
});`, output: "\"Lat: 37.7749\"\n\"Lon: -122.4194\""}
],
expl: [
"User Permission: Always requires user consent (pop-up).",
"Watch Position: Use <code>watchPosition()</code> for real-time tracking.",
"Accuracy: Can be tuned with <code>enableHighAccuracy: true</code>.",
"Permissions API: Check status (granted/denied) without triggering a prompt."
]
},
37: {
def: "The <strong>Canvas API</strong> provides a way to draw 2D/3D graphics via JavaScript and the HTML <code><canvas></code> element.",
examples: [
{title:"Drawing a Box", code:`<span class="kw">const</span> ctx = canvas.getContext(<span class="str">'2d'</span>);
ctx.fillStyle = <span class="str">'#10b981'</span>;
ctx.fillRect(10, 10, 100, 100);`, output: "Rectangle drawn at (10, 10)"}
],
expl: [
"Context: Most common is <code>'2d'</code>, but <code>'webgl'</code> is used for 3D.",
"Immediate Mode: Elements aren't stored in the DOM; you must redraw every frame.",
"Performance: Ideal for games, visualizations, and photo editing.",
"Path API: Use <code>beginPath()</code>, <code>moveTo()</code>, and <code>lineTo()</code> for custom shapes."
]
},
38: {
def: "Performance API allows measuring high-resolution timestamps and profiling logic.",
examples: [
{title:"Measuring", code:`performance.mark(<span class="str">'start'</span>);
<span class="com">// ... heavy task ...</span>
performance.mark(<span class="str">'end'</span>);
performance.measure(<span class="str">'Task'</span>, <span class="str">'start'</span>, <span class="str">'end'</span>);
console.log(performance.getEntriesByName(<span class="str">'Task'</span>)[0].duration);`, output: "12.45 (ms)"}
],
expl: [
"Precision: <code>performance.now()</code> is more accurate than <code>Date.now()</code>.",
"User Timing: Create custom marks and measures for debugging.",
"Navigation Timing: Analyze page load stages (DNS, SSL, DOMContentLoaded)."
]
},
39: {
def: "<strong>IndexedDB</strong> is a low-level API for client-side storage of large amounts of structured data.",
examples: [
{title:"DB Open", code:`<span class="kw">const</span> req = indexedDB.open(<span class="str">'AppDB'</span>, 1);
req.onsuccess = () => console.log(<span class="str">'Connected'</span>);`, output: "\"Connected\""}
],
expl: [
"NoSQL: Stores data as objects (not rows/columns).",
"Transactions: All operations must occur within a transaction for safety.",
"Indexes: Allows fast searching on any property, not just keys.",
"Async: It uses an event-based async model, not Promises (though wrappers exist)."
]
},
40: {
def: "Mastering advanced patterns like <strong>Currying</strong> and <strong>Memoization</strong> elevates your code's quality.",
examples: [
{title:"Memoization", code:`<span class="kw">const</span> memo = (fn) => {
<span class="kw">let</span> cache = {};
<span class="kw">return</span> (n) => cache[n] || (cache[n] = fn(n));
};
<span class="kw">const</span> fact = memo(n => n <= 1 ? 1 : n * fact(n-1));`, output: "Recursive results cached for performance"}
],
expl: [
"<strong>Currying</strong>: Converting a function with N arguments into N functions with 1 argument.",
"<strong>Memoization</strong>: Caching expensive function calls for speed.",
"<strong>Partial Application</strong>: Pre-filling some arguments of a function.",
"<strong>Composition</strong>: Combining simple functions to build complex logic."
]
}
};
let currentFilter = 'all';
function renderTopics(filtered = topics) {
const desk = document.getElementById('deskqlist');
const mob = document.getElementById('moblist');
const html = filtered.map(t => `
<div class="qi" id="si-${t.id}" onclick="showT(${t.id})">
<span class="qn">${String(t.id).padStart(2,'0')}</span>
<span class="qt">${t.title}</span>
</div>
`).join('');
desk.innerHTML = html;
mob.innerHTML = html;
}
function showT(id) {
const t = topics.find(x => x.id === id);
const c = content[id];
if (!t || !c) return;
document.querySelectorAll('.qi').forEach(e => e.classList.remove('active'));
document.querySelectorAll('#si-'+id).forEach(e => e.classList.add('active'));
const idx = topics.findIndex(x => x.id === id);
const prev = topics[idx-1], next = topics[idx+1];
const pct = Math.round(((idx+1)/topics.length)*100);
const pb = prev ? `<div class="nbtn" onclick="showT(${prev.id})">← ${prev.title.substring(0,25)}...</div>` : `<div class="nbtn off">First Topic</div>`;
const nb = next ? `<div class="nbtn" onclick="showT(${next.id})">${next.title.substring(0,25)}... →</div>` : `<div class="nbtn off">Last Topic</div>`;
document.getElementById('content').innerHTML = `
<div class="prog-strip"><div class="prog-fill" style="width:${pct}%"></div></div>
<div class="qhead">
<span class="qnum">#${String(t.id).padStart(2,'0')}</span>
<div class="qtitle">${t.title}</div>
</div>
<div class="badges">
<span class="fbadge badge-${t.cat}">${t.level}</span>
</div>
<div class="def-section"><strong>Overview:</strong> ${c.def}</div>
${c.examples.map(ex => `
<div class="slabel">${ex.title}</div>
<div class="code-block"><code>${ex.code}</code></div>
${ex.output ? `<div class="slabel" style="color:#10b981">Console Output</div><div class="output-block"><code>${ex.output}</code></div>` : ''}
`).join('')}
<div class="slabel">Key Concepts & Logic</div>
<div class="expl-box">
<ul>${c.expl.map(li => `<li style="margin-bottom:8px; list-style:none;">→ ${li}</li>`).join('')}</ul>
</div>
<div class="navrow">${pb}${nb}</div>
`;
window.scrollTo({top:0, behavior:'smooth'});
if (document.getElementById('moboverlay').classList.contains('open')) toggleMob();
}
function toggleFilter(cat) {
currentFilter = cat;
document.querySelectorAll('.fbtn').forEach(b => b.classList.remove('on'));
document.getElementById('filter-'+(cat==='all'?'all':cat.substring(0,cat==='intermediate'?5:cat==='advanced'?3:5))).classList.add('on');
const filtered = cat === 'all' ? topics : topics.filter(t => t.cat === cat);
renderTopics(filtered);
}
function filterTopics() {
const q = document.getElementById('searchbox').value.toLowerCase();
const filtered = topics.filter(t => t.title.toLowerCase().includes(q));
renderTopics(filtered);
}
function filterTopicsMob() {
const q = document.getElementById('searchbox-mob').value.toLowerCase();
const filtered = topics.filter(t => t.title.toLowerCase().includes(q));
renderTopics(filtered);
}
function toggleMob() {
const o = document.getElementById('moboverlay');
o.classList.toggle('open');
document.body.style.overflow = o.classList.contains('open') ? 'hidden' : '';
}
renderTopics();
</script>
</body>
</html>