-
Notifications
You must be signed in to change notification settings - Fork 0
/
latest.json
2121 lines (2121 loc) · 459 KB
/
latest.json
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
[
{
"JavaScript & Web Tech": {
"Why do we use javascript for web development? (and not any other language)": [
"<p class=\"c13\"><span class=\"c8\">JavaScript is a popular programming language used for web development due to several key reasons:</span></p>",
"<ol class=\"c10 lst-kix_bxotaiteoqg7-0 start\" start=\"1\"><li class=\"c16 li-bullet-0\"><span class=\"c2\">Client-Side Interactivity:</span><span class=\"c8\"> JavaScript is primarily used to add interactivity and dynamic behaviour to websites on the client-side, meaning it runs directly in the user's web browser.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Browser Compatibility: J</span><span class=\"c8\">avaScript is supported by all major web browsers. Browsers have built-in JavaScript engines that execute JavaScript code directly in the browser, making it a consistent and cross-browser solution. Therefore we need to maintain codebase in different languages for different browsers</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Versatility:</span><span class=\"c8\"> JavaScript can be used for many use cases of web development, like</span></li></ol>",
"<ol class=\"c10 lst-kix_bxotaiteoqg7-1 start\" start=\"1\"><li class=\"c18 li-bullet-0\"><span class=\"c8\">doing form validation</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">creating interactive elements</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">creating animations</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">handling events (e.g., clicks, mouse movements)</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">manipulating the Document Object Model (DOM)</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">handling AJAX requests and interacting with server-side APIs</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">updating the page content without requiring a full page reload, providing a more seamless user experience.</span></li></ol>",
"<ol class=\"c10 lst-kix_bxotaiteoqg7-0\" start=\"4\"><li class=\"c16 li-bullet-0\"><span class=\"c2\">Large Community and Libraries: </span><span class=\"c8\">JavaScript has an extensive and active developer community. This means there are countless libraries, frameworks, and tools available that can significantly speed up the development process and help solve common web development challenges. Examples of popular JavaScript libraries and frameworks include React, Angular, and Vue.js.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Support Native Web Technologies: </span><span class=\"c8\">Modern web technologies like HTML5, CSS3, and Web APIs are designed to work seamlessly with JavaScript. Many of these technologies are integrated into web browsers and accessible via JavaScript APIs.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Security and Browser Sandboxing:</span><span class=\"c8\">: JavaScript runs within a browser's sandboxed environment, ensuring security by preventing direct access to system resources. This is crucial for maintaining user safety and data privacy.</span></li></ol>"
],
"How does the chrome v8 JS engine work?": [
"<p class=\"c13\"><span class=\"c8\">The V8 engine is an open-source JavaScript engine developed by the Google Chrome team.</span></p>",
"<p class=\"c13\"><span class=\"c8\">The combination of parsing, profiling, optimization, and JIT compilation in the Chrome V8 engine contributes to the fast and efficient execution of JavaScript code in web applications. </span></p>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-0 start\" start=\"1\"><li class=\"c16 li-bullet-0\"><span class=\"c2\">Parsing:</span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-1 start\" start=\"1\"><li class=\"c18 li-bullet-0\"><span class=\"c8\">The V8 engine's first step is to parse the JavaScript code into an Abstract Syntax Tree (AST), which represents the structure of the code in a tree-like format.</span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-0\" start=\"2\"><li class=\"c16 li-bullet-0\"><span class=\"c30 c2\">Profiling: </span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-1 start\" start=\"1\"><li class=\"c18 li-bullet-0\"><span class=\"c8\">After parsing the JavaScript, code is first executed in an \"interpreted\" mode.</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">As the JavaScript code is interpreted, the V8 engine uses profilers to collect runtime information about the code's behaviour. This includes tracking which parts of the code are executed frequently (hot paths) and which data types are commonly used.</span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-0\" start=\"3\"><li class=\"c16 li-bullet-0\"><span class=\"c30 c2\">Optimisation & Just-In-Time (JIT) Compilation:</span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-1 start\" start=\"1\"><li class=\"c18 li-bullet-0\"><span class=\"c8\">Based on the gathered information, the V8 engine employs JIT compilation to optimise specific code paths.</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">JIT compilation generates machine code that is tailored for the actual runtime behaviour of the code, taking advantage of the specific data types encountered during interpretation.</span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-0\" start=\"4\"><li class=\"c16 li-bullet-0\"><span class=\"c30 c2\">Execution:</span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-1 start\" start=\"1\"><li class=\"c18 li-bullet-0\"><span class=\"c8\">Once a code path has been compiled, the resulting machine code is stored in an \"executable memory\" area.</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">Subsequent executions of the same code path can directly use the compiled machine code, which significantly speeds up execution compared to interpretation.</span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-0\" start=\"5\"><li class=\"c16 li-bullet-0\"><span class=\"c30 c2\">Garbage Collection:</span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-1 start\" start=\"1\"><li class=\"c18 li-bullet-0\"><span class=\"c8\">JavaScript is a garbage-collected language, meaning that memory management is handled automatically.</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">V8's garbage collector periodically identifies and deallocates memory that is no longer needed, preventing memory leaks.</span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-0\" start=\"6\"><li class=\"c16 li-bullet-0\"><span class=\"c30 c2\">Asynchronous Execution:</span></li></ol>",
"<ol class=\"c10 lst-kix_swqzz5gn0c9z-1 start\" start=\"1\"><li class=\"c18 li-bullet-0\"><span class=\"c8\">V8 handles asynchronous operations like timers and network requests using the event loop, which allows non-blocking execution and responsiveness.</span></li></ol>",
"<p class=\"c13\"><span class=\"c11\">In summary, the V8 engine first </span><span class=\"c2\">parses</span><span class=\"c11\"> the JS code and converts it into AST(a tree-like representation of the structure of the code) then it executes the code in interpretation mode and </span><span class=\"c2\">profiles</span><span class=\"c11\"> the code (like which part of the code is frequently used and commonly used data types). Based on the runtime behaviour and profiling data, it </span><span class=\"c2\">optimises</span><span class=\"c11\"> the code using </span><span class=\"c2\">JIT Compilation</span><span class=\"c8\"> to selectively compile frequently executed code paths into highly optimised machine code. Subsequent executions of the same code path can directly use the compiled machine code, which significantly speeds up execution compared to interpretation.</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c8\">This combination of interpretation and JIT compilation helps achieve a balance between startup speed and runtime performance for JavaScript execution.</span></p>",
"<p class=\"c13\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 718.11px; height: 600.00px;\"><img alt=\"\" src=\"images/image8.png\" style=\"width: 718.11px; height: 600.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"></span></p>"
],
"Does v8 javascript engine compile or interpret the code?": [
"<p class=\"c13\"><span class=\"c8\">The V8 JavaScript engine employs a combination of both compilation and interpretation to execute JavaScript code. This approach is known as \"Just-In-Time\" (JIT) compilation, which aims to balance the benefits of both compilation and interpretation for optimising the performance of JavaScript execution.</span></p>"
],
"Compiler vs Interpreter (Compilation vs execution)": [
"<ul class=\"c10 lst-kix_rltiwuxbufr3-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Translation vs. Interpretation</span><span class=\"c8\">: The primary difference is in how they process the source code. A compiler translates the entire source code (of high-level programming language) into machine code (low-level language) or bytecode before execution, while an interpreter reads and executes the source code line-by-line at runtime.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Output</span><span class=\"c8\">: A compiler generates an executable file or bytecode as its output, while an interpreter directly executes the code without producing a separate output file.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Error Handling</span><span class=\"c8\">: A compiler checks for errors throughout the entire code and reports them all at once, while an interpreter stops execution immediately after encountering the first error.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Execution Performance</span><span class=\"c8\">: Due to the translation step, compiled code generally runs faster than interpreted code, as the latter incurs overhead in translating and executing line-by-line.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Portability</span><span class=\"c11\">: Interpreted code can be more portable since it relies on the interpreter present on the target platform, while compiled code may need to be recompiled for different platforms.</span></li></ul>"
],
"Everything in JavaScript happens inside an Execution Context": [
"<p class=\"c13\"><span class=\"c8\">JavaScript was created by Brendan Eich while he was working at Netscape Communications Corporation (now known as Mozilla Corporation). Brendan Eich developed JavaScript in a span of about 10 days in May 1995</span></p>",
"<p class=\"c13\"><span class=\"c11\">When JavaScript code is executed, Execution Context is created and it is called </span><span class=\"c2\">Global Execution Context (GEC)</span><span class=\"c8\">.</span></p>",
"<ol class=\"c10 lst-kix_vip1l3s2x38m-0 start\" start=\"1\"><li class=\"c16 li-bullet-0\"><span class=\"c8\">JavaScript program is executed in TWO PHASES inside Execution Context</span></li></ol>",
"<ol class=\"c10 lst-kix_vip1l3s2x38m-1 start\" start=\"1\"><li class=\"c18 li-bullet-0\"><span class=\"c2\">MEMORY ALLOCATION PHASE</span><span class=\"c11\"> - JavaScript program goes throughout the program and allocates memory of Variables and Functions declared in program and stores </span><span class=\"c2\">undefined</span><span class=\"c11\"> and </span><span class=\"c2\">function code </span><span class=\"c8\">respectively as its value.</span></li><li class=\"c18 li-bullet-0\"><span class=\"c2\">CODE EXECUTION PHASE</span><span class=\"c8\"> - JavaScript program now goes through the code line by line and executes the code. </span></li></ol>",
"<ol class=\"c10 lst-kix_vip1l3s2x38m-0\" start=\"2\"><li class=\"c16 li-bullet-0\"><span class=\"c8\">A Function is invoked when it is called and it acts as another MINI PROGRAM and creates its own Execution Context.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c8\">Return keyword returns the Control back to the Parent Execution-Context, from where the Function is called and the Execution Context of the Function is DELETED.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">CALL STACK</span><span class=\"c8\"> maintains the ORDER of execution of Execution Contexts. It CREATES Execution Context whenever a Program starts or a Function is invoked and it pops out the Execution Context when a Function or Program ENDS.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c8\">Undefined is like a placeholder till a variable is not assigned a value.</span></li></ol>"
],
"Execution Context": [
"<p class=\"c13\"><span class=\"c11\">JavaScript interpreter creates a new context whenever it’s about to execute a </span><span class=\"c11 c37\">function</span><span class=\"c11\"> or </span><span class=\"c11 c37\">script</span><span class=\"c11\">. Every script/code starts with an execution context called a </span><span class=\"c2\">global execution context (GEC)</span><span class=\"c11\">. And every time we call a function, a new execution context is created and is put on top of the </span><span class=\"c11 c37\">execution stack </span><span class=\"c2 c37\">(call stack)</span><span class=\"c8\">. The same pattern follows when we call the nested function which can call another nested function.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Execution context has two components</span></p>",
"<ol class=\"c10 lst-kix_xtojqn9s6d3c-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Memory component / variable environment:</span><span class=\"c8\"> variable and function values are stored in a key value format.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Code component / thread of execution:</span><span class=\"c8\"> It is a place where whole JavaScript code is executed</span></li></ol>"
],
"this": [
"<p class=\"c13\"><span class=\"c2 c37\">this</span><span class=\"c11\"> is a property of the execution context. only function calls establish a </span><span class=\"c11\">new </span><span class=\"c2 c37\">this</span><span class=\"c11\"> context</span><span class=\"c8\"> (because it creates a new execution context)</span></p>"
],
"Hoisting": [
"<p class=\"c13\"><span class=\"c11\">JavaScript </span><span class=\"c2\">Hoisting</span><span class=\"c8\"> refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.</span></p>",
"<p class=\"c13\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Glossary/Hoisting&sa=D&source=editors&ust=1707022712783060&usg=AOvVaw1IH7vdDniT7R24ocSZeufl\">https://developer.mozilla.org/en-US/docs/Glossary/Hoisting</a></span></p>",
"<p class=\"c13 c4\"><span class=\"c3 c15\"></span></p>",
"<p class=\"c1\"><span class=\"c8\">variables defined with var and function declaration are hoisted.</span></p>",
"<p class=\"c1\"><span class=\"c8\">var takes undefined value and function contains its code.</span></p>",
"<p class=\"c13 c4\"><span class=\"c3 c15\"></span></p>",
"<p class=\"c13\"><span class=\"c11\">let and const are also hoisted (in a different way: they exist in</span><span class=\"c2\"> temporal dead zone (TDZ)</span><span class=\"c8\"> for the time being)</span></p>",
"<p class=\"c13\"><span class=\"c8\">The Temporal Dead Zone exists until a variable is declared and assigned a value.</span></p>",
"<p class=\"c13\"><span class=\"c11\">window.<variable> OR this.<variable> will not give the value of a variable defined using let or const.</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c2\">precedence order: </span><span class=\"c8\">variable assignment > function declaration > variable definition</span></p>",
"<p class=\"c13\"><span class=\"c8\">e.g</span></p>",
"<p class=\"c13\"><span class=\"c8\">var a = 10;</span></p>",
"<p class=\"c13\"><span class=\"c8\">function a() {}</span></p>",
"<p class=\"c13\"><span class=\"c11 c37\">typeof</span><span class=\"c11\"> a will be </span><span class=\"c53 c11 c37 c81\">number</span></p>",
"<p class=\"c13 c4\"><span class=\"c53 c11 c37 c81\"></span></p>",
"<p class=\"c13\"><span class=\"c8\">var a;</span></p>",
"<p class=\"c13\"><span class=\"c8\">function a() {}</span></p>",
"<p class=\"c13\"><span class=\"c11 c37\">typeof</span><span class=\"c11\"> a will be </span><span class=\"c11 c37\">function </span><span class=\"c8\">because variable is not assigned only defined</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c8\">function a() {}</span></p>",
"<p class=\"c13\"><span class=\"c8\">var a;</span></p>",
"<p class=\"c13\"><span class=\"c11 c37\">typeof</span><span class=\"c11\"> a will be </span><span class=\"c11 c37\">function </span><span class=\"c8\">because variable is not assigned only defined</span></p>"
],
"Blocked Scope": [
"<p class=\"c13\"><span class=\"c2\">let & const is block scoped,</span><span class=\"c11\"> means it is not accessible outside of the block, but var can be accessible because </span><span class=\"c2\">var is function scoped.</span></p>"
],
"Hoisting vs Memory Component of Execution Context": [
"<p class=\"c13\"><span class=\"c8\">Hoisting is a mechanism in JavaScript where variable and function declarations are moved to the top of their containing scope during the compile phase. This means that regardless of where variables and functions are declared in your code, they are moved to the top of their scope.</span></p>",
"<p class=\"c13\"><span class=\"c8\">The memory component of an execution context refers to the memory space allocated for variables and function references during the execution of a JavaScript program.</span></p>"
],
"Event Loop": [
"<p class=\"c13\"><span class=\"c8\">Event loop is used to] handle asynchronous operations in JS. The event loop is a constantly running process that monitors both the callback queue and the call stack.</span></p>",
"<p class=\"c13\"><span class=\"c8\">If the call stack is not empty, the event loop waits until it is empty and places the next function from the callback queue to the call stack. If the callback queue is empty, nothing will happen:</span></p>",
"<p class=\"c13\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.javascripttutorial.net/javascript-event-loop/&sa=D&source=editors&ust=1707022712784596&usg=AOvVaw3WMtTnOcOKVWWlV-faSpEN\">https://www.javascripttutorial.net/javascript-event-loop/</a></span></p>",
"<ol class=\"c10 lst-kix_xpn04ouj9az7-0 start\" start=\"1\"><li class=\"c16 li-bullet-0\"><span class=\"c2\">Callback functions of Web APIs</span><span class=\"c11\"> are first stored in the </span><span class=\"c2\">Web API environment</span><span class=\"c11\"> and then transferred to some queue from where the </span><span class=\"c2\">event loop</span><span class=\"c11\"> picks them up and places it in the </span><span class=\"c2\">call stack</span><span class=\"c8\">, whenever the call stack is empty.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c11\">All Callback functions (except promise callback and mutation observer) are transferred to </span><span class=\"c30 c2\">callback queue or task queue or macrotask queue.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c11\">Promises callback and mutation observer are transferred to the </span><span class=\"c2\">microtask queue.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Microtask queue</span><span class=\"c11\"> tasks are given </span><span class=\"c2\">priority</span><span class=\"c11\"> over </span><span class=\"c2\">Macrotask queue</span><span class=\"c11\"> tasks, </span><span class=\"c2\">event loop</span><span class=\"c8\"> will pick tasks from callback queue, only when all tasks of microtask queue are done.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c11\">Too many </span><span class=\"c2\">microtask queue </span><span class=\"c11\">tasks generated can cause </span><span class=\"c2\">Starvation</span><span class=\"c8\"> (not giving time to callback queue tasks to execute).</span></li><li class=\"c16 li-bullet-0\"><span class=\"c11\">If the value of the expression following the </span><span class=\"c2\">await</span><span class=\"c11\"> operator is not a Promise, it's converted to a resolved Promise i.e. await will also trigger an item into </span><span class=\"c2\">microtask</span><span class=\"c11\"> </span><span class=\"c30 c2\">queue</span></li></ol>",
"<p class=\"c13\"><span class=\"c8\">Order:</span></p>",
"<p class=\"c13\"><span class=\"c8\"> - Statement</span></p>",
"<p class=\"c13\"><span class=\"c8\"> - Microtask Queue - Promise callbacks/mutation observer (microtask queue)</span></p>",
"<p class=\"c13\"><span class=\"c8\"> - Web worker (port/window.eventHander, etc..)</span></p>",
"<p class=\"c13\"><span class=\"c8\"> - Macrotask Queue - all other callbacks e.g. setTimeout (callback/macrotask queue)</span></p>"
],
"JavaScript is synchronous single-threaded language": [
"<p class=\"c13\"><span class=\"c2\">Synchronous means one at a time </span><span class=\"c8\">i.e. one line of code is being executed at a time in order the code appears. </span></p>",
"<p class=\"c13\"><span class=\"c2\">Single threaded means that one command</span><span class=\"c8\"> is being executed at a time.</span></p>",
"<p class=\"c13\"><span class=\"c8\">So in JavaScript one thing is happening at a time.</span></p>",
"<p class=\"c13\"><span class=\"c2\">Sync kar lo/ sync me rakhna (we generally use in our day-to-day life): </span><span class=\"c8\">means keep everything in a single thread, means data in all devices are the same.</span></p>",
"<p class=\"c13\"><span class=\"c11\">JavaScript is single-threaded, meaning it processes one task at a time. However, </span><span class=\"c2\">it can handle asynchronous operations efficiently using the event loop.</span></p>"
],
"Synchronous": [
"<p class=\"c13\"><span class=\"c8\">One task at a time (single threaded)</span></p>"
],
"Asynchronous": [
"<p class=\"c13\"><span class=\"c8\">multiple task at a time (multi threaded)</span></p>",
"<p class=\"c13\"><span class=\"c8\">parallel programming</span></p>"
],
"Asynchronous Function": [
"<p class=\"c13\"><span class=\"c8\">Functions running in parallel with other functions are k/n as asynchronous function</span></p>",
"<p class=\"c13\"><span class=\"c8\">e.g. fetch, setTimeout, setInterval, etc.</span></p>"
],
"How to perform a specific task on completion of asynchronous function": [
"<ol class=\"c10 lst-kix_6xnhrta60x79-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">Promise</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">callback function - it grows the code horizontally and give control to the asynchronous function</span></li></ol>"
],
"Inversion of control": [
"<p class=\"c1\"><span class=\"c8\">When we pass a callback (instead of using a promise) to an asynchronous function to process after the async.task is done, we give control to that async. function. This is k/n as inversion of control.</span></p>"
],
"Callback Hell": [
"<p class=\"c1\"><span class=\"c8\">Callback hell or \"pyramid of doom,\" is a situation where there is a deep and complex nesting of callback functions. This generally happens while handling asynchronous code, where operations are performed one after the other, and each operation requires a callback to handle its result.</span></p>",
"<p class=\"c1\"><span class=\"c8\">It grows the code horizontally</span></p>"
],
"Promise": [
"<p class=\"c13\"><span class=\"c8\">Promise is an object that represents the eventual completion of asynchronous operation. It represents a result that may be available now, or in the future or never. </span></p>",
"<p class=\"c13\"><span class=\"c2\">Promises</span><span class=\"c8\"> are used to handle asynchronous operations in JavaScript. </span></p>",
"<p class=\"c1\"><span class=\"c8\">Promise can be consumed/handled in 2 ways:</span></p>",
"<ol class=\"c10 lst-kix_4skoph96uo70-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">then, catch</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">async/await</span></li></ol>"
],
"Promise.all vs allSettled, race, any": [
"<ul class=\"c10 lst-kix_t4mlosvdu624-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Promise.all:</span><span class=\"c8\"> It takes an array of promises and returns a resolved promise when all the promises are resolved or returns a rejected promise as soon as any of the promises is rejected. Waits for all promises to be fulfilled or any one to be rejected.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Promise.allSettled:</span><span class=\"c8\"> It takes an array of promises and returns a resolved promise (containing array of result of each promise) when all the promises are settled (either rejected or resolved). Waits for all promises to settle (either fulfilled or rejected) and returns an array of results with information about each promise.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Promise.race:</span><span class=\"c8\"> It takes an array of promises and returns a resolved or rejected promise as soon as the first promise is resolved or rejected. It's a race, and the first one to finish (fulfil or reject) determines the outcome.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Promise.any: </span><span class=\"c11\">It takes an array of promises and returns a resolved promise as soon as any of the promises is fulfilled/resolved otherwise returns a rejected promise when none of the promise is resolved.</span><span class=\"c2\"> </span><span class=\"c8\">It's like trying different options, and the first successful one wins. If all options fail, you get a report of why they failed.</span></li></ul>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c1\"><span class=\"c8\">if the given array of promises does include a value instead of promise, then it directly returns the value in the result array</span></p>"
],
"Async/Await": [
"<ol class=\"c10 lst-kix_vwprrffi9lxi-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c7\">Async function always returns a promise, if we directly return a promise from the async function then it gets returned as it is, otherwise if we return any value, then resolve promise with that value will be returned.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c7\">Async function is used to handle asynchronous tasks in JavaScript.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c7\">Asynchronous tasks are generally handled though promises.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c7\">And promises can be consumed in 2 ways, async/await or then/catch.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c34 c11\">Await keyword can only be used inside an async function.</span></li></ol>"
],
"Difference b/w .then/catch & async/await": [
"<p class=\"c1\"><span class=\"c11\">In</span><span class=\"c2\"> async/await</span><span class=\"c11\"> JS engine </span><span class=\"c2\">appears/fakes to wait at the line</span><span class=\"c8\"> where await is used, till the given promise is resolved and does not proceed further in the code.</span></p>",
"<p class=\"c1\"><span class=\"c11\">While in </span><span class=\"c2\">.then/catch</span><span class=\"c11\">, the JS engine </span><span class=\"c2\">does not wait</span><span class=\"c8\"> for the promise to resolve and proceed further in the code, and whenever the promise gets resolved it calls the attached callback function.</span></p>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c1\"><span class=\"c8\">And None of them block the thread or call stack.</span></p>"
],
"Closure": [
"<p class=\"c13\"><span class=\"c8\">Closures occur when a function retains access to variables from its outer (enclosing) function even after that outer function has completed execution.</span></p>",
"<p class=\"c13\"><span class=\"c11\">A </span><span class=\"c2\">closure</span><span class=\"c11\"> is the combination of a function bundled together (enclosed) with references to its surrounding state (the </span><span class=\"c2\">lexical environment</span><span class=\"c8\">). i.e. closure = function + its lexical environment</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c8\">Whenever a function is returned from a function, even if it is vanished in the execution context, It's not just that function alone it returns but the entire closure (function along with its lexical scope).</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c8\">In closure reference of the variables in the scope is there, but not its value</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c11\">ref:</span><span class=\"c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.youtube.com/watch?v%3DeBTBG4nda2A%26list%3DPLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP%26index%3D13&sa=D&source=editors&ust=1707022712788357&usg=AOvVaw0kE1EpTzib_LJEca4QVmHS\"> </a></span><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.youtube.com/watch?v%3DeBTBG4nda2A%26list%3DPLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP%26index%3D13&sa=D&source=editors&ust=1707022712788447&usg=AOvVaw1xnNNPmqLHpAsYnfPkrlAz\">https://www.youtube.com/watch?v=eBTBG4nda2A&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP&index=13</a></span></p>",
"<p class=\"c13\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures&sa=D&source=editors&ust=1707022712788565&usg=AOvVaw1I4jiXgdujqChw51cLZkf8\">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures</a></span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c1\"><span class=\"c8\">Uses of Closure: Memoization, Currying, Once Function, Data hiding and encapsulation, debounce/throttle</span></p>",
"<p class=\"c13\"><span class=\"c2\">Cons: </span><span class=\"c8\">it can take lots of memory, because those variables are not garbage collected.</span></p>"
],
"Garbage Collector": [
"<p class=\"c13\"><span class=\"c8\">It frees variables from memory which are no longer in use, or have never been used.</span></p>",
"<p class=\"c13\"><span class=\"c8\">JavaScript is a garbage-collected language, meaning that memory management is handled automatically.</span></p>",
"<p class=\"c13\"><span class=\"c8\">(GC) is a mechanism that automatically manages memory by identifying and reclaiming memory that is no longer needed or reachable by the program. It helps prevent memory leaks and ensures efficient memory usage in programs.</span></p>"
],
"Mark and Sweep Algorithm": [
"<p class=\"c13\"><span class=\"c8\">\"Mark and Sweep\" is a garbage collection algorithm used by programming languages like JavaScript to manage memory and automatically reclaim memory that is no longer in use. </span></p>",
"<p class=\"c13\"><span class=\"c8\">The \"Mark and Sweep\" algorithm ensures that memory occupied by objects that are no longer reachable or referenced by the program is properly released, preventing memory leaks and improving the overall performance of the application.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Here's how the Mark and Sweep algorithm works:</span></p>",
"<ul class=\"c10 lst-kix_3ie40ml82f6-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Mark Phase: </span><span class=\"c8\">The first step of the algorithm involves marking all reachable objects in memory. Objects that are still being used by the program are marked as \"live,\" while those that are not accessible are left unmarked (considered \"dead\").</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Sweep Phase: </span><span class=\"c8\">In the sweep phase, the garbage collector goes through the entire memory space and deallocates (reclaims) memory occupied by unmarked (dead) objects. This involves releasing memory that is no longer needed and making it available for future allocations.</span></li></ul>"
],
"Lexical Environment": [
"<p class=\"c13\"><span class=\"c11\">The Local memory (Created during </span><span class=\"c2\">Execution Context </span><span class=\"c8\">of that function) + Lexical environment of its parent.</span></p>",
"<p class=\"c13\"><span class=\"c11\">e.g when the execution reach a use of a variable/function, it will search for its existence in the local memory of that function, if it's not found it will go to the lexical environment of its parent (</span><span class=\"c2\">there is a reference of lexical environment of its parent in local memory of a function</span><span class=\"c11\">), and so on. This chain is known as the </span><span class=\"c30 c2\">Scope Chain.</span></p>"
],
"Scope": [
"<p class=\"c13\"><span class=\"c8\">Scope is till where we can access a function/variable.</span></p>"
],
"Block": [
"<p class=\"c13\"><span class=\"c8\">Multiple statements formed in a group enclosed in curly brackets forms a block</span></p>",
"<p class=\"c13\"><span class=\"c8\">Block is needed because, sometimes Javascript expects a single statement to run, but we need to run commands with multiple statements which is only possible by block. e.g if else, for, etc</span></p>"
],
"Error Types": [
"<p class=\"c13\"><span class=\"c8\">There are three types of error: </span></p>",
"<ol class=\"c10 lst-kix_n0qf2md3mbum-0 start\" start=\"1\"><li class=\"c13 c28 c40 li-bullet-0\"><span class=\"c2\">referenceError</span><span class=\"c11\"> - </span><span class=\"c8\">given where variable does not have memory allocation</span></li><li class=\"c13 c28 c40 li-bullet-0\"><span class=\"c2\">typeError</span><span class=\"c8\"> - given when we change type that is not supposed to be changed</span></li><li class=\"c13 c28 c40 li-bullet-0\"><span class=\"c2\">syntaxError</span><span class=\"c8\"> - when proper syntax(way of writing a statement) is not used</span></li></ol>"
],
"Anonymous Functions": [
"<p class=\"c13\"><span class=\"c8\">It is a function that does not have any name associated with it. An anonymous function is not accessible after its initial creation, it can only be accessed by the variable it is stored in as a function, as a value. </span></p>",
"<p class=\"c13\"><span class=\"c8\">It is generally used at places where function is used as values e.g. arrow function, and callback function</span></p>",
"<p class=\"c13\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.geeksforgeeks.org/javascript-anonymous-functions/&sa=D&source=editors&ust=1707022712790207&usg=AOvVaw3PgrKu1nswvdIEUQahI3ph\">https://www.geeksforgeeks.org/javascript-anonymous-functions/</a></span></p>"
],
"High Order Function": [
"<p class=\"c13\"><span class=\"c11\">A </span><span class=\"c2\">high order</span><span class=\"c11\"> </span><span class=\"c2\">function </span><span class=\"c11\">is a</span><span class=\"c11\"> </span><span class=\"c2\">function</span><span class=\"c11\"> that accepts one or more </span><span class=\"c2\">functions</span><span class=\"c11\"> as arguments or returns a </span><span class=\"c2\">function</span><span class=\"c8\">.</span></p>"
],
"Function Statement / Function Declaration": [
"<p class=\"c13\"><span class=\"c8\">regular function</span></p>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c1\"><span class=\"c11\"><function>.</span><span class=\"c11 c37\">name</span><span class=\"c8\"> gives name of the function</span></p>",
"<p class=\"c1\"><span class=\"c11\"><function>.</span><span class=\"c11 c37\">length</span><span class=\"c8\"> gives count of parameters of the function</span></p>"
],
"Function Expression": [
"<p class=\"c13\"><span class=\"c8\">A function stored in a variable as is its value</span></p>",
"<p class=\"c13\"><span class=\"c11\">Function expression can’t be called before its declaration because the value of the variable will be undefined till then.</span></p>"
],
"First Class Function / First Class Citizen": [
"<p class=\"c13\"><span class=\"c8\">The ability of function to be used as values is k/n as First Class Function.</span></p>"
],
"IIFE": [
"<p class=\"c13\"><span class=\"c8\">immediately Invoked Function Expression - self executing function</span></p>",
"<p class=\"c13\"><span class=\"c8\">(function() {</span></p>",
"<p class=\"c13\"><span class=\"c8\"> // logic</span></p>",
"<p class=\"c13\"><span class=\"c8\">})()</span></p>"
],
"Generator Function": [
"<p class=\"c1\"><span class=\"c8\">Generator functions are used to generate values on the fly (on-demand).</span></p>",
"<p class=\"c1\"><span class=\"c8\">Generator functions are a special type of function in JS that can be paused and resumed. They allow us to generate a sequence of values lazily.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Generators are used in iterable functions of in-built data structures of JS.</span></p>"
],
"Pure Function": [
"<p class=\"c1\"><span class=\"c2\">Deterministic</span><span class=\"c11\">:</span><span class=\"c8\"> A Pure Function is a function that always returns the same result for a given set of arguments. It does not depend on any state or data change during a program’s execution. Rather, it only depends on its input arguments.</span></p>",
"<p class=\"c1\"><span class=\"c2\">No Side Effects:</span><span class=\"c8\"> A pure function doesn't cause any observable effects outside of its scope. It means it doesn't modify variables outside of its own scope, it doesn't interact with the DOM, it doesn't make API calls, and it doesn't change any external state.</span></p>",
"<p class=\"c13\"><span class=\"c8\">E.g.</span></p>",
"<p class=\"c1\"><span class=\"c8\">function add(a, b) {</span></p>",
"<p class=\"c1 c22\"><span class=\"c8\">return a + b;</span></p>",
"<p class=\"c1\"><span class=\"c8\">}</span></p>",
"<p class=\"c1\"><span class=\"c8\">here add is a pure function</span></p>",
"<p class=\"c1\"><span class=\"c8\"><br>let total = 0;</span></p>",
"<p class=\"c1\"><span class=\"c8\">function addToTotal(value) {</span></p>",
"<p class=\"c1 c22\"><span class=\"c8\">total += value; return total;</span></p>",
"<p class=\"c1\"><span class=\"c8\">}</span></p>",
"<p class=\"c1\"><span class=\"c8\">here addToTotal function modifies the total variable outside of its scope. Therefore, it is not a pure function.</span></p>"
],
"Constructor Function": [
"<p class=\"c13\"><span class=\"c8\">In JavaScript, a constructor function is used to create objects.</span></p>",
"<p class=\"c13\"><span class=\"c8\">// constructor function</span></p>",
"<p class=\"c13\"><span class=\"c8\">function Person () {</span></p>",
"<p class=\"c13 c22\"><span class=\"c8\">this.name = 'John',</span></p>",
"<p class=\"c13 c22\"><span class=\"c8\">this.age = 23</span></p>",
"<p class=\"c13\"><span class=\"c8\">}</span></p>",
"<p class=\"c13\"><span class=\"c8\">// create an object</span></p>",
"<p class=\"c13\"><span class=\"c8\">const person = new Person();</span></p>"
],
"Difference b/w regular and arrow function ": [
"<p class=\"c13\"><span>ref: </span><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://medium.com/swlh/javascript-arrow-functions-vs-regular-functions-5ec4a9076796&sa=D&source=editors&ust=1707022712792311&usg=AOvVaw1bz5azs87_97aRf7VjG2yg\">https://medium.com/swlh/javascript-arrow-functions-vs-regular-functions-5ec4a9076796</a></span></p>",
"<ol class=\"c10 lst-kix_u33bokbpnx1e-0 start\" start=\"1\"><li class=\"c16 li-bullet-0\"><span class=\"c30 c2\">Syntax</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2 c37\">this</span><span class=\"c2\"> binding</span><span class=\"c11\"><br>In regular functions, </span><span class=\"c11 c37\">this</span><span class=\"c11\"> keyword represents the object that calls the function, which could be the window, the document, a button or whatever.<br>In arrow functions the </span><span class=\"c11 c37\">this</span><span class=\"c11\"> keyword represents, </span><span class=\"c11 c37\">this</span><span class=\"c8\"> of the object where it is defined.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Argument binding</span><span class=\"c8\"><br>Unlike regular functions, arrow functions do not have an arguments binding. However, they have access to the arguments object of the closest non-arrow parent function.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Using </span><span class=\"c2 c37\">new</span><span class=\"c2\"> keyword</span><span class=\"c8\"><br>Regular functions are constructible (constructor function) and callable.<br>Arrow functions are only ‘callable’ and not constructible<br>hence new keyword can’t be used with arrow function</span></li></ol>"
],
"JSON and Object literals": [
"<p class=\"c1\"><span class=\"c2\">Object Literals:</span><span class=\"c8\"> It is a JS Object. it is a comma-separated list of key-value pairs wrapped in curly braces. It can be taken as a 'container' for data.</span></p>",
"<p class=\"c1\"><span class=\"c2\">JSON:</span><span class=\"c8\"> JavaScript Object Notation is a textual/string format of a JS Object.</span></p>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c1\"><span class=\"c8\">JSON cannot be an object. JSON is a string format. The data is only JSON when it is in a string format. When it is converted to a JavaScript variable, it becomes a JavaScript object.</span></p>",
"<p class=\"c1\"><span class=\"c8\">const myJSON = '{\"name\":\"John\", \"age\":30, \"car\":null}';</span></p>",
"<p class=\"c1\"><span class=\"c8\">const myObj = JSON.parse(myJSON);</span></p>"
],
".call() & .apply()": [
"<p class=\"c13\"><span class=\"c11\">The call() method calls the function with a </span><span class=\"c11\">given </span><span class=\"c2 c37\">this</span><span class=\"c11\"> value</span><span class=\"c8\">(object) and arguments provided individually.</span></p>",
"<p class=\"c1\"><span class=\"c8\">When we don't specify this, it'll refer to the globalThis i.e. window in the browser's context.</span></p>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c11\">in apply() we pass arguments in array</span></p>"
],
".bind()": [
"<p class=\"c13\"><span class=\"c11\">the bind() method creates copy of the function with a given </span><span class=\"c2 c37\">this</span><span class=\"c8\"> value(object) and arguments provided individually</span></p>",
"<p class=\"c13\"><span class=\"c8\">bind is same as call() but instead of calling the function, it's just create clone of the function, which we can invoke/call later</span></p>",
"<p class=\"c13\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.youtube.com/watch?v%3D75W8UPQ5l7k&sa=D&source=editors&ust=1707022712793576&usg=AOvVaw07Nw7wNr-T8b4np-tX7hO2\">https://www.youtube.com/watch?v=75W8UPQ5l7k</a></span></p>"
],
"Polyfill (Shims)": [
"<p class=\"c1\"><span class=\"c2\">Polyfills</span><span class=\"c8\"> are used to add missing features to a browser that it does not natively support. It’s like browser fallback.</span></p>",
"<p class=\"c1\"><span class=\"c2\">Shims</span><span class=\"c8\"> are often used to provide a consistent API or bridge differences between environments, which can include polyfilling missing features. e.g. jQuery</span></p>",
"<p class=\"c1\"><span class=\"c11\">In practice, the terms \"polyfill\" and \"shim\" are sometimes used interchangeably, and their specific meanings can vary depending on the context in which they are used.</span></p>"
],
"ProtoType": [
"<p class=\"c13\"><span class=\"c8\">Whenever we create a function/object/array, JS engine attach a prototype property in it.</span></p>",
"<p class=\"c13\"><span class=\"c2\">Prototype property</span><span class=\"c8\"> is basically an object (also known as Prototype object), which contains some functions like toString, valueOf, map, reduce, etc. </span></p>",
"<p class=\"c13\"><span class=\"c8\">We can also attach methods and properties in a prototype object, which enables all the other functions/object/array to inherit these methods and properties.</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c11\">we can access the prototype of an object using: </span><span class=\"c2 c37\">Object.getPrototypeOf(<object name>) </span><span class=\"c11 c37\">or </span><span class=\"c53 c2 c37\"><object name>.__proto__</span></p>",
"<p class=\"c13\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes&sa=D&source=editors&ust=1707022712794255&usg=AOvVaw0a-5l93cTzq-hOvXTXRIBc\">Prototypes</a></span><span class=\"c8\"> are the mechanism by which JavaScript objects inherit features from one another. Basically, when you try to access a property of an object: if the property can't be found in the object itself, the prototype is searched for the property. If the property still can't be found, then the prototype's prototype is searched, and so on until either the property is found.</span></p>"
],
"Compose & Pipe function": [
"<p class=\"c1\"><span class=\"c11\">The </span><span class=\"c2 c37\">compose()</span><span class=\"c8\"> function takes a list of functions and returns a new function. This new function, when called with an argument, will apply the functions from right to left.</span></p>",
"<p class=\"c1\"><span class=\"c11\">The </span><span class=\"c2 c37\">pipe()</span><span class=\"c8\"> function is similar to compose(), but it applies the functions from left to right.</span></p>"
],
"Reduce Function": [
"<p class=\"c13\"><span class=\"c8\">It is used to get a single value out of array, value can be anything, string, number, object, array, etc</span></p>",
"<p class=\"c13\"><span class=\"c11\">If you don't supply an initial value then the </span><span class=\"c2\">FIRST</span><span class=\"c8\"> element of the array is used as initial value (and that element is skipped in the loop)</span></p>"
],
"Proxy": [
"<p class=\"c13\"><span class=\"c11\">In JavaScript, a </span><span class=\"c2\">Proxy</span><span class=\"c8\"> is a built-in object that allows us to customise the fundamental operations (such as property access, assignment, function invocation, etc.) of an object. </span></p>",
"<p class=\"c13\"><span class=\"c8\">It provides a way to define custom behaviour for these operations, effectively allowing us to create a \"wrapper\" around an object and control how it interacts with the outside world. </span></p>",
"<p class=\"c13\"><span class=\"c8\">const proxy = new Proxy(target, handler);</span></p>"
],
"Object.defineProperty() vs Proxy": [
"<p class=\"c1\"><span class=\"c30 c2\">Object.defineProperty</span></p>",
"<ul class=\"c10 lst-kix_cmy8yt14pykf-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">Object.defineProperty is a method that allows you to add a new property or modify an existing property on an object and define certain behaviours for that property.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">It does not return a new object and modify the given object.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Object.defineProperty(obj, prop, descriptor);</span></li></ul>",
"<p class=\"c1\"><span class=\"c30 c2\">Proxy</span></p>",
"<ul class=\"c10 lst-kix_o4vvpogd4t8z-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">It returns a new object with the given behaviour applied</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">const proxyObj = new Proxy(obj, handler);</span></li></ul>"
],
"Observer": [
"<p class=\"c1\"><span class=\"c8\">Observer APIs are very useful to detect changes in the applications.</span></p>",
"<ol class=\"c10 lst-kix_d01n41uqzul0-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">MutationObserver</span><span class=\"c8\">: Mutation Observer observes the DOM tree</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">IntersectionObserver</span><span class=\"c8\">: Intersection observer observes a DOM element’s visibility and positions.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">ResizeObserver</span><span class=\"c8\">: ResizeObserver observes the changes to the dimensions of a DOM element. </span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">PerformanceObserver</span><span class=\"c8\">: PerformanceObserver is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.</span></li></ol>"
],
"Module": [
"<p class=\"c13\"><span class=\"c8\">JavaScript modules allow us to break up our code into separate files. This makes it easier to maintain the code-base.</span></p>",
"<p class=\"c13\"><span class=\"c11\">It relies on the </span><span class=\"c11 c37\">import</span><span class=\"c11\"> and </span><span class=\"c11 c37\">export</span><span class=\"c8\"> statements.</span></p>",
"<p class=\"c13\"><span class=\"c8\">e.g.</span></p>",
"<p class=\"c13\"><span class=\"c30 c2\">person.js</span></p>",
"<p class=\"c13\"><span class=\"c8\">const name = \"Jesse”, age = 40;</span></p>",
"<p class=\"c13\"><span class=\"c8\">export { name, age };</span></p>",
"<p class=\"c13 c4\"><span class=\"c30 c2\"></span></p>",
"<p class=\"c13\"><span class=\"c30 c2\">main.html</span></p>",
"<p class=\"c13\"><span class=\"c8\"><script type=\"module\"></span></p>",
"<p class=\"c13\"><span class=\"c8\"> import { name, age } from \"./person.js\";</span></p>",
"<p class=\"c13\"><span class=\"c8\"></script></span></p>"
],
"Falsy": [
"<p class=\"c1\"><span class=\"c11\">A falsy (sometimes written falsey) value is a value that is considered false when encountered in a </span><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Glossary/Boolean&sa=D&source=editors&ust=1707022712796252&usg=AOvVaw3b0FYU4WMbeoBNt6q1hjNw\">Boolean</a></span><span class=\"c8\"> context.</span></p>",
"<p class=\"c1\"><span class=\"c8\">E.g. null, undefined, 0, -0, “”, false, NaN, 0n, document.all()</span></p>"
],
"Finally": [
"<p class=\"c13\"><span class=\"c11\">The </span><span class=\"c2 c37\">finally</span><span class=\"c11\"> statement in </span><span class=\"c2\">try catch finally</span><span class=\"c8\"> defines a code block that always runs regardless of the result.</span></p>",
"<p class=\"c13\"><span class=\"c8\">finally() does not receive any argument.</span></p>"
],
"Throttle & Debounce": [
"<p class=\"c1\"><span class=\"c8\">Debounce & Throttle is used to limit the rate of the given function call</span></p>",
"<ul class=\"c10 lst-kix_bg6s3gg2skyn-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Throttle</span><span class=\"c8\">: the given function will be called at most once per specified period.</span></li></ul>",
"<ul class=\"c10 lst-kix_bg6s3gg2skyn-1 start\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">It is a technique in which there is always a specific delay(not more not less) b/w two function calls.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">e.g. shooting game, pistol gun can only be fired after some time is passed (reload duration)</span></li></ul>",
"<ul class=\"c10 lst-kix_bg6s3gg2skyn-0\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Debounce</span><span class=\"c8\">: the given function will be called after a specified period after the caller stops calling the decorated function.</span></li></ul>",
"<ul class=\"c10 lst-kix_bg6s3gg2skyn-1 start\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">It is technique in which the given function is called only after a certain delay of time has been passed since the last trigger/firing of the event</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">e.g. search bar in any e-commerce website</span></li></ul>"
],
"JS Data Structure & Time Complexity": [
"<a id=\"t.ff6afe46f968dd172d90286dd11b224bed228eed\"></a>",
"<a id=\"t.0\"></a>",
"<table class=\"c45\"><tbody><tr class=\"c73\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">Data Structure</span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">Insertion</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">Deletion</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c2 c30\">Access</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">Search</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">Iteration</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">Size</span></p></td></tr><tr class=\"c56\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td></tr><tr class=\"c64\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">MAP: map = new Map()</span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">map.set(key, val)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">map.delete(key)</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">map.get(key)</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">map.has(key)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">map.keys(), map.values(), map.entries()</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">map.size</span></p></td></tr><tr class=\"c66\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(n)</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td></tr><tr class=\"c66\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(log n)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(log n)</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(log n)</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(log n)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(1)</span></p></td></tr><tr class=\"c68\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td></tr><tr class=\"c72\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">OBJECT: obj = { }</span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">obj[key] = val</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">delete obj[key]</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">obj[key]</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">obj.hasOwnProperty(key)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Object.keys(obj), Object.values(obj), Object.entries(obj)</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Object.keys(obj).length, Object.values(obj).length, Object.entries(obj).length</span></p></td></tr><tr class=\"c66\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(n)</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(n)</span></p></td></tr><tr class=\"c59\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td></tr><tr class=\"c68\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td></tr><tr class=\"c72\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">SET: set = new Set()</span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">set.add(val)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">set.delete(val)</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">set.has(val)</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">set.has(val)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">set.values()</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">set.size</span></p></td></tr><tr class=\"c66\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(n)</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td></tr><tr class=\"c59\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(1)</span></p></td></tr><tr class=\"c68\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c29 c4\"><span class=\"c30 c31\"></span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c4 c29\"><span class=\"c30 c31\"></span></p></td></tr><tr class=\"c66\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">ARRAY: arr = [ ]</span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">arr.push(val), arr.unshift(val)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">arr.pop(), arr.shift()</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">arr[idx]</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">arr.indexOf(val), arr.includes(val)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">arr.forEach()</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">arr.length</span></p></td></tr><tr class=\"c66\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c11\">At the end</span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">push: O(1)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">pop: O(1)</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(n)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(n)</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Average: O(1)</span></p></td></tr><tr class=\"c72\"><td class=\"c25\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c11\">At the Beginning </span></p></td><td class=\"c6\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">unshift: O(n)</span></p></td><td class=\"c21\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">shift: O(n)</span></p></td><td class=\"c19\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(1)</span></p></td><td class=\"c48\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c39\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(n)</span></p></td><td class=\"c35\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Worst: O(1)</span></p></td></tr></tbody></table>"
],
"Spread vs Rest Operator": [
"<p class=\"c13\"><span class=\"c8\">The main difference between rest and spread is that the rest operator puts the rest of some specific user-supplied values into a JavaScript array.</span></p>",
"<p class=\"c13\"><span class=\"c8\">But the spread syntax expands iterables into individual elements.</span></p>",
"<p class=\"c13\"><span class=\"c8\">Spread operator deep copies the primitive properties(1st depth) of the object but for the nested objects it does only shallow copying</span></p>",
"<p class=\"c1\"><span class=\"c8\">Object Spread operator actually is internally the same as Object.assign(). Following 2 lines of code are totally the same.</span></p>",
"<p class=\"c1\"><span class=\"c8\">let aClone = { ...a };</span></p>",
"<p class=\"c1\"><span class=\"c11\">let aClone = Object.assign({}, a);</span></p>"
],
"null vs undefined": [
"<p class=\"c13\"><span class=\"c8\">null is a actual value assigned to a variable, which represents no value/null</span></p>",
"<p class=\"c13\"><span class=\"c8\">and when a variable is declared but not initialised by any value, it is by default assigned undefined to it</span></p>",
"<p class=\"c13\"><span class=\"c8\">console.log(null == undefined) //true because both of then does not represents a value</span></p>",
"<p class=\"c13\"><span class=\"c11\">console.log(null === undefined) //false because typeof null is object, but type of undefined is undefined</span></p>"
],
"undefined vs undeclared": [
"<p class=\"c1\"><span class=\"c11\">An </span><span class=\"c2 c37\">undeclared</span><span class=\"c11\"> variable is one that hasn't been declared at all, while an </span><span class=\"c2 c37\">undefined</span><span class=\"c11\"> variable is one that has been declared but hasn't been assigned a value (not initialised).</span></p>",
"<p class=\"c1\"><span class=\"c8\">e.g.</span></p>",
"<p class=\"c1\"><span class=\"c8\">let y;</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(y); // undefined, because y is declared but has not been assigned any value (not initialised)</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(x); // ReferenceError x is not defined</span></p>",
"<p class=\"c1\"><span class=\"c8\">z = 10 // in strict mode // ReferenceError z is not defined</span></p>"
],
"var vs let vs const": [
"<p class=\"c13\"><span class=\"c11 c37\">var</span><span class=\"c11\"> is function scoped, </span><span class=\"c11 c37\">let</span><span class=\"c11\"> & </span><span class=\"c11 c37\">const</span><span class=\"c8\"> are block scoped.</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c1\"><span class=\"c11\">when we use </span><span class=\"c2 c37\">const</span><span class=\"c8\"> to declare a variable, it means that the variable cannot be reassigned to a different value. However, it does not make the value itself immutable.</span></p>",
"<p class=\"c1\"><span class=\"c8\">e.g.</span></p>",
"<p class=\"c1\"><span class=\"c8\">const myObject = { key: 'value' };</span></p>",
"<p class=\"c1\"><span class=\"c8\">myObject.key = 'new value'; // This is allowed</span></p>",
"<p class=\"c1\"><span class=\"c8\">myObject = { anotherKey: 'another value' }; // This will throw an error because we are trying to reassign myObject</span></p>",
"<p class=\"c1\"><span class=\"c11\">In this case, the </span><span class=\"c11 c37\">myObject</span><span class=\"c8\"> variable itself cannot be reassigned, but we can still modify the properties of the object it points to.</span></p>",
"<p class=\"c1\"><span class=\"c8\">In the case of strings, numbers, and booleans, we cannot reassign the variable because they are primitive values, and const prevents the variable from being reassigned.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Objects, on the other hand, are reference types in JavaScript. When we create an object, we are actually creating a reference to a location in memory. Using const with an object prevents reassignment of the variable to a different memory location, but it does not prevent us from modifying the properties of the object at that memory location.</span></p>"
],
"Object.freeze() vs Object.seal()": [
"<p class=\"c13\"><span class=\"c11 c37\">Object.freeze()</span><span class=\"c8\"> does not let to add/modify/remove any property/key to object</span></p>",
"<p class=\"c13\"><span class=\"c11\">but </span><span class=\"c11 c37\">Object.seal()</span><span class=\"c8\"> can modify any existing property but doesn't let us add/delete property.</span></p>",
"<p class=\"c1\"><span class=\"c8\">If we attempt to modify a property on a frozen object in strict mode, JavaScript will fail silently or throw an error (in non-strict mode, it will fail silently).</span></p>"
],
"Argument vs Parameter": [
"<p class=\"c13\"><span class=\"c11\">The parameters are the </span><span class=\"c11 c37\">aliases</span><span class=\"c8\"> for the values that will be passed to the function. The arguments are the actual values.</span></p>",
"<p class=\"c13\"><span class=\"c8\">function foo( a, b, c ) {}; // a, b, and c are the parameters</span></p>",
"<p class=\"c13\"><span class=\"c8\">foo( 1, 2, 3 ); // 1, 2, and 3 are the arguments</span></p>"
],
"Math.max/min": [
"<p class=\"c1\"><span class=\"c8\">console.log(Math.min()) // Infinity</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(Math.max()) // -Infinity</span></p>"
],
"NaN = Not a Number": [
"<p class=\"c13\"><span class=\"c8\">console.log(NaN == NaN) // false</span></p>",
"<p class=\"c13\"><span class=\"c8\">console.log(NaN === NaN) // false</span></p>",
"<p class=\"c13\"><span class=\"c8\">console.log(Math.max(NaN, 1)) // NaN</span></p>",
"<p class=\"c13\"><span class=\"c8\">console.log(Math.min(NaN, 1)) // NaN</span></p>",
"<p class=\"c13\"><span class=\"c8\">console.log(Math.min(NaN, Infinity)) // NaN</span></p>",
"<p class=\"c13\"><span class=\"c8\">console.log(Math.max(\"any string\", 1)) // NaN</span></p>",
"<p class=\"c13\"><span class=\"c11\">The </span><span class=\"c11 c37\">Math.max()</span><span class=\"c11\"> and </span><span class=\"c11 c37\">Math.min()</span><span class=\"c11\"> functions return </span><span class=\"c11 c37\">NaN</span><span class=\"c8\"> if any parameter isn't a number and can't be converted into one (of course NaN cannot be converted into a number).</span></p>"
],
"Infinity": [
"<p class=\"c1\"><span class=\"c8\">1/0 = Infinity</span></p>",
"<p class=\"c1\"><span class=\"c8\">-1/0 = -Infinity</span></p>",
"<p class=\"c1\"><span class=\"c8\">0 / Infinity = 0</span></p>",
"<p class=\"c1\"><span class=\"c8\">Infinity x 0 = NaN</span></p>",
"<p class=\"c1\"><span class=\"c8\">Infinity x 1 = Infinity</span></p>",
"<p class=\"c1\"><span class=\"c8\">Infinity + Infinity = Infinity</span></p>",
"<p class=\"c1\"><span class=\"c8\">Infinity - Infinity = NaN</span></p>",
"<p class=\"c1\"><span class=\"c8\">Infinity x Infinity = Infinity</span></p>",
"<p class=\"c1\"><span class=\"c8\">Infinity / Infinity = NaN</span></p>"
],
"Operator Precedence": [
"<p class=\"c1\"><span class=\"c2\">Number > String > Boolean</span></p>",
"<p class=\"c1\"><span class=\"c8\">When using > to compare two operands, if either operand is a number, Javascript will first convert the string/boolean to its equivalent number and then numerically compare.</span></p>",
"<p class=\"c1\"><span class=\"c8\">i.e. ’10’ > 9</span></p>",
"<p class=\"c1\"><span class=\"c8\">Only when both operands are string, they are compared lexicographically. i.e. character by character until they are not equal or there aren't any characters left. The first character of '10' is less than the first character of '9' hence '10' is < '9' i.e. ’10’ < ’9’</span></p>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c1\"><span class=\"c8\">Also, these operators work from left to right</span></p>"
],
"== Operator": [
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">Comparing Primitives (String, Number, Boolean):</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">If both of the operands are primitives and of the same type, == performs a simple value check.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">e.g.</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-2 start\" start=\"1\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">5 == 5; // true </span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">'hello' == 'hello'; // true</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">true == false; // false</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-0\" start=\"2\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">Comparing Objects:</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">if both of the operands are objects, then JS compares them by their reference not value.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">i.e. if both objects are pointing to same memory location, if yes then it will return true otherwise false</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">e.g.</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-2 start\" start=\"1\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">const obj1 = { key: 'value' }; <br>const obj2 = { key: 'value' }; <br>console.log(obj1 == obj2); // false, because they are different objects in memory</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">const arr = [1];<br>console.log(arr == arr); // true, because they are same objects in memory</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">console.log({} == {}); // false, because they are different objects in memory</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-0\" start=\"3\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">Comparing Different Types: Number > String > Boolean</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c30 c2\">Number and String:</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-2 start\" start=\"1\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">If one operand is a number and the other is a string, JavaScript tries to convert the string to a number and then compares them.</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">e.g.</span></li></ol>",
"<ul class=\"c10 lst-kix_5iqxsvp2wyly-3 start\"><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">5 == '5'; // true, because the string '5' is coerced to the number 5</span></li><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">5 == 'yo bro'; // false, because the string 'yo bro' is coerced to the NaN</span></li></ul>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-1\" start=\"2\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c30 c2\">Boolean and Non-Boolean:</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-2 start\" start=\"1\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c30 c2\">Boolean and Number</span></li></ol>",
"<ul class=\"c10 lst-kix_5iqxsvp2wyly-3 start\"><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">When comparing a boolean and a number value, the boolean is converted to a number (true becomes 1, false becomes 0).</span></li><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">e.g.</span></li></ul>",
"<ul class=\"c10 lst-kix_5iqxsvp2wyly-4 start\"><li class=\"c1 c40 c63 li-bullet-0\"><span class=\"c8\">true == 1; // true </span></li><li class=\"c1 c40 c63 li-bullet-0\"><span class=\"c8\">false == 0; // true</span></li><li class=\"c1 c40 c63 li-bullet-0\"><span class=\"c8\">false == 1; // false</span></li><li class=\"c1 c40 c63 li-bullet-0\"><span class=\"c8\">true == 2; // false</span></li></ul>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-2\" start=\"2\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c30 c2\">Boolean and String</span></li></ol>",
"<ul class=\"c10 lst-kix_5iqxsvp2wyly-3 start\"><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">When comparing a boolean and a string value, the boolean is converted to its string value (true becomes “true”, false becomes “false”)</span></li><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">e.g.</span></li></ul>",
"<ul class=\"c10 lst-kix_5iqxsvp2wyly-4 start\"><li class=\"c1 c40 c63 li-bullet-0\"><span class=\"c8\">“true” == true // true, because true if coerced to “true”</span></li><li class=\"c1 c40 c63 li-bullet-0\"><span class=\"c8\">“false” == false // true</span></li><li class=\"c1 c40 c63 li-bullet-0\"><span class=\"c8\">“Nyc pik” == true // false </span></li></ul>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-1\" start=\"3\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c30 c2\">Null and Undefined:</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-2 start\" start=\"1\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">null and undefined are equal when using ==</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">e.g.</span></li></ol>",
"<ul class=\"c10 lst-kix_5iqxsvp2wyly-3 start\"><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">null == undefined; // true</span></li></ul>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-1\" start=\"4\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c30 c2\">Object and Primitive:</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-2 start\" start=\"1\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">If one operand is an object and the other is a primitive value, the object is converted to a primitive value using the object's valueOf() and toString() methods.</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">e.g.</span></li></ol>",
"<ul class=\"c10 lst-kix_5iqxsvp2wyly-3 start\"><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">'hello' == new String('hello'); // true, because the object, new String('hello') is coerced to the primitive value 'hello'</span></li><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">1 == [1]; // true, because the object [1], is converted to string “1” using [1].toString() and 1 == “1” as “1” is coerced to 1 so 1 == 1, which is true</span></li><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">false == [0] // true</span></li><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">[0] == 0 // true, “0” == 0 -> 0 == 0 -> true</span></li><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">[0] == “” // false, “0” == “” -> false</span></li></ul>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-1\" start=\"5\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c30 c2\">Different Objects:</span></li></ol>",
"<ol class=\"c10 lst-kix_5iqxsvp2wyly-2 start\" start=\"1\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">When comparing two different object types, the references are compared, not the contents of the objects.</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">e.g.</span></li></ol>",
"<ul class=\"c10 lst-kix_5iqxsvp2wyly-3 start\"><li class=\"c1 c12 li-bullet-0\"><span class=\"c8\">[] == {}; // false, because they are different objects in memory</span></li></ul>",
"<p class=\"c1\"><span class=\"c8\">e.g.</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log([1] == 1) // 1 == 1 = true</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log([1] == '1') // 1 == 1 = true</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(['1'] == '1') // 1 == 1 = true</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(['1'] == 1) // 1 == 1 = true</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log([1] == ['1']) // false as both are arrays (not the same reference)</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(new Boolean(true) == 1) // 1 == 1 = true</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(new Boolean(true) == new Boolean(true)) // false as both are actually objects</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(Boolean(true) == '1') // true == '1' = 1 == 1 = true</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(Boolean(false) == [0]) // false == [0] = 0 == 0 = true</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(new Boolean(true) == '1') // object true == '1' = 1 == 1 = true</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(new Boolean(false) == [0]) // object fasle == [0] = // false as both are actually objects</span></p>",
"<p class=\"c1\"><span class=\"c8\">console.log(null == undefined) // true</span></p>"
],
"+ Operator": [
"<p class=\"c13\"><span class=\"c8\">+<anyString which is not a number> = NaN, e.g. ‘biro’</span></p>",
"<p class=\"c13\"><span class=\"c8\">+<anyString which is a number> = that number, e.g. ‘1’</span></p>",
"<p class=\"c13\"><span class=\"c8\">+<anyNumber> = that number</span></p>",
"<p class=\"c13\"><span class=\"c8\">+{ } = NaN</span></p>",
"<p class=\"c13\"><span class=\"c8\">+[ ] = 0</span></p>",
"<p class=\"c13\"><span class=\"c8\">// In mathematical operators, + works on both numbers and strings (used in string concatenation). </span></p>",
"<p class=\"c13\"><span class=\"c8\">// Hence, if any of the operands is not a number(string), using + converts all operand/s to string and concatenates.</span></p>",
"<p class=\"c13\"><span class=\"c8\">String({ }) = “[object Object]”</span></p>",
"<p class=\"c13\"><span class=\"c8\">String([ ]) = “”</span></p>",
"<p class=\"c13\"><span class=\"c8\">String(123) = “123”</span></p>"
],
"to check if a key present in object": [
"<ol class=\"c10 lst-kix_n8l82284olve-0 start\" start=\"1\"><li class=\"c16 li-bullet-0\"><span class=\"c11\">if ('key' in myObj), </span><span class=\"c2\">BUT</span><span class=\"c11\"> the </span><span class=\"c11 c37\">in</span><span class=\"c8\"> operator matches all object keys, including those in the object's prototype chain.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c11\">so best way is to use<br> </span><span class=\"c2 c37\">myObj.hasOwnProperty('key')</span></li></ol>"
],
"Sparse Array": [
"<p class=\"c1\"><span class=\"c11\">In JavaScript, a sparse array is an array in which not all elements have been assigned a value. This means that there are \"holes\" or empty slots in the array, where no value is stored. These holes are represented by </span><span class=\"c11 c37\">undefined</span><span class=\"c8\">.</span></p>"
],
"Array.flat(depth)": [
"<p class=\"c1\"><span class=\"c11\">It is used to flatten a array till given depth</span></p>",
"<p class=\"c1\"><span class=\"c11 c37\">Array.prototype.flat()</span><span class=\"c8\"> method can be used with sparse arrays. When we apply flat() to a sparse array, it will remove empty slots (undefined elements) and return a new array with only the defined elements.</span></p>"
],
"Array.Sort()": [
"<p class=\"c13\"><span class=\"c8\">Array.sort expects a compare function that defines the sort order. </span></p>",
"<p class=\"c13\"><span class=\"c8\">If omitted, the array elements are converted to strings, then sorted lexicographically</span></p>",
"<p class=\"c13\"><span class=\"c8\">i.e [999, 1111, 111, 2, 0] will become [0,111,1111,2,999]</span></p>"
],
"Function Currying": [
"<p class=\"c13\"><span class=\"c8\">Currying is a technique in functional programming, in which a function with multiple arguments is converted into several functions in sequence, each taking one or more arguments.</span></p>",
"<p class=\"c1\"><span class=\"c8\">It can be done in 2 ways:</span></p>",
"<ol class=\"c10 lst-kix_p9iksw5dodg2-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">Closure methods</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Bind</span></li></ol>"
],
"Memoization": [
"<p class=\"c13\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=http://en.wikipedia.org/wiki/Memoization&sa=D&source=editors&ust=1707022712820347&usg=AOvVaw1E0zZnfkPqC9Ucyzi2J3xP\">Memoization</a></span><span class=\"c8\"> is a programming technique which is used to increase a function’s performance by caching its previously computed results.</span></p>",
"<p class=\"c13\"><span class=\"c8\">Because JavaScript objects behave like associative arrays, they are ideal candidates to act as caches. Each time a memoized function is called, its parameters are used to index the cache. If the data is present, then it can be returned, without executing the entire function. However, if the data is not cached, then the function is executed, and the result is added to the cache.</span></p>"
],
"Passing by value, Passing by reference & their relation with react memoization": [
"<ol class=\"c10 lst-kix_c29wi48j1dj1-1 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2 c34\">Passing by value:</span><span class=\"c34 c11\"> All primitives (number, string, boolean, etc) in JS are passed by value.<br>Means when we pass a primitive data type variable as an argument to a function. Any change in that argument inside that function does not affect the original variable.<br>e.g.<br></span><span class=\"c8\">const count = 1;<br>function increaseCount(count) {</span></li></ol>",
"<p class=\"c1 c28 c22\"><span class=\"c8\">count++;</span></p>",
"<p class=\"c1 c28 c22\"><span class=\"c8\">return count;</span></p>",
"<p class=\"c1 c28\"><span class=\"c8\">}</span></p>",
"<p class=\"c1 c4 c28\"><span class=\"c8\"></span></p>",
"<p class=\"c1 c28\"><span class=\"c8\">const increaseCountResp = increaseCount(count);</span></p>",
"<p class=\"c1 c28\"><span class=\"c8\">console.log(\"count\", count); // 1</span></p>",
"<p class=\"c1 c28\"><span class=\"c8\">console.log(\"increaseCountResp\", increaseCountResp); // 2<br></span></p>",
"<ol class=\"c10 lst-kix_c29wi48j1dj1-1\" start=\"2\"><li class=\"c0 li-bullet-0\"><span class=\"c2 c34\">Passing by reference:</span><span class=\"c11 c34\"> objects (object, array, function, etc) in JS are passed by reference. Means when we pass an object data type variable as an argument to a function. Any change in t</span><span class=\"c11\">hat argument inside that function also affects the original variable.<br></span><span class=\"c34 c11\">e.g.</span></li></ol>",
"<p class=\"c1 c28\"><span class=\"c8\">const obj = { a: \"a\" };</span></p>",
"<p class=\"c1 c4 c28\"><span class=\"c8\"></span></p>",
"<p class=\"c1 c28\"><span class=\"c8\">function addGreet(obj) {</span></p>",
"<p class=\"c1 c28 c22\"><span class=\"c8\">obj.greet = \"Hello World\";</span></p>",
"<p class=\"c1 c20\"><span class=\"c8\">return obj;</span></p>",
"<p class=\"c1 c28\"><span class=\"c8\">}</span></p>",
"<p class=\"c1 c4 c28\"><span class=\"c8\"></span></p>",
"<p class=\"c1 c28\"><span class=\"c8\">const greetResp = addGreet(obj);</span></p>",
"<p class=\"c1 c28\"><span class=\"c8\">console.log(\"obj\", obj); // { a: 'a', greet: 'Hello World' }</span></p>",
"<p class=\"c1 c28\"><span class=\"c8\">console.log(\"greetResp\", greetResp); // { a: 'a', greet: 'Hello World' }<br></span></p>",
"<ol class=\"c10 lst-kix_c29wi48j1dj1-1\" start=\"3\"><li class=\"c0 li-bullet-0\"><span class=\"c34 c11\">In react, </span><span class=\"c2 c34\">React.memo </span><span class=\"c34 c11\">is used to memoize a component. It prevents re-rendering of the component if its props have not been updated. And in react, props are passed by value. So if the props which are passed to a component does not change, then the memoized component can be used directly which can prevent its re-render.</span></li></ol>"
],
"ES Modules (ESM) vs CommonJS (CJS)": [
"<p class=\"c1\"><span class=\"c8\">ES Modules (ESM) and CommonJS (CJS) are two different systems for organising and importing/exporting code in JavaScript.</span></p>",
"<ol class=\"c10 lst-kix_i69mv690y5b1-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Syntax</span><span class=\"c8\">: ES Modules use import and export statements to define dependencies and expose functionality between different modules, while CommonJS uses require() to import modules and module.exports or exports to export functionality.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Async Import:</span><span class=\"c8\"> ES Modules support asynchronous loading of modules using the import() function, allowing you to conditionally load modules while CJS only supports synchronous Import.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Named and Default Exports:</span><span class=\"c8\"> ESM supports both named exports (exporting specific entities from a module) and default exports (exporting a single entity as the module's default), while CJS supports only named exports.</span></li></ol>"
],
"ECMAScript": [
"<p class=\"c13\"><span class=\"c8\">ECMAScript is the standardised specification of the rules, syntax, and features of writing code in a scripting language.</span></p>",
"<p class=\"c13\"><span class=\"c11\">JavaScript is a practical implementation of that specification, used for creating dynamic and interactive web applications and supported by various environments and platforms.</span></p>"
],
"Features of ES6": [
"<ul class=\"c10 lst-kix_9h1qo89tgt5o-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.w3schools.com/Js/js_es6.asp%23mark_let&sa=D&source=editors&ust=1707022712822002&usg=AOvVaw1AYVm-rpdOe2SSDmSGRyGA\">The let keyword</a></span></li><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.w3schools.com/Js/js_es6.asp%23mark_const&sa=D&source=editors&ust=1707022712822132&usg=AOvVaw1nYdCxIhGjKtBMFvm92QUF\">The const keyword</a></span></li><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.w3schools.com/Js/js_es6.asp%23mark_arrow&sa=D&source=editors&ust=1707022712822241&usg=AOvVaw0vce8szqTShjFmImViZqGN\">Arrow Functions</a></span></li><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.javascripttutorial.net/es6/javascript-template-literals/&sa=D&source=editors&ust=1707022712822370&usg=AOvVaw38LzvlLe4DjR1nhzOLlfsR\">template literals</a></span><span class=\"c8\">: `${name} is a good boy`</span></li><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.w3schools.com/Js/js_es6.asp%23mark_forof&sa=D&source=editors&ust=1707022712822479&usg=AOvVaw21U_v6tuEI-hO088Rkbk6k\">For/of</a></span></li><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.w3schools.com/Js/js_es6.asp%23mark_map&sa=D&source=editors&ust=1707022712822585&usg=AOvVaw1gUMNdvA2l-6wXK5_liKLr\">Map Objects</a></span><span class=\"c8\">: The Map object holds key-value pairs and remembers the original insertion order of the keys.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.w3schools.com/Js/js_es6.asp%23mark_set&sa=D&source=editors&ust=1707022712822692&usg=AOvVaw0sjMj8FJTrjp1V0gGjv66-\">Set Objects</a></span><span class=\"c8\">: The Set object lets you store unique values of any type.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.w3schools.com/Js/js_es6.asp%23mark_class&sa=D&source=editors&ust=1707022712822803&usg=AOvVaw2aghjuLkPC-QjdIZxF371c\">Classes</a></span><span class=\"c8\">: JS Classes are templates for JS Objects.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.w3schools.com/Js/js_es6.asp%23mark_promise&sa=D&source=editors&ust=1707022712822911&usg=AOvVaw3VvJbVSSZ1USby7afxAOjR\">Promises</a></span></li><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.w3schools.com/Js/js_es6.asp%23mark_param&sa=D&source=editors&ust=1707022712823024&usg=AOvVaw1rGMj6yjHnajxujW3jyAO9\">Default Parameters</a></span></li><li class=\"c0 li-bullet-0\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.w3schools.com/Js/js_es6.asp%23mark_rest&sa=D&source=editors&ust=1707022712823131&usg=AOvVaw0WyTdPq7fYUENlsOKCvHrM\">Function Rest Parameter</a></span></li></ul>"
],
"Interpolation": [
"<p class=\"c1\"><span class=\"c8\">In JavaScript, interpolation is the process of inserting strings or values into an existing string.</span></p>",
"<p class=\"c1\"><span class=\"c8\">e.g. </span></p>",
"<p class=\"c1\"><span class=\"c8\">t(\"MNgo Quiz is {{evaluation}}\", { evaluation: 'fantastic' })</span></p>"
],
"Idempotent": [
"<p class=\"c1\"><span class=\"c8\">An operation is known as idempotent if applying it multiple times has the same effect as applying it once.</span></p>",
"<p class=\"c1\"><span class=\"c8\">e.g. </span></p>",
"<p class=\"c1\"><span class=\"c2\">PUT</span><span class=\"c11\"> HTTP request is </span><span class=\"c2\">idempotent</span><span class=\"c8\"> because it will update the same value multiple time for the same request</span></p>",
"<p class=\"c1\"><span class=\"c2\">POST</span><span class=\"c11\"> HTTP request is </span><span class=\"c2\">not idempotent</span><span class=\"c11\"> as it will keep creating a new entry for the same request if called multiple times</span></p>"
],
"How npm works": [
"<p class=\"c1\"><span class=\"c8\">npm (Node Package Manager) is a package manager for JavaScript and Node.js which is used to manage and distribute packages (libraries, frameworks, etc.). It allows us to easily install, update, and manage dependencies in our project. </span></p>",
"<ol class=\"c10 lst-kix_x766zvfza836-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">if we do npm install somewhere deep inside a project, it goes up and up till it finds package.json file or node_modules folder (root of the project), for installing dependencies of the project </span></li><li class=\"c16 li-bullet-0\"><span class=\"c11\">When we install a package, npm adds an entry for that package along with its versions in the </span><span class=\"c2\">package.json</span><span class=\"c8\"> file under the \"dependencies\" section.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Dependency Resolution: </span><span class=\"c11\">npm creates a </span><span class=\"c2\">package-lock.json</span><span class=\"c8\"> file that locks package’s dependency versions, to ensure consistent and reproducible builds and they are compatible with each other.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c11\">npm supports scoped packages, which group related packages together under a specific scope (e.g. </span><span class=\"c2\">@organisation/package</span><span class=\"c8\">).</span></li></ol>",
"<p class=\"c1\"><span class=\"c8\">NPM streamlines the process of managing dependencies and packages in JavaScript and Node.js projects</span></p>",
"<ol class=\"c10 lst-kix_veiiswi3myjt-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">installation</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">version management</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">dependency resolution</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">script execution</span></li></ol>"
],
"Versioning": [
"<p class=\"c13\"><span class=\"c8\"><major version>.<minor version>.<patch version></span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<a id=\"t.1e089d50462443b6a9e5f007fade69c02e68b5f1\"></a>",
"<a id=\"t.1\"></a>",
"<table class=\"c45\"><tbody><tr class=\"c44\"><td class=\"c62\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">value</span></p></td><td class=\"c49\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">desc</span></p></td></tr><tr class=\"c44\"><td class=\"c62\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">version</span></p></td><td class=\"c49\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Must match version exactly</span></p></td></tr><tr class=\"c44\"><td class=\"c62\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">~version</span></p></td><td class=\"c49\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c11\">Approximately equivalent, i.e. only accept new </span><span class=\"c2\">patch</span><span class=\"c8\"> versions</span></p></td></tr><tr class=\"c44\"><td class=\"c62\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">^version</span></p></td><td class=\"c49\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c11\">Compatible with version, i.e. accept new </span><span class=\"c2\">minor and patch</span><span class=\"c8\"> versions</span></p></td></tr><tr class=\"c59\"><td class=\"c62\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">>version, >=version, <version, <=version</span></p></td><td class=\"c49\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Version should match the condition</span></p></td></tr><tr class=\"c59\"><td class=\"c62\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">1.2.x</span></p></td><td class=\"c49\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">1.2.0, 1.2.1, etc., but not 1.3.0</span></p></td></tr><tr class=\"c59\"><td class=\"c62\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">*</span></p></td><td class=\"c49\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Matches any version</span></p></td></tr><tr class=\"c59\"><td class=\"c62\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">latest</span></p></td><td class=\"c49\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Obtains latest release</span></p></td></tr></tbody></table>"
],
"What is Bundler": [
"<p class=\"c13\"><span class=\"c8\">A bundler is a tool used in web development to combine multiple separate files, often written in different languages or technologies, into a single file or a smaller number of files.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Here are the key aspects and benefits of using a bundler:</span></p>",
"<ol class=\"c10 lst-kix_topoctn1gqvm-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">File Dependency Resolution:</span><span class=\"c8\"> Bundlers analyse the codebase to determine the dependencies between different files, including JavaScript modules, CSS files, images, and more.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Code Transformation: </span><span class=\"c8\">Bundlers can apply transformations to the code, such as transpiling newer JavaScript syntax into a version compatible with older browsers.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Optimising and Minifying: </span><span class=\"c8\">Bundlers can optimise code by removing whitespace, renaming variables, and performing other operations to reduce file size. This is often referred to as minification.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Module System Compatibility: </span><span class=\"c8\">Bundlers allow you to use modern JavaScript module systems (like ES6 Modules) and bundle them for browsers that may not natively support these features.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Code Splitting: </span><span class=\"c8\">Bundlers support code splitting, which allows parts of the application to be loaded on demand, improving initial load times.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Asset Management: </span><span class=\"c8\">Bundlers can handle assets like images, fonts, and other files, ensuring they are included and processed correctly in the final output.</span></li></ol>",
"<p class=\"c13\"><span class=\"c8\">e.g. Webpack, Rollup, Parcel, Browserify</span></p>"
],
"Webpack": [
"<p class=\"c13\"><span class=\"c8\">Webpack is a popular open-source module bundler for modern web applications. It's widely used in the JavaScript ecosystem to manage and bundle various assets like JavaScript files, CSS files, images, fonts, and more. Webpack helps optimise the loading and execution of web applications by intelligently combining and serving these assets.</span></p>",
"<ol class=\"c10 lst-kix_so97aj7h750j-0 start\" start=\"1\"><li class=\"c13 c28 c40 li-bullet-0\"><span class=\"c8\">Webpack offers various optimization techniques, including minification, code splitting, and caching, to improve the performance of web applications.</span></li><li class=\"c13 c28 c40 li-bullet-0\"><span class=\"c8\">Webpack supports tree shaking, a technique that eliminates dead code (unused exports) from the final bundle. This helps reduce file size.</span></li><li class=\"c13 c28 c40 li-bullet-0\"><span class=\"c11\">Webpack is highly configurable through a </span><span class=\"c2\">webpack.config.js</span><span class=\"c8\"> file. This file specifies how Webpack should process different types of files and how the final bundle should be generated.</span></li><li class=\"c13 c28 c40 li-bullet-0\"><span class=\"c8\">Webpack uses loaders to preprocess files. Loaders transform files from one format to another.</span></li><li class=\"c13 c28 c40 li-bullet-0\"><span class=\"c11\">Webpack provides a development server that enables</span><span class=\"c2\"> Hot Module Replacement (HMR)</span><span class=\"c8\">. This means that when you make changes to your code, the browser is updated in real-time without requiring a full page refresh.</span></li></ol>"
],
"Parcel": [
"<p class=\"c1\"><span class=\"c8\">Parcel is a zero-configuration module bundler. It's designed to be extremely easy to set up and use, making it a good choice for quick prototyping or smaller projects.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Key Features of Parcel:</span></p>",
"<ol class=\"c10 lst-kix_d5a2l8k8h6kf-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">Zero Configuration</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Built-in Support for Common Technologies: React, vue, Svelte, without extra configuration</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Code Splitting</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Hot Module Replacement (HMR)</span></li></ol>"
],
"Babel": [
"<p class=\"c13\"><span class=\"c8\">Babel transpiles modern JavaScript code (ES6+ syntax) into a version of JavaScript that is compatible with older browsers and environments. This allows developers to write code using the latest language features while ensuring it can run on a wider range of platforms.</span></p>",
"<p class=\"c13\"><span class=\"c2\">Babel is commonly used in React projects to transpile JSX syntax into regular JavaScrip</span><span class=\"c8\">t.</span></p>",
"<p class=\"c1\"><span class=\"c11\">Babel can be configured using a configuration file (usually named .</span><span class=\"c2\">babelrc</span><span class=\"c8\">) or through configuration options in package.json. </span></p>",
"<p class=\"c1\"><span class=\"c8\">Here's how Babel works:</span></p>",
"<ol class=\"c10 lst-kix_j4tr1tp3rbqn-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Parsing</span><span class=\"c11\">: Babel starts by parsing the input JavaScript code using a parser like </span><span class=\"c2\">Babel Parser</span><span class=\"c8\">. This step breaks down the code into an Abstract Syntax Tree (AST), which is a hierarchical representation of the code's structure.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Transformation</span><span class=\"c8\">: Once the code is parsed, Babel can apply various plugins to the AST. These plugins can do things like transforming newer syntax into equivalent older syntax or adding polyfills for missing features.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Generation</span><span class=\"c8\">: After the AST has been transformed, Babel then generates code from the modified AST. This code is typically in an older version of JavaScript that is widely supported across different environments.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Output</span><span class=\"c8\">: The transformed code is then outputted, and it can be saved to a file or used directly in a browser or server environment.</span></li></ol>"
],
"Source Maps": [
"<p class=\"c13\"><span class=\"c11\">Source maps are a way to map a bundled (combined/minified) code back to an unbuilt state. When we build for production, along with minifying and combining our JavaScript files, we generate a source map too which holds information about the original files.</span></p>"
],
".env variable": [
"<p class=\"c13\"><span class=\"c8\">An \"environment variable,\" often referred to simply as an \"env variable,\" is a variable outside of a program or application that stores configuration settings, system information, or any data that needs to be available to multiple processes or components within an operating system or application environment. These variables are used to customise the behaviour of software and to manage various aspects of the environment in which programs run.</span></p>"
],
"Prettier": [
"<p class=\"c13\"><span class=\"c8\">Prettier is an open-source code formatter that is used to format the code to follow a consistent style and layout. It supports various programming languages, including JS, TS, HTML, CSS, JSON, and more. Prettier helps teams maintain a standardised code style without manual formatting efforts or debates over code formatting conventions.</span></p>"
],
"Linter": [
"<p class=\"c13\"><span class=\"c8\">A linter is a code analysis tool used to check source code for potential errors, bugs, style violations, and adherence to coding standards or style guidelines. It helps identify issues early in the development process, before the code is executed or deployed, reducing the likelihood of bugs and making the codebase more maintainable.</span></p>",
"<p class=\"c13\"><span class=\"c11\">e.g. </span><span class=\"c2\">ESLint</span><span class=\"c11\"> (for JavaScript and TypeScript), </span><span class=\"c2\">Pylint</span><span class=\"c11\"> (for Python), </span><span class=\"c2\">TSLint</span><span class=\"c11\"> (for TypeScript), </span><span class=\"c2\">Stylelint</span><span class=\"c11\"> (for CSS and Sass)</span></p>"
],
"Unit Testing": [
"<p class=\"c13\"><span class=\"c8\">Unit testing is a software development practice in which individual units or components (like functions, methods, or modules) of a program are tested in isolation from the rest of the application. The goal is to ensure that each unit of code works as expected.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Here are the key aspects of unit testing:</span></p>",
"<ol class=\"c10 lst-kix_bow3ara6toou-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Isolation</span><span class=\"c8\">: Unit tests focus on testing a specific piece of functionality in isolation. This means that external dependencies or interactions are typically replaced with mock objects or stubs.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Fast Execution: </span><span class=\"c8\">Unit tests should be quick to execute. This allows developers to get fast feedback on the correctness of their code.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Deterministic: </span><span class=\"c8\">A unit test should always produce the same result when run under the same conditions. This means that tests should not rely on external factors like the network or system time.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Repeatable: </span><span class=\"c8\">Unit tests should be repeatable in different environments. They should produce the same results whether run on a developer's machine or in a CI/CD pipeline.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Independent: </span><span class=\"c8\">Unit tests should be independent of each other. The success or failure of one test should not impact the results of another test.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Good Test Coverage: </span><span class=\"c8\">The goal of unit testing is to achieve a high level of test coverage, ensuring that most if not all code paths are tested.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Refactoring Safety Net: </span><span class=\"c8\">Unit tests act as a safety net when refactoring code. They help ensure that existing functionality remains intact after making changes.</span></li></ol>"
],
"End to End Testing": [
"<p class=\"c1\"><span class=\"c8\">The primary goal of E2E testing is to ensure that all components or units work together correctly in a real-world scenario. It helps catch integration issues and ensures that the application functions as expected from the user's perspective. e.g. Selenium, Cypress, Puppeteer, and TestCafe</span></p>",
"<ol class=\"c10 lst-kix_nl4jwaz02050-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Scope</span><span class=\"c8\">: E2E testing aims to test the entire flow of an application from the user's perspective. It simulates real user interactions with the system.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Granularity</span><span class=\"c8\">: E2E tests are coarse-grained and cover a broader range of functionalities. They often involve multiple units and can span across different components or modules.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Dependencies</span><span class=\"c8\">: E2E tests do not typically use mocks or stubs. They interact with the actual application and its dependencies as a real user would.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Speed</span><span class=\"c8\">: E2E tests are slower compared to unit tests because they involve interactions with the entire application, including user interfaces, databases, and external systems.</span></li></ol>"
],
"Test Driven Development (TDD)": [
"<p class=\"c1\"><span class=\"c11\">Test Driven Development (TDD) is a software development practice that focuses on creating unit test cases before writing the actual code.</span></p>"
],
"Git": [
"<p class=\"c1\"><span class=\"c2\">Revert a commit: </span><span class=\"c8\">git revert <commit id> or git reset –soft <commit id></span></p>",
"<p class=\"c1\"><span class=\"c2\">Git Rebase:</span><span class=\"c8\"> naam pe dhyaan do -> re-base (change base of the feature branch to the latest commit of the main branch)</span></p>",
"<p class=\"c1\"><span class=\"c11\">Ref: </span><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.youtube.com/watch?v%3D0chZFIZLR_0&sa=D&source=editors&ust=1707022712831174&usg=AOvVaw1NwrkWVOQqoit3hFEBUaCp\">https://www.youtube.com/watch?v=0chZFIZLR_0</a></span></p>",
"<p class=\"c1\"><span class=\"c30 c2\">git merge vs git rebase: </span></p>",
"<ol class=\"c10 lst-kix_dsclaz4niv2u-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">git merge: </span><span class=\"c11\">git merge combines the changes from one branch into another branch, creating a new \"merge commit\" that has two parent commits. </span><span class=\"c53 c2 c37\">git merge <source-branch></span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">git rebase:</span><span class=\"c11\"> git rebase moves or combines a sequence of commits to a new base commit. It essentially rewrites the commit history.</span><span class=\"c2 c37\"> git rebase <target-branch></span></li></ol>"
],
"Debugging": [
"<p class=\"c13\"><span class=\"c30 c2\">Steps involved in Debugging</span></p>",
"<ol class=\"c10 lst-kix_kf3zgyqol2h4-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Reproducing the Error:</span><span class=\"c8\"> Before you can debug an issue, you need to be able to reproduce it consistently. This involves understanding the conditions or inputs that lead to the problem.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Identify the Actual Error:</span><span class=\"c8\"> Identifying an error in a wrong may result in the wastage of time. It is very obvious that the production errors reported by users are hard to interpret, and sometimes the information we receive is misleading. Thus, it is mandatory to identify the actual error.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Find the Error Location:</span><span class=\"c8\"> Once the error is correctly discovered, you will be required to thoroughly review the code repeatedly to locate the position of the error. In general, this step focuses on finding the error rather than perceiving it.</span></li></ol>",
"<ol class=\"c10 lst-kix_kf3zgyqol2h4-1 start\" start=\"1\"><li class=\"c18 li-bullet-0\"><span class=\"c8\">Use Console Logs</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">Set Breakpoints</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">Step Through the Code</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">Isolate the Problem: Narrow down the scope of the problem. Identify which part of the code is causing the issue. This may involve commenting out sections of code to see when the behaviour changes.</span></li></ol>",
"<ol class=\"c10 lst-kix_kf3zgyqol2h4-0\" start=\"4\"><li class=\"c16 li-bullet-0\"><span class=\"c2\">Analyse the Error:</span><span class=\"c8\"> The next step comprises error analysis, a bottom-up approach that starts from the location of the error followed by analysing the code. This step makes it easier to comprehend the errors. Mainly error analysis has two significant goals, i.e., evaluation of errors all over again to find existing bugs and postulating the uncertainty of incoming collateral damage in a fix.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Test Potential Solutions: </span><span class=\"c8\">Implement potential solutions one at a time and test to see if they resolve the issue. Be cautious and make small, reversible changes.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Document Your Findings:</span><span class=\"c8\"> Keep track of what you've tried, what worked, and what didn't. This documentation can be valuable for future debugging or for team members.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Retest and Verify: </span><span class=\"c11\">After making changes, ensure that the issue is resolved and that it didn't introduce any new problems.</span></li></ol>"
],
"SOLID Principles in OOP": [
"<p class=\"c1\"><span class=\"c8\">The SOLID principles are a set of five design principles that are intended to guide software development in order to create maintainable, flexible, and scalable code. </span></p>",
"<ol class=\"c10 lst-kix_3u32e4rkoy3e-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Single Responsibility Principle (SRP):</span><span class=\"c8\"> Given class should have only 1 responsibility.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Open-Closed Principle (OCP):</span><span class=\"c24\"> </span><span class=\"c8\">Software entities (classes, modules, functions) should be open for extension but closed for modification, meaning new functionality can be added to the system without altering existing code.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Liskov Substitution Principle (LSP):</span><span class=\"c8\"> Objects of a subclass should be able to replace Objects of superclass without affecting the correctness of the program.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Interface Segregation Principle (ISP):</span><span class=\"c8\"> Breaking large interfaces into smaller, specific interfaces Instead of having monolithic interfaces.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Dependency Inversion Principle (DIP):</span><span class=\"c11\"> High-level modules should not depend on low-level modules, but both should depend on abstractions (interfaces or abstract classes).</span></li></ol>"
],
"Design Patterns": [
"<p class=\"c13\"><span class=\"c11\">ref: </span><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://www.youtube.com/watch?v%3Dtv-_1er1mWI&sa=D&source=editors&ust=1707022712832778&usg=AOvVaw2X2ZclMT0U42hnxiKYyKpe\">https://www.youtube.com/watch?v=tv-_1er1mWI</a></span></p>",
"<ul class=\"c10 lst-kix_w0hqh8eqxkcy-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Creational Design Patterns:</span><span class=\"c8\"> how objects are created</span></li></ul>",
"<ul class=\"c10 lst-kix_w0hqh8eqxkcy-1 start\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Singleton</span><span class=\"c8\">: It guarantees a single instance of an object. Imagine you have a magical treasure chest. The Singleton pattern ensures that you always use the same chest throughout your journey, no matter how many times you need it.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Factory</span><span class=\"c8\">: Defines an interface for creating an object but lets subclasses alter the type of objects that will be created. Think of a car factory. The Factory pattern is like an assembly line that produces cars. Instead of building a car from scratch each time, you have a factory that churns out cars with consistent features.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Builder</span><span class=\"c8\">: Separates the construction of a complex object from its representation. Let's imagine you're building a fancy house. The Builder Pattern is like having a skilled team of builders who follow a blueprint to construct your dream home, step by step. Each builder has a specific role, and they work together to create a house that meets your requirements.</span></li></ul>",
"<ul class=\"c10 lst-kix_w0hqh8eqxkcy-0\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Structural Design Patterns:</span><span class=\"c8\"> how objects relate to each other</span></li></ul>",
"<ul class=\"c10 lst-kix_w0hqh8eqxkcy-1 start\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Decorator</span><span class=\"c8\">: Attaches additional responsibilities to an object dynamically. Consider a plain cake. The Decorator pattern is like adding layers of frosting, fruits, or chocolate to make the cake fancy. You enhance an object's functionality by wrapping it with additional features.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Module</span><span class=\"c8\">: Organises code into separate modules, similar to having different compartments in a toolbox for organising tools.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Adapter</span><span class=\"c8\">: Allows objects with incompatible interfaces to work together. Imagine you have a collection of old, vintage vinyl records that you want to play. However, your fancy new sound system only supports the latest digital music formats. This is where the adapter comes in. The adapter is like a magical device that you plug into your sound system. It knows how to translate the signals from your old vinyl records into a format that the new sound system can understand.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Facade</span><span class=\"c8\">: Provides a simplified interface to a complex system of classes. Imagine you have a complex gadget, like a high-tech coffee maker with many buttons, switches, and settings. Making a cup of coffee might involve a series of steps and configurations. Now, not everyone is a barista or interested in all the technical details of the coffee maker. Some just want a quick and easy way to get their coffee. The facade is like a simplified control panel on the coffee maker that provides easy buttons like \"Start,\" \"Brew,\" or \"Cappuccino.\" It hides the complexity of the inner workings of the coffee maker.</span></li></ul>",
"<ul class=\"c10 lst-kix_w0hqh8eqxkcy-0\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Behavioural Design Patterns</span><span class=\"c8\">: how objects communicate with each other</span></li></ul>",
"<ul class=\"c10 lst-kix_w0hqh8eqxkcy-1 start\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Observer</span><span class=\"c8\">: Defines a one-to-many dependency between objects, so that when one object changes state, all its dependents are notified and updated automatically. Picture a weather station. The Observer pattern is like having many weather apps on your phone. Whenever the weather changes, all the apps get updated simultaneously. It's a way for multiple parts of your program to stay in sync.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Mediator</span><span class=\"c8\">: Reduces direct connections between objects by introducing a central mediator object.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Command</span><span class=\"c8\">: Turns a request into a stand-alone object, encapsulating all the information about the request. Encapsulates a request as an object, allowing you to parameterize clients with queues, requests, and operations, like giving commands to a robot that executes them later.</span></li></ul>",
"<ul class=\"c10 lst-kix_w0hqh8eqxkcy-0\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Architectural Patterns</span><span class=\"c8\">:</span></li></ul>",
"<ul class=\"c10 lst-kix_w0hqh8eqxkcy-1 start\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">MVC (Model-View-Controller):</span><span class=\"c8\"> Separates an application into three interconnected components: Model (data), View (user interface), and Controller (handles user input). Consider a restaurant. The MVC pattern separates the kitchen (Model), where the food is prepared, the dining area (View), where customers see and enjoy the food, and the waiter (Controller), who takes orders and communicates between the kitchen and dining area.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">MVVM (Model-View-ViewModel):</span><span class=\"c8\"> MVVM is like building a house where you have a blueprint (Model), the actual house (View), and an interior decorator (ViewModel) making sure everything looks good inside based on the plan</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Flux</span><span class=\"c8\">: An architecture for managing the flow of data in a web application, often used with React.</span></li></ul>"
],
"Difference between Controller (of MVC) and ViewModel (of MVVM)": [
"<p class=\"c1\"><span class=\"c8\">While both the Controller and ViewModel play roles in connecting the Model and View, the Controller often handles the overall application flow and user input, while the ViewModel is more focused on organising and presenting data in a way that is suitable for the user interface.</span></p>"
],
"Agile Methodology": [],
"How would you ensure that your team is adhering to established coding standards to keep consistency in the codebase?": [
"<p class=\"c1\"><span class=\"c8\">To ensure that our team follows the established coding standards, we can follow these strategies:</span></p>",
"<ul class=\"c10 lst-kix_rpo48hbqny2m-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2 c34\">Coding Guidelines Document:</span><span class=\"c7\"> We can create a document for defining a set of coding standards and rules to adhere while writing code.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2 c34\">Keeping the custom defined code formatter file for multiple IDEs in the repo: </span><span class=\"c7\">We can keep the code formatter file in the repo itself (like settings.json in .vscode folder for vscode), which automatically formats the code on saving the file.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2 c34\">Using linter on pre-commit:</span><span class=\"c7\"> We can use linter, which checks and highlights the variation from the defined coding standards before pushing it to git repo.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2 c34\">Setting Up linter in CI/CD pipeline:</span><span class=\"c7\"> We can add linter in the CI/CD pipeline of the repo. So on each push, linter will analyse the code and highlight the coding format issues</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2 c34\">Defining Code Review Guidelines & following them while doing Code Reviews: </span><span class=\"c7\">Similar to the Coding Guidelines Document, we can also create a Code Review Guidelines Document and follow them while doing code reviews. We can comment at the line, where we found any breach of defined coding standards, while doing the code review or our peer’s PR.</span></li></ul>",
"<p class=\"c1 c4\"><span class=\"c7\"></span></p>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>"
]
},
"Browser & Web Optimisation": {
"What does <!DOCTYPE html> mean?": [
"<p class=\"c1\"><span class=\"c11\"><!DOCTYPE html> is a declaration at the beginning of an HTML document that defines the document type and version of HTML being used. By including <!DOCTYPE html>, we signal the browser to use the latest standard mode, which helps ensure consistent rendering and behaviour across different browsers.</span></p>"
],
"HTML Semantic": [
"<p class=\"c1\"><span class=\"c8\">Instead of using divs everywhere, using correct html element to convey the meaning of the element like header, nav, main, section article, aside, footer, figure, figcaption, details, summary, etc</span></p>",
"<p class=\"c1\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 147.40px; height: 174.20px;\"><img alt=\"\" src=\"images/image9.png\" style=\"width: 147.40px; height: 174.20px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"></span></p>"
],
"HTML manifest attribute": [
"<p class=\"c1\"><span class=\"c11\">The </span><span class=\"c11 c37\">manifest</span><span class=\"c8\"> attribute in HTML is used to specify the location of a web application's cache manifest file. The cache manifest file is a text file that lists the resources (like HTML files, CSS, JavaScript, images, etc) that should be cached by the browser when the user visits the site. </span></p>",
"<p class=\"c1\"><span class=\"c8\">e.g. </span></p>",
"<p class=\"c1\"><span class=\"c8\"><html manifest=\"example.appcache\"></html></span></p>"
],
"HTML Quirks Mode": [
"<p class=\"c1\"><span class=\"c8\">Quirks mode is a way for browsers to maintain backward compatibility with older web pages that were designed before the widespread adoption of standardised HTML and CSS specifications.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Omitting the <!DOCTYPE html> declaration or using an outdated/incorrect <!DOCTYPE> can trigger quirks mode.</span></p>"
],
"Iframe options": [
"<ol class=\"c10 lst-kix_pb83xyg09c4c-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">src</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Width, height</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Loading - lazy, </span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Sandbox - allow-same-origin allow-scripts</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Allow - geolocation; microphone; camera</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">scrolling</span></li></ol>"
],
"Event Delegation": [
"<p class=\"c13\"><span class=\"c8\">Event delegation is the process of not adding event listeners to all the child elements but on parent only and then handling events from there, using Event Bubbling.</span></p>"
],
"Benefit of Event Delegation": [
"<ol class=\"c10 lst-kix_k4n78zhv831i-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Improved Performance: </span><span class=\"c8\">This reduces the total number of event listeners, which can lead to better performance, especially on large pages or in applications with many interactive elements.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Dynamic Elements: </span><span class=\"c8\">Event delegation works well with dynamically generated or added elements. Since the event listener is attached to a parent element that already exists in the DOM.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Reduced Memory Consumption: </span><span class=\"c8\">Attaching event listeners to individual elements can lead to memory leaks in certain situations, especially if elements are frequently created and destroyed. Event delegation can help in this.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Simplifies Event Management: </span><span class=\"c8\">Event delegation can lead to cleaner and more organised code, as you can handle events for similar elements in a single place.</span></li></ol>"
],
"Event Bubbling: (bubble burst in outwards direction)": [
"<p class=\"c13\"><span class=\"c11\">When the element and its parent container both have an onClick event handler defined, then on clicking on the child element, the event handler function of the element and its parent both(i</span><span class=\"c11 c37\">n sequence from child to parent</span><span class=\"c8\">) gets called/invoked, this phenomenon is k/n as event bubbling.</span></p>",
"<p class=\"c13\"><span class=\"c8\">i.e. in case of event bubbling, the event movement begins from the target to the outermost element in the file.</span></p>",
"<p class=\"c87\"><span class=\"c2 c37\">event.stopPropagation() </span><span class=\"c8\">is used in child’s event handlers to stop/prevent this phenomenon.</span></p>"
],
"Event Capturing": [
"<p class=\"c13\"><span class=\"c8\">Event capturing is the same as event bubbling, only here an event moves from the outermost element to the target.</span></p>"
],
"Attaching Event Listener to Dynamically created DOM Element": [
"<p class=\"c13\"><span class=\"c8\">e.g. suppose we created a select element dynamically and attached change event listener to it, then it will not work</span></p>",
"<p class=\"c13\"><span class=\"c8\">const selectEle = document.createElement(\"select\");</span></p>",
"<p class=\"c13\"><span class=\"c8\">selectEle.dataset.selectFieldId = “mine”</span></p>",
"<p class=\"c13\"><span class=\"c8\">// selectEle.addEventListener(\"change\", handleProductChange); // does not works</span></p>",
"<p class=\"c13\"><span class=\"c11\">element.addEventListener(\"event\", handleEvent); </span><span class=\"c30 c2\">does not work for dynamically created elements </span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c11\">we need to </span><span class=\"c2\">attach change event listener to the nearest static parent element </span><span class=\"c8\">of the select element</span></p>",
"<p class=\"c13\"><span class=\"c8\">suppose #content is the static div in our html file, where we are rendering DOM elements dynamically using javaScript, then we can attach eventListener to #content and use event delegation to handle change in our select element</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c8\">const contentEle = document.getElementById(\"content\");</span></p>",
"<p class=\"c13\"><span class=\"c8\">contentEle.addEventListener('change', handleChange);</span></p>",
"<p class=\"c1\"><span class=\"c8\">function handleChange(e) {</span></p>",
"<p class=\"c1\"><span class=\"c8\"> const selectFieldId = e?.target?.dataset?.selectFieldId;</span></p>",
"<p class=\"c1\"><span class=\"c8\"> if (selectFieldId === “mine”) {</span></p>",
"<p class=\"c1\"><span class=\"c8\"> // do the work</span></p>",
"<p class=\"c1\"><span class=\"c8\"> }</span></p>",
"<p class=\"c1\"><span class=\"c8\">}</span></p>"
],
"Feature Detection vs User-Agent Sniffing": [
"<p class=\"c1\"><span class=\"c8\">Feature detection and user agent sniffing are two different approaches used in web development to achieve cross-browser compatibility. They serve as techniques to determine the capabilities of a user's browser.</span></p>",
"<p class=\"c1\"><span class=\"c2\">Feature detection</span><span class=\"c8\"> involves checking if a specific feature or capability is supported by the browser before attempting to use it.</span></p>",
"<p class=\"c1\"><span class=\"c8\">if (typeof localStorage !== 'undefined') {</span></p>",
"<p class=\"c1 c22\"><span class=\"c8\">// localStorage is supported, use it</span></p>",
"<p class=\"c1\"><span class=\"c8\">} else {</span></p>",
"<p class=\"c1 c22\"><span class=\"c8\">// Provide an alternative or fallback behaviour</span></p>",
"<p class=\"c1\"><span class=\"c8\">}</span></p>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c1\"><span class=\"c2\">User agent sniffing</span><span class=\"c8\"> (or browser sniffing) involves examining the User-Agent header sent by the browser in the HTTP request to identify the type and version of the browser being used.</span></p>",
"<p class=\"c1\"><span class=\"c8\">if (navigator.userAgent.indexOf('MSIE') !== -1) {</span></p>",
"<p class=\"c1\"><span class=\"c8\"> // Internet Explorer specific code</span></p>",
"<p class=\"c1\"><span class=\"c8\">} else {</span></p>",
"<p class=\"c1\"><span class=\"c8\"> // Code for other browsers</span></p>",
"<p class=\"c1\"><span class=\"c11\">}</span></p>"
],
"Web APIs": [
"<p class=\"c13\"><span class=\"c8\">Browser has superpowers that are lent to JS engine to execute some tasks, these are Web APIs such as:</span></p>",
"<ol class=\"c10 lst-kix_y9l0gp7k25k9-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">console (console.log())</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">location (location.href = “”)</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">DOM API (document.getElementById(“”))</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">setTimeout</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">fetch</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">local storage (localStorage.getItem(\"”))</span></li></ol>"
],
"Local storage/Session storage/IndexedDB": [
"<p class=\"c13\"><span class=\"c8\">All of them exist for the same origin and stores data on the client side.</span></p>",
"<a id=\"t.05483fc709e54c5306ea591dc7e64df14e126431\"></a>",
"<a id=\"t.2\"></a>",
"<table class=\"c45\"><tbody><tr class=\"c44\"><td class=\"c36\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">sessionStorage</span></p></td><td class=\"c79\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">localStorage</span></p></td><td class=\"c74\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c30 c2\">indexedDB</span></p></td></tr><tr class=\"c59\"><td class=\"c36\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Maximum limit is 5 MB</span></p></td><td class=\"c79\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Maximum limit is 5 MB</span></p></td><td class=\"c74\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Maximum limit is 50 MB</span></p></td></tr><tr class=\"c86\"><td class=\"c36\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Data in the sessionStorage exists till the browser is open. If we close the browser then our data will also erase automatically from the sessionStorage.</span></p></td><td class=\"c79\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">localStorage has no expiration time, Data in the localStorage persist till the user manually delete it</span></p></td><td class=\"c74\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">same as localStorage</span></p></td></tr><tr class=\"c66\"><td class=\"c36\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">sessionStorage.setItem(“hi”, “”hello”)</span></p></td><td class=\"c79\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">localStorage.setItem(“hi”, “”hello”)</span></p></td><td class=\"c74\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">window.indexedDB.open(\"MyTestDatabase\", 3);</span></p></td></tr></tbody></table>"
],
"Cookies (Maximum limit is 4 KB)": [
"<p class=\"c13\"><span class=\"c8\">Cookies are small files which are stored on a user’s computer for a domain. They are used to hold a modest amount of data specific to a particular client and website and can be accessed either by the web server or by the user’s browser.</span></p>",
"<p class=\"c13\"><span class=\"c8\">Only the same website that saves information to a cookie can access it.</span></p>"
],
"Shadow DOM": [
"<p class=\"c13\"><span class=\"c8\">Shadow DOM is used for building reusable and encapsulated web components, helping to prevent style and script conflicts between different parts of a web page. The Shadow DOM provides a way to encapsulate the structure, style, and behaviour of a component within a scoped and isolated container.</span></p>",
"<p class=\"c13\"><span class=\"c8\">Benefits of using the Shadow DOM:</span></p>",
"<ul class=\"c10 lst-kix_jdpkzr27vbdv-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Encapsulation</span><span class=\"c8\">: Components with Shadow DOM are self-contained and encapsulated.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Reusability:</span><span class=\"c8\"> Shadow DOM enables developers to create reusable components that can be easily dropped into different parts of a web page or shared across projects.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Isolation:</span><span class=\"c8\"> Shadow DOM provides isolation for both styling and scripting, making it possible to create complex components without worrying about interference from external styles or scripts.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Maintenance:</span><span class=\"c11\"> Changes made within a shadow tree are less likely to affect other parts of the application, improving code maintenance and reducing unintended side effects.</span></li></ul>"
],
"PWA (Progressive Web App)": [
"<p class=\"c1\"><span class=\"c8\">Progressive Web Apps (PWAs) are a type of web application that delivers a native app-like experience to users while being built with web technologies (HTML, CSS, and JavaScript). They offer a range of benefits that combine the best of web and native app experiences.</span></p>",
"<ol class=\"c10 lst-kix_t7upf7ygvy2e-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">App like experience</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Offline functionality</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Faster loading (because of cached resources)</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Push notification</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Background task</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">Responsive</span></li></ol>"
],
"Service Worker": [
"<p class=\"c13\"><span class=\"c11\">A </span><span class=\"c2\">Service Worker</span><span class=\"c8\"> is a JavaScript script that runs in the background of a web browser, independent of the web page, and enables advanced features like task execution in background, caching/offline support, push notifications, and background synchronisation.</span></p>",
"<p class=\"c13\"><span class=\"c8\">It is a key component of Progressive Web Apps (PWAs) and can significantly enhance the performance, reliability, and user experience of web applications, especially in offline or low-network conditions.</span></p>",
"<p class=\"c13\"><span class=\"c8\">The service worker life cycle</span></p>",
"<ul class=\"c10 lst-kix_rpo48hbqny2m-0\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">Registration</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Installation</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Activation</span></li></ul>"
],
"Difference b/w Service Worker and Web Worker": [
"<p class=\"c1\"><span class=\"c8\">Service Worker is used for tasks related to network request, caching, offline functionality, while Web Worker is used to parallelize tasks like heavy computation or data processing independently from the main thread.</span></p>"
],
"Difference b/w http cache and service worker cache": [
"<p class=\"c1\"><span class=\"c8\">HTTP cache is browser-level caching controlled by HTTP headers, while Service Worker cache is a programmable JavaScript cache offering more control, offline capabilities, and persistence for web applications.</span></p>"
],
"Different types of cache": [
"<p class=\"c1\"><span class=\"c2\">Browser Cache</span><span class=\"c8\">: browser-level cache done using http headers, Stores static files locally, reducing the need to re-download them on subsequent visits.</span></p>",
"<p class=\"c1\"><span class=\"c2\">Content Delivery Network (CDN) Cache:</span><span class=\"c8\"> Distributes static content globally to reduce latency and improve load times.</span></p>",
"<p class=\"c1\"><span class=\"c2\">Database Cache: </span><span class=\"c8\">Stores frequently accessed database query results in memory for faster retrieval.</span></p>",
"<p class=\"c1\"><span class=\"c2\">Object Cache: </span><span class=\"c8\">Caches results of expensive function calls or calculations for reuse.</span></p>",
"<p class=\"c1\"><span class=\"c2\">Memory Cache: </span><span class=\"c8\">Stores data in the server's memory for quick access and improved performance.</span></p>"
],
"Process of Browser Caching": [
"<ul class=\"c10 lst-kix_krzj95ya19hx-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">The browser loads the resource for the first time, the server returns 200, and the browser downloads the resource file from the server, and caches the resource file and response header for comparison and to use in the next load.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">The next time when the client requests to load the resource, the time difference between the current time and the last return of 200 responses is first compared. If it does not exceed the </span><span class=\"c11 c37\">max-age</span><span class=\"c11\"> set by cache-control, it will hit the cache and load resources locally. If the browser does not support HTTP 1.1, it uses the </span><span class=\"c11 c37\">expires</span><span class=\"c8\"> header to determine whether it has expired.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">If the resource has expired, it means that the cached resource may no longer be valid, and a request with If-None-Match and If-Modified-Since section is sent to the server.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">After the server receives the request, it first validates whether the requested resource has been modified based on the </span><span class=\"c11 c37\">Etag</span><span class=\"c8\"> value. If the Etag value is the same, there is no modification; 304 is returned; if E-tag value is inconsistent which means there is a change, the new resource will be directly returned with a new Etag and status code 200. </span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">If the request received by the server does not have an Etag value, it will compare </span><span class=\"c11 c37\">If-Modified-Since</span><span class=\"c8\"> with the last modification time of the requested resource. If it has not changed, server will return 304; if they are inconsistent, server will return the response header with new last-modified, resource and return status code 200.</span></li></ul>"
],
"Communication Across Browser Tabs": [
"<p class=\"c13\"><span class=\"c11\">ref:</span><span class=\"c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://dev.to/weifengnusceg/browser-concepts-the-one-and-only-guide-you-need-3bni&sa=D&source=editors&ust=1707022712843141&usg=AOvVaw1Ap7-i6uIs_TVH42H7rZt0\"> </a></span><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://dev.to/weifengnusceg/browser-concepts-the-one-and-only-guide-you-need-3bni&sa=D&source=editors&ust=1707022712843236&usg=AOvVaw1Stfq9g_NxN_-gHwhK0xre\">https://dev.to/weifengnusceg/browser-concepts-the-one-and-only-guide-you-need-3bni</a></span></p>",
"<ul class=\"c10 lst-kix_vanmwiylts25-0 start\"><li class=\"c16 li-bullet-0\"><span class=\"c30 c2\">Window.postMessage():</span></li></ul>",
"<ul class=\"c10 lst-kix_vanmwiylts25-1 start\"><li class=\"c18 li-bullet-0\"><span class=\"c11\">The </span><span class=\"c2\">postMessage()</span><span class=\"c8\"> method allows you to send messages between different windows or tabs that share the same origin (same domain).</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">One window can send a message to another window/tab by specifying the target window's reference and the data to be sent.<br><br> targetWindow.postMessage(“your message”, targetOrigin) <br> window.addEventListener(\"message\", (event) => {</span></li></ul>",
"<p class=\"c13 c20\"><span class=\"c8\"> if (event.origin !== \"http://localhost:8080\") return;</span></p>",
"<p class=\"c13 c20\"><span class=\"c8\"> </span></p>",
"<p class=\"c13 c20\"><span class=\"c8\"> // Do something</span></p>",
"<p class=\"c13 c20\"><span class=\"c8\"> }, false);</span></p>",
"<ul class=\"c10 lst-kix_2galkdjrg0r4-0 start\"><li class=\"c16 li-bullet-0\"><span class=\"c30 c2\">LocalStorage and SessionStorage:</span></li></ul>",
"<ul class=\"c10 lst-kix_2galkdjrg0r4-1 start\"><li class=\"c18 li-bullet-0\"><span class=\"c11\">Both </span><span class=\"c2\">localStorage</span><span class=\"c11\"> and </span><span class=\"c2\">sessionStorage</span><span class=\"c8\"> are storage mechanisms that allow you to store data on the client side.</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">They can be used to share data between tabs from the same origin.</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">However, they don't provide a built-in way to listen for changes across tabs, so you might need to implement a mechanism to detect changes manually.</span></li></ul>",
"<p class=\"c13 c20\"><span class=\"c8\"> window.localStorage.setItem(\"loggedIn\", \"true\");</span></p>",
"<p class=\"c13 c20\"><span class=\"c8\"> window.addEventListener('storage', (event) => {</span></p>",
"<p class=\"c13 c20\"><span class=\"c8\"> if (event.storageArea != localStorage) return;</span></p>",
"<p class=\"c13 c20\"><span class=\"c8\"> if (event.key === 'loggedIn') {</span></p>",
"<p class=\"c13 c20\"><span class=\"c8\"> // Do something with event.newValue</span></p>",
"<p class=\"c13 c20\"><span class=\"c8\"> }</span></p>",
"<p class=\"c13 c28 c22\"><span class=\"c8\"> });</span></p>",
"<ul class=\"c10 lst-kix_pql4ggbcsome-0 start\"><li class=\"c16 li-bullet-0\"><span class=\"c30 c2\">Broadcast Channel API:</span></li></ul>",
"<ul class=\"c10 lst-kix_pql4ggbcsome-1 start\"><li class=\"c18 li-bullet-0\"><span class=\"c8\">The Broadcast Channel API allows you to create named channels through which you can send messages to other tabs/windows that share the same origin.</span></li><li class=\"c18 li-bullet-0\"><span class=\"c8\">Tabs/windows listening to the same channel will receive messages.</span></li></ul>",
"<p class=\"c13 c28\"><span class=\"c8\"> const channel = new BroadcastChannel('app-data');</span></p>",
"<p class=\"c13 c28\"><span class=\"c8\"> channel.postMessage(data);</span></p>",
"<p class=\"c13 c28\"><span class=\"c8\"> channel.addEventListener ('message', (event) => {</span></p>",
"<p class=\"c13 c28\"><span class=\"c8\"> console.log(event.data);</span></p>",
"<p class=\"c13 c28\"><span class=\"c8\"> });</span></p>"
],
"DOM": [
"<p class=\"c13\"><span class=\"c8\">The Document Object Model (DOM) is a hierarchical tree-like representation of the structure and content of a web page.</span></p>",
"<p class=\"c13\"><span class=\"c8\">It allows us to interact with and manipulate the HTML and XML content of a web page dynamically using JS.</span></p>"
],
"How a HTML Page Renders": [
"<ol class=\"c10 lst-kix_hyrm017en8xi-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c11\">Start to </span><span class=\"c2\">parse</span><span class=\"c11\"> the </span><span class=\"c2\">HTML</span><span class=\"c11\"> to build </span><span class=\"c30 c2\">DOM</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">Fetch the </span><span class=\"c30 c2\">external resources</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Parse</span><span class=\"c11\"> the </span><span class=\"c2\">CSS</span><span class=\"c11\"> and build the </span><span class=\"c30 c2\">CSSOM</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">Execute the </span><span class=\"c30 c2\">JavaScript</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">Merge </span><span class=\"c11\">DOM</span><span class=\"c11\"> and </span><span class=\"c11\">CSSOM</span><span class=\"c11\"> to construct the </span><span class=\"c30 c2\">Render Tree</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">Calculate the </span><span class=\"c30 c2\">layout and paint</span></li></ol>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c1\"><span class=\"c11\">When the browser encounters an </span><span class=\"c2\">external resource (like an image or video) </span><span class=\"c11\">while parsing HTML, it typically starts fetching that resource in </span><span class=\"c2\">parallel with continuing to parse</span><span class=\"c8\"> and render the HTML. This is k/n as asynchronous loading.</span></p>",
"<ol class=\"c10 lst-kix_lxagvslr12ej-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">JS: Block Parsing unless defer or async</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">CSS: Block Rendering</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">Other resources: No blocking</span></li></ol>",
"<p class=\"c1\"><span class=\"c8\">In a web page, when multiple synchronous scripts are encountered, they are typically executed in the order in which they appear in the HTML</span></p>",
"<p class=\"c13\"><span class=\"c11\">ref:</span><span class=\"c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://starkie.dev/blog/how-a-browser-renders-a-web-page&sa=D&source=editors&ust=1707022712845607&usg=AOvVaw0sJbeQvOo7XvAuiEWwZJlH\"> </a></span><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://starkie.dev/blog/how-a-browser-renders-a-web-page&sa=D&source=editors&ust=1707022712845691&usg=AOvVaw0XLBgJ2g4AetjvXjh5gN99\">https://starkie.dev/blog/how-a-browser-renders-a-web-page</a></span></p>"
],
"Async vs Defer": [
"<p class=\"c13\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 401.70px; height: 289.09px;\"><img alt=\"\" src=\"images/image5.png\" style=\"width: 401.70px; height: 289.09px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"></span></p>"
],
"Critical Rendering Path (CRP)": [
"<p class=\"c13\"><span class=\"c8\">The Critical Rendering Path is the sequence of steps the browser goes through, to convert the HTML, CSS, and JavaScript into pixels on the screen.</span></p>",
"<p class=\"c13\"><span class=\"c8\">Optimising the critical render path improves render performance.</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c8\">The document object model(DOM) is created as the HTML is parsed. The HTML may request JavaScript, which may, in turn, alter the DOM. The HTML includes or makes requests for styles, which in turn builds the CSS object model (CSSOM). The browser engine combines the two to create the Render Tree. Layout determines the size and location of everything on the page. Once layout is determined, pixels are painted to the screen.</span></p>"
],
"Optimising for CRP": [
"<p class=\"c13\"><span class=\"c8\">Improve page load speed by prioritising which resources get loaded, controlling the order in which they are loaded, and reducing the file sizes of those resources. Performance tips include:</span></p>",
"<ol class=\"c10 lst-kix_e4zhwuz0arki-0 start\" start=\"1\"><li class=\"c16 li-bullet-0\"><span class=\"c8\">minimising the number of critical resources by deferring non-critical ones' download, marking them as async, or eliminating them altogether</span></li><li class=\"c16 li-bullet-0\"><span class=\"c8\">optimising the file size of each request</span></li><li class=\"c16 li-bullet-0\"><span class=\"c8\">optimising the order in which critical resources are loaded by prioritising the downloading of critical assets, thereby shortening the critical path length.</span></li></ol>"
],
"Critical Section of a page": [
"<p class=\"c92\"><span class=\"c8\">The critical section of a web page refers to the part of the page that is immediately visible to the user upon the initial page load, without requiring additional scrolling or interaction.</span></p>",
"<p class=\"c92\"><span class=\"c8\">Way to optimise critical section</span></p>",
"<ol class=\"c10 lst-kix_fp17ge3od417-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">Displaying perception: loader, error, etc</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Optimise CRP</span></li></ol>",
"<ol class=\"c10 lst-kix_fp17ge3od417-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Identify & Prioritise critical resources</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Minimise number of critical resources</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Decrease/optimise size of resources</span></li></ol>",
"<ol class=\"c10 lst-kix_fp17ge3od417-0\" start=\"3\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">Optimise/compress resources</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Decrease network calls</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Load non critical/important resources later</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">SSR</span></li></ol>"
],
"Code Obfuscation": [
"<p class=\"c1\"><span class=\"c8\">Code obfuscation is a technique used to make source code more difficult to understand or reverse engineer. It involves transforming the code in a way that it remains functional but becomes harder for humans to read and comprehend. This is often done to protect intellectual property, prevent unauthorised modifications, or enhance security.</span></p>",
"<p class=\"c1\"><span class=\"c11\">Some common obfuscation techniques: variable & function renaming, string encryption, code jumbling, dummy code insertion (inserting meaningless or redundant code), code splitting, minification, etc.</span></p>"
],
"Tree Shaking": [
"<p class=\"c13\"><span class=\"c11\">ref:</span><span class=\"c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://benestudio.co/building-a-tree-shaking-friendly-javascript-package/&sa=D&source=editors&ust=1707022712847198&usg=AOvVaw3lKkZ_kLiRajHD6vv-kWtM\"> </a></span><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://benestudio.co/building-a-tree-shaking-friendly-javascript-package/&sa=D&source=editors&ust=1707022712847283&usg=AOvVaw0FA-QBWXWjQ2aOsD_QHJ8M\">https://benestudio.co/building-a-tree-shaking-friendly-javascript-package/</a></span></p>",
"<p class=\"c13\"><span class=\"c3\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking&sa=D&source=editors&ust=1707022712847394&usg=AOvVaw3DaMCpXBZWo98vJi4mq0Dp\">Tree shaking</a></span><span class=\"c11\"> is a dead-code (unused code) elimination process. It relies on the static structure of </span><span class=\"c50 c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/&sa=D&source=editors&ust=1707022712847488&usg=AOvVaw2LNLSLGI7tQJD-7CAg8bOh\">ES modules</a></span><span class=\"c11\"> (import and export). So CommonJS modules (require) can’t be shaken off directly because of their dynamic nature. So the bundlers we are using, like </span><span class=\"c11 c50\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://webpack.js.org/guides/tree-shaking/&sa=D&source=editors&ust=1707022712847571&usg=AOvVaw0d4ukvHvBLpKh5efm5merR\">Webpack</a></span><span class=\"c11\"> and </span><span class=\"c50 c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://rollupjs.org/guide/en/%23tree-shaking&sa=D&source=editors&ust=1707022712847641&usg=AOvVaw2wbXyWcVhh2WTXVk-w1ObZ\">Rollup</a></span><span class=\"c8\">, automatically tree shake our code for us.</span></p>",
"<p class=\"c13\"><span class=\"c11\">To achieve this, we need to mark your library as </span><span class=\"c50 c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://webpack.js.org/guides/tree-shaking/%23mark-the-file-as-side-effect-free&sa=D&source=editors&ust=1707022712847764&usg=AOvVaw3S-pB6k98Uu3mO251M5LIG\">side-effect-free</a></span><span class=\"c8\"> in our library’s “package.json”. Add:</span></p>",
"<p class=\"c13\"><span class=\"c11 c37\">\"</span><span class=\"c53 c2 c37\">sideEffects\": false</span></p>",
"<p class=\"c13 c4\"><span class=\"c53 c11 c37 c81\"></span></p>",
"<p class=\"c1\"><span class=\"c8\">To build a tree shaking friendly package we need to</span></p>",
"<ul class=\"c10 lst-kix_uao9o37k91jq-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">Use ES modules. Make sure the final output of your package is using ES modules, not CommonJS or AMD.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">Config side effects properly in package.json file to help bundlers. i.e. \"sideEffects\": false</span></li></ul>"
],
"window.onload vs DOMContentLoad": [
"<ol class=\"c10 lst-kix_ne3l79fz7p2q-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c58 c77\">window.onload</span></li></ol>",
"<ol class=\"c10 lst-kix_ne3l79fz7p2q-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c30 c31\">It get triggered when the complete web page is loaded</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">It is used when we need to execute JS code that relies on the complete availability of the web page</span></li></ol>",
"<ol class=\"c10 lst-kix_ne3l79fz7p2q-0\" start=\"2\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">DOMContentLoad</span></li></ol>",
"<ol class=\"c10 lst-kix_ne3l79fz7p2q-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">It gets triggered when the browser is done parsing and loading the html document into DOM.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">It is often used when we want to execute JavaScript code as soon as the DOM hierarchy is ready</span></li></ol>"
],
"Hydration": [
"<p class=\"c13\"><span class=\"c8\">Hydration in JavaScript, is the process of attaching event handlers to the DOM elements.</span></p>",
"<p class=\"c13\"><span class=\"c2\">Hydration</span><span class=\"c11\"> or </span><span class=\"c2\">Rehydration</span><span class=\"c11\"> is a technique in which client-side</span><span class=\"c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://en.wikipedia.org/wiki/JavaScript&sa=D&source=editors&ust=1707022712848644&usg=AOvVaw3udA4QjbhPgfgQ3SIkg6gZ\"> JavaScript</a></span><span class=\"c11\"> converts a static</span><span class=\"c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://en.wikipedia.org/wiki/HTML&sa=D&source=editors&ust=1707022712848714&usg=AOvVaw0cadlq7ug8jpCLJvfS5NoF\"> HTML</a></span><span class=\"c11\"> web page (delivered either through static hosting or</span><span class=\"c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://en.wikipedia.org/wiki/Server-side_rendering&sa=D&source=editors&ust=1707022712848807&usg=AOvVaw0msggK3jZ1OQqq4hMkPRgW\"> server-side rendering</a></span><span class=\"c11\">), into a</span><span class=\"c11\"><a class=\"c5\" href=\"https://www.google.com/url?q=https://en.wikipedia.org/wiki/Dynamic_web_page&sa=D&source=editors&ust=1707022712848877&usg=AOvVaw2q4cVngNmyOzGCJUME4My1\"> dynamic web page</a></span><span class=\"c8\"> by attaching event handlers to the HTML elements, sets up interactivity and make the page fully functional. </span></p>",
"<p class=\"c13\"><span class=\"c8\">This helps improve the initial loading performance and user experience of web applications.</span></p>"
],
"Selective Hydration": [
"<p class=\"c1\"><span class=\"c8\">Selective/Partial hydration, is a concept in web development that refers to the practice of dynamically loading and rendering specific parts of a web page based on user interaction or other conditions.</span></p>",
"<p class=\"c1\"><span class=\"c8\">The goal of selective hydration is to optimise the initial page load by sending only the essential HTML, CSS, and JavaScript needed to render the initial view. Then, as the user interacts with the page, additional content and functionality are loaded and rendered dynamically.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Selective hydration can be achieved using techniques like:</span></p>",
"<ol class=\"c10 lst-kix_bb4fw6xhv0zc-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">Conditional Rendering</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Client-side Routing</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Lazy loading component</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Using Suspense in react</span></li><li class=\"c0 li-bullet-0\"><span class=\"c11\">Data-fetching on demand</span></li></ol>"
],
"Progressive Rendering": [
"<p class=\"c1\"><span class=\"c8\">Progressive rendering is a technique used in web dev to improve the perceived performance and user experience by displaying content to users ASAP, even if the entire page or all assets haven't fully loaded. Instead of waiting for the entire webpage to load before rendering anything, progressive rendering prioritises and displays the content incrementally.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Here are some common strategies associated with progressive rendering:</span></p>",
"<ul class=\"c10 lst-kix_te59tcmdwqso-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Prioritising Critical Rendering Path: </span><span class=\"c8\">Identify and prioritise the most important content, such as text and images above the fold, to be loaded and displayed first. This ensures that users see meaningful content quickly.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Lazy Loading: </span><span class=\"c8\">Defer the loading of non-critical resources (such as images below the fold or scripts) until they are needed. Lazy loading helps to prioritise the loading of essential content first.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Streaming Content: </span><span class=\"c8\">Send the content in chunks or streams rather than waiting for the entire page to be fully processed. This allows the browser to start rendering and displaying content as soon as it's received.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Asynchronous Loading: </span><span class=\"c8\">Load resources asynchronously to prevent one slow-loading resource from blocking the rendering of other page elements. For example, scripts can be loaded asynchronously so that they don't block the rendering of the rest of the page.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Placeholder Elements: </span><span class=\"c8\">Use placeholder elements or low-resolution images initially and replace them with higher-resolution or fully loaded content as it becomes available. This gives users a sense of progress and prevents a blank or incomplete page from being displayed.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Optimised Delivery: </span><span class=\"c11\">Optimise the delivery of assets, such as compressing images and minifying CSS and JavaScript, to reduce download times.</span></li></ul>"
],
"Web Vitals": [
"<p class=\"c1\"><span class=\"c8\">Web Vitals are a set of metrics used to measure and improve performance, speed and interactivity of a web page.</span></p>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">First Contentful Paint (FCP):</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">First Contentful Paint (FCP) measures the time taken to render the first piece of content of a web page</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">It indicates how quickly users perceive that the page is loading and becoming usable.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">To Reduce FCP:</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-2 start\" start=\"1\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">We need to decrease resources size (images, css, js, etc) or minimise render blocking resources (lazy loading for images, async loading for non-critical script)</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">Prioritise Critical Resources: Use the <link rel=\"preload\"> and <link rel=\"prefetch\"> tags to instruct the browser to fetch critical resources early and similarly for critical JS.</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">Minimise Network Requests & Server Response Time: fast CDN & caching can be used</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-1\" start=\"4\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">A good FCP score is typically under 1 second.</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-0\" start=\"2\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">Largest Contentful Paint (LCP): </span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Largest Contentful Paint, measures the time taken to render the largest visible element (such as an image or text block) of a web page.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">LCP is an important metric for understanding when the main content of a page becomes visible to users.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">A good LCP score is typically under 2.5 seconds.</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-0\" start=\"3\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">Total Blocking Time (TBT):</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Total Blocking Time (TBT) measures the amount of time during which the main thread of a web page is blocked and unable to respond to user input. </span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">TBT is concerned with how quickly a page can start responding to user input (first interaction)</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">To reduce TBT, we can optimise JS execution and minimise the impact of long tasks using web-worker</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">A good TBT score is typically under 300 milliseconds.</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-0\" start=\"4\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">Time to Interactive (TTI):</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Time to Interactive (TTI) measures the time it takes for a web page to become fully interactive for users.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">TTI is concerned with when the page becomes fully interactive.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">To improve TTI, we need to optimise critical resources (load critical js, responsible for interactivity, first).</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">A good TTI score is typically under 5 seconds.</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-0\" start=\"5\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">Cumulative Layout Shift (CLS):</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c11\">CLS</span><span class=\"c8\">, measures the visual stability of a page by tracking unexpected layout shifts in the loading process.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">CLS helps ensure that page content doesn't unexpectedly shift while users are interacting with it.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">To reduce CLS:</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-2 start\" start=\"1\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">Give width, height attribute to image/video elements</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">Ensure new content/element does not shift any existing content/element</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">Allocate space for content which will be loaded asynchronous</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-1\" start=\"4\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">A good CLS score is typically under 0.1.</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-0\" start=\"6\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">Speed Index (SI):</span></li></ol>",
"<ol class=\"c10 lst-kix_9p9rgms4tx95-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Time taken to load entire web-page</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c11\">It</span><span class=\"c8\"> measures how quickly the content of a web page is visually displayed during the entire loading process.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">It takes into account the progression of content loading over time and provides a score based on the visual completeness of the page at different points during loading.</span></li></ol>"
],
"Waterfall": [
"<p class=\"c1\"><span class=\"c8\">Waterfall refers to a graphical representation of the various resources (like HTML, CSS, JavaScript, images, etc.) that a web page loads, and the order in which they are loaded. It's a tool used for visualising the loading process of a web page.</span></p>",
"<p class=\"c1\"><span class=\"c8\">The waterfall chart displays a timeline on the x-axis and the different resources on the y-axis. Each resource is represented as a horizontal bar, with the position on the y-axis indicating when it starts to load and the length of the bar representing how long it takes to load. The resources are loaded in the order they are requested by the browser.</span></p>"
],
"Does font affect rendering and layout phases? If yes, how to minimise the effect?": [
"<ol class=\"c10 lst-kix_aoizbortasa8-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Rendering Phase:</span><span class=\"c8\"> The time it takes to download a font can impact the rendering phase. If a font is large or takes a long time to download, it may delay the rendering of the associated text content.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Layout Phase: </span><span class=\"c8\">The browser needs to measure the size of text elements for layout calculations. The size of the text is influenced by the font metrics, including the font size, line height, and character spacing.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">For minimising its impact</span></li></ol>",
"<ol class=\"c10 lst-kix_aoizbortasa8-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Use optimised/compressed font file type like WOFF2</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Lazy loading fonts: For non-critical fonts, load them asynchronously after the critical section is loaded</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Use fallback fonts</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c8\">Preloading: Preload fonts using the <link rel=\"preload\"> tag to initiate the font download earlier in the page loading process.</span></li></ol>"
],
"How to achieve max frame rate (60fps) with JS animations": [
"<ol class=\"c10 lst-kix_1gu90e6m2kfl-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Use RequestAnimationFrame:</span><span class=\"c8\"> Use the requestAnimationFrame function for scheduling your animation loop. It is optimised for animations and synchronises with the browser's repaint cycle.<br>function animate() {<br> // Update animation logic here <br> requestAnimationFrame(animate); <br>}<br>animate(); // Start the animation loop</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Minimise Paint Area:</span><span class=\"c8\">Only update the parts of the DOM that are necessary for the animation.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Use GPU Acceleration: </span><span class=\"c8\">Transformations like translations, rotations, and scaling are hardware-accelerated on the GPU. Utilise CSS properties like transform and opacity for animations.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Avoid Layout Thrashing: </span><span class=\"c8\">Minimise operations that trigger layout recalculations (e.g., changing element dimensions). Batch such operations together to reduce unnecessary reflows.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Optimise DOM Manipulations: </span><span class=\"c8\">Minimise DOM updates by using document fragments or manipulating elements offline before adding them to the live DOM.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Use Web Workers: </span><span class=\"c8\">Web Workers allow you to perform computations in a separate thread, reducing the load on the main thread and improving animation performance.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Optimise Image and Video Assets: </span><span class=\"c8\">Compress images and videos to reduce file size. Consider using modern image formats like WebP, and serve appropriately sized assets based on device resolution.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Limit the Number of Active Elements:</span><span class=\"c8\"> Reduce the number of animated elements on the screen at any given time to minimise the amount of work the browser needs to do.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Profile and Optimise Code: </span><span class=\"c8\">Use browser developer tools to profile your code and identify performance bottlenecks. Optimise critical sections for better performance.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Use Object Pooling:</span><span class=\"c8\"> Reuse objects instead of creating new ones in each animation frame to reduce garbage collection overhead.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2\">Avoid Memory Leaks: </span><span class=\"c11\">Ensure that event listeners and other resources are properly cleaned up to prevent memory leaks, which can degrade performance over time.</span></li></ol>"
],
"Server-Side Rendering": [
"<p class=\"c13\"><span class=\"c8\">In (SSR), a web page is rendered on the server (where the wep app is deployed) and then sends the fully rendered HTML page to the client (browser). </span></p>",
"<p class=\"c13\"><span class=\"c8\">Advantages of Server-Side Rendering:</span></p>",
"<ul class=\"c10 lst-kix_s9gs4cayh6nx-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">SEO Benefits: </span><span class=\"c8\">Search engines have an easier time crawling and indexing content in HTML files. With SSR, search engines can quickly access the fully-rendered content, which can improve search engine rankings.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Improved Initial Page Load Time</span><span class=\"c8\">: Since the server sends a fully-rendered page to the client, the user can see the content sooner. This can lead to better perceived performance, especially on slower networks.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Better Social Sharing</span><span class=\"c8\">: When you share a link on social media platforms, the platform often fetches a preview of the page. With SSR, the platform can easily access the fully-rendered HTML, ensuring accurate previews.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Accessibility and Performance on Low-Powered Devices</span><span class=\"c8\">: Devices with limited processing power, like older smartphones or IoT devices, may struggle with heavy client-side rendering. SSR can provide a better user experience on such devices.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Avoidance of Flash of Unstyled Content (FOUC)</span><span class=\"c8\">: With client-side rendering, there's a brief moment where the page might appear unstyled until the JavaScript loads and applies the styles. SSR helps avoid this FOUC.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Easier Caching and CDN Integration</span><span class=\"c8\">: Fully-rendered HTML can be easily cached, which improves performance and reduces the load on servers. CDNs can also cache the HTML content.</span></li></ul>"
],
"Client-Side Rendering": [
"<p class=\"c13\"><span class=\"c8\">In CSR, the server sends a basic HTML file along with a JavaScript bundle. The JavaScript code is responsible for generating the content and rendering it in the browser (client).</span></p>",
"<p class=\"c1\"><span class=\"c8\">Advantages of Client-Side Rendering:</span></p>",
"<ul class=\"c10 lst-kix_7a5k4k13sa4l-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Fast Initial Load: </span><span class=\"c8\">CSR can provide a fast initial load time, especially for smaller applications. Only essential HTML, CSS, and JavaScript are sent from the server.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Smooth User Experience</span><span class=\"c8\">: Once the initial load is complete, interactions are fast and smooth. Changes in the UI can happen instantly without requiring full page reloads because of SPA.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Rich Interactivity</span><span class=\"c8\">: CSR allows for highly interactive web applications with dynamic content updates based on user actions.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Better for Web Applications</span><span class=\"c8\">: CSR is well-suited for web applications where a lot of the content and interactivity is generated dynamically based on user input or API calls.</span></li></ul>",
"<p class=\"c13\"><span class=\"c8\">In practice, many applications use a combination of both Server-Side Rendering and Client-Side Rendering (CSR) for the best of both worlds. This is sometimes referred to as \"Hybrid Rendering\" or \"Universal Rendering\". </span></p>",
"<p class=\"c13\"><span class=\"c8\">SSR is often used for the initial page load, while client-side rendering takes over for subsequent interactions, providing a more interactive experience.</span></p>"
],
"How will you select between SSR and CSR for your application? What parameters will you consider?": [
"<p class=\"c1\"><span class=\"c8\">If I am working on a marketing page, or static web pages like a blog type of website where we need good SEO, social sharing, fast initial page load, and support on old devices, I will use SSR.<br>If I am working on any web app which is very dynamic and interactive, then I will consider CSR.</span></p>"
],
"Why is CSR good for high dynamic and interactive web apps?": [
"<ol class=\"c10 lst-kix_eu5zhw6huhrv-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">SPA (Single Page Applications):</span><span class=\"c8\"> CSR can be used to build SPAs, where everything runs on a single page (index.html). This eliminates the need for complete page reloads, providing a smooth and fluid user experience.</span></li></ol>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>"
]
},
"Next.js": {
"getStaticPaths": [
"<p class=\"c1\"><span class=\"c11\">getStaticPaths is a method in Next.js that allows you to specify which paths should be pre-rendered at build time when using </span><span class=\"c2\">Static Site Generation (SSG).</span></p>"
],
"getStaticProps, getServerSideProps, getInitialProps": [
"<ol class=\"c10 lst-kix_xmwzhzkkqpce-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">getStaticProps</span><span class=\"c8\">:</span></li></ol>",
"<ol class=\"c10 lst-kix_xmwzhzkkqpce-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Usage</span><span class=\"c8\">: Used in a page component to fetch data at build time.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Execution</span><span class=\"c8\">: Runs at build time, not in the client-side JavaScript bundle.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2 c37\">revalidate</span><span class=\"c2\"> in getStaticProps</span><span class=\"c8\">: revalidate in getStaticProps, specifies how often Next.js should re-generate the static page.</span></li></ol>",
"<ol class=\"c10 lst-kix_xmwzhzkkqpce-0\" start=\"2\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">getServerSideProps</span><span class=\"c8\">:</span></li></ol>",
"<ol class=\"c10 lst-kix_xmwzhzkkqpce-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Usage</span><span class=\"c8\">: Used in a page component to fetch data on each request, on the server-side.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Execution</span><span class=\"c11\">: Runs on the server every time a request is made to the page.<br>export async function getServerSideProps / geStaticProps() { <br> const response = await fetch('https://api.example.com/data'); // Fetch data from an API or database <br> const data = await response.json(); <br> return { <br> props: { data, }<br> };<br>}<br>The </span><span class=\"c11 c37\">getStaticProps & getServerSideProps </span><span class=\"c11\">function must return an object with a </span><span class=\"c2 c37\">props</span><span class=\"c8\"> key. The value of props will be passed as props to the page component.</span></li></ol>",
"<ol class=\"c10 lst-kix_xmwzhzkkqpce-0\" start=\"3\"><li class=\"c0 li-bullet-0\"><span class=\"c30 c2\">getInitialProps:</span></li></ol>",
"<ol class=\"c10 lst-kix_xmwzhzkkqpce-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Usage</span><span class=\"c8\">: Used in both page components and regular React components.</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Execution</span><span class=\"c8\">:</span></li></ol>",
"<ol class=\"c10 lst-kix_xmwzhzkkqpce-2 start\" start=\"1\"><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">In page components, it can run on both the server and the client. On the server, it runs during the initial request. On the client, it runs when navigating to the page using the client-side router.</span></li><li class=\"c1 c14 li-bullet-0\"><span class=\"c8\">In regular React components, it only runs on the client.</span></li></ol>",
"<ol class=\"c10 lst-kix_xmwzhzkkqpce-1\" start=\"3\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c2\">Return Value</span><span class=\"c8\">: Should return an object with the data that will be merged into the component's props.<br>MyComponent.getInitialProps = async () => { <br> const response = await fetch('https://api.example.com/data'); // Fetch data from an API<br> const data = await response.json(); <br> return { data }; <br>};</span></li></ol>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>"
]
},
"React.js": {
"React": [
"<p class=\"c13\"><span class=\"c8\">React.js is an open-source JavaScript library used for building user interfaces or UI components for web applications. React is particularly popular for creating interactive and dynamic user interfaces because it allows developers to efficiently update and render components as data changes. React is often described as a declarative library for building user interfaces. In a declarative approach, you specify what you want to achieve, and the library (React in this case) takes care of updating the DOM to match the desired state. </span></p>",
"<p class=\"c1\"><span class=\"c8\">Key features and concepts of React include:</span></p>",
"<ol class=\"c10 lst-kix_8ljp0n2yek0a-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Component-Based Architecture:</span><span class=\"c8\"> React applications are built using components, which are self-contained, reusable modules that encapsulate a specific piece of UI</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Reusable Components</span><span class=\"c8\">: Components in React are designed to be reusable, which promotes code modularity and maintainability.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Component Lifecycle</span><span class=\"c8\">: React components go through various lifecycle stages (mounting, updating, un-mounting), and one can hook into these stages to perform actions at specific points in a component's life.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Virtual DOM</span><span class=\"c8\">: React maintains a lightweight representation of the DOM, known as the virtual DOM. When data changes, React compares the new virtual DOM with the previous one to identify the minimal set of updates needed to reflect the changes in the actual DOM. This makes React very efficient in managing UI updates.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">JSX (JavaScript XML)</span><span class=\"c8\">: React uses JSX, a syntax extension for JavaScript, which allows developers to write HTML-like code directly within their JavaScript files. JSX makes it easier to visualise and build component hierarchies.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Unidirectional Data Flow</span><span class=\"c8\">: React follows a unidirectional data flow, which means that data in an application flows in a single direction. This makes it easier to track changes and debug code.</span></li></ol>"
],
"Challenges with React": [
"<ol class=\"c10 lst-kix_yuh024tl5ham-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">SEO</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Props drilling: passing props to deep down the component</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">State Management</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Unnecessary Re-renders: can be prevented using React.memo</span></li></ol>"
],
"Virtual DOM": [
"<p class=\"c13\"><span class=\"c8\">The Virtual DOM is a lightweight copy of the actual DOM. It's a JavaScript object that mirrors the structure of the actual DOM. It is a key concept in React that helps to efficiently update the actual DOM, making React highly performant.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Here's a breakdown of how it works:</span></p>",
"<ul class=\"c10 lst-kix_6bq63iqj1o6p-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Actual DOM:</span><span class=\"c8\"> The DOM (Document Object Model) represents the structure of a web page. It's a tree-like structure where each element (e.g., div, p, span) is a node.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Virtual DOM</span><span class=\"c11\">: </span><span class=\"c8\">The Virtual DOM is a lightweight copy of the actual DOM. It's a JavaScript object that mirrors the structure of the actual DOM.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Reconciliation</span><span class=\"c8\">: When a component's state/props, context or parent component changes in React, a new virtual DOM tree is created to represent the updated state.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Diffing</span><span class=\"c8\">: React performs a process called \"diffing\" to compare the new virtual DOM tree with the previous one. It identifies the differences (or \"diffs\") between the two trees.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Minimal Updates</span><span class=\"c8\">: It identifies the minimal set of DOM operations (insertions, deletions, or updates) to update the actual DOM based on the diffs. It aims to minimise the number of actual DOM operations needed.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Batched Updates</span><span class=\"c8\">: React doesn't immediately update the actual DOM after each change. Instead, it batches these changes together.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Updating the Actual DOM</span><span class=\"c8\">: Finally, React applies the identified updates to the actual DOM. This is the step where the changes are reflected in the browser.</span></li></ul>"
],
"Advantages of the Virtual DOM": [
"<ul class=\"c10 lst-kix_yrpdsfljiveq-0 start\"><li class=\"c16 li-bullet-0\"><span class=\"c2\">Efficiency</span><span class=\"c8\">: By comparing virtual DOM trees rather than making direct changes to the real DOM, React can make intelligent decisions about how to update the UI with minimal performance impact.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Optimization</span><span class=\"c8\">: React optimises the update process to ensure that only the necessary parts of the DOM are modified, resulting in faster rendering times.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Cross-platform Consistency</span><span class=\"c8\">: The Virtual DOM allows React to work consistently across different platforms and browsers, abstracting away any inconsistencies or quirks in how different browsers handle the DOM.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Smoother User Experience</span><span class=\"c8\">: The efficient updating process of the Virtual DOM leads to a smoother and more responsive user experience, especially in complex applications with frequent updates.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Facilitates Reconciliation</span><span class=\"c8\">: The Virtual DOM enables React to efficiently reconcile changes in the component's state or props, ensuring that the UI accurately reflects the application's data.</span></li></ul>"
],
"Key in React": [
"<p class=\"c1\"><span class=\"c8\">In React, the key prop is a special attribute that is included when creating a list of elements. It helps React identify which items have changed, been added, or been removed.</span></p>",
"<p class=\"c1\"><span class=\"c2\">Uniqueness</span><span class=\"c8\">: The key prop should be unique among siblings of the same parent. It helps React differentiate between components and efficiently update the virtual DOM.</span></p>",
"<p class=\"c1\"><span class=\"c2\">Stability</span><span class=\"c8\">: The key should be stable across re-renders. Avoid using indexes as keys if the list can change, as it can lead to unexpected behaviour.</span></p>",
"<p class=\"c1\"><span class=\"c2\">Performance</span><span class=\"c8\">: Providing a key helps React optimise the rendering process. Without keys, React might need to recreate the entire list when there are changes, which can be less efficient.</span></p>"
],
"JSX (JavaScript XML)": [
"<p class=\"c13\"><span class=\"c8\">JSX is a syntax extension for JavaScript often used with React. It allows us to write HTML-like code directly within JavaScript files. JSX provides a more readable and concise way to describe the structure of user interfaces.</span></p>"
],
"React Component": [
"<p class=\"c13\"><span class=\"c8\">A React component is a self-contained, reusable module that encapsulates a specific piece of UI. Components in React are designed to be reusable, which promotes code modularity and maintainability.</span></p>",
"<p class=\"c13\"><span class=\"c8\">In React, components can be thought of as JavaScript functions or classes that return elements, specifying what should be rendered on the screen. They can also maintain their own internal state and receive data through \"props\".</span></p>",
"<p class=\"c13\"><span class=\"c8\">There are two main ways to define a React component: 1. Functional Components, 2. Class Components</span></p>"
],
"Component State and Props": [
"<h2 class=\"c60\" id=\"h.9eo62pnxkp96\"><span class=\"c30 c76\">Props (Properties):</span></h2>",
"<p class=\"c13\"><span class=\"c8\">Props are inputs to a React component. They are passed down from a parent component to a child component. Props are read-only and cannot be modified within the component itself. They allow us to customise the behaviour or appearance of a component.</span></p>",
"<h2 class=\"c60\" id=\"h.1ff8wbbulsok\"><span class=\"c30 c76\">State:</span></h2>",
"<p class=\"c13\"><span class=\"c11\">State is a way for a component to keep track of information that may change over time. It represents the current state of the component and determines how it should render. Unlike props, state is managed within the component itself and can be updated using the </span><span class=\"c2\">setState</span><span class=\"c8\"> method.</span></p>"
],
"React.CreateElement": [
"<p class=\"c1\"><span class=\"c8\">React.createElement is a method provided by the React library for creating React elements, which are the building blocks of React applications.</span></p>",
"<p class=\"c1\"><span class=\"c53 c11 c37 c81\">const element = React.createElement(elementType, props, children);</span></p>",
"<p class=\"c1\"><span class=\"c8\">e.g.</span></p>",
"<p class=\"c1\"><span class=\"c8\">const element = React.createElement('div', { className: 'my-class' }, 'Hello, World!');</span></p>",
"<p class=\"c1\"><span class=\"c8\">i.e.</span></p>",
"<p class=\"c1\"><span class=\"c8\">const element = <div className=\"my-class\">Hello, World!</div>;</span></p>"
],
"Functional vs Class components": [
"<a id=\"t.e3242eceff840811bf504759c7e14c3a89de3c62\"></a>",
"<a id=\"t.3\"></a>",
"<table class=\"c45\"><tbody><tr class=\"c44\"><td class=\"c54\" colspan=\"1\" rowspan=\"1\"><p class=\"c52\"><span class=\"c30 c2\">Functional</span></p></td><td class=\"c38\" colspan=\"1\" rowspan=\"1\"><p class=\"c52\"><span class=\"c30 c2\">Class</span></p></td></tr><tr class=\"c88\"><td class=\"c54\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Functional components are just JavaScript functions that take props as an argument and return React elements.</span></p></td><td class=\"c38\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c11\">Class components are ES6 classes that extend </span><span class=\"c2\">React.Component</span><span class=\"c8\">.</span></p></td></tr><tr class=\"c41\"><td class=\"c54\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c11\">With Hooks, functional components can use </span><span class=\"c2\">useState</span><span class=\"c8\"> and other hooks to manage state.</span></p></td><td class=\"c38\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c11\">Class components can manage their own local state using </span><span class=\"c2\">this.state</span><span class=\"c11\"> and </span><span class=\"c2\">this.setState()</span><span class=\"c8\">.</span></p></td></tr><tr class=\"c91\"><td class=\"c54\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c2\">useEffect </span><span class=\"c8\">for life cycle methods</span></p></td><td class=\"c38\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c11\">Class components have access to lifecycle methods like </span><span class=\"c2\">componentDidMount</span><span class=\"c11\">, </span><span class=\"c2\">componentDidUpdate</span><span class=\"c11\">, and </span><span class=\"c30 c2\">componentWillUnmount</span></p></td></tr><tr class=\"c64\"><td class=\"c54\" colspan=\"1\" rowspan=\"1\"><p class=\"c13\"><span class=\"c8\">Functional components are typically faster and more lightweight than class components. This is because they don't have the overhead associated with class instantiation and lifecycle methods.</span></p></td><td class=\"c38\" colspan=\"1\" rowspan=\"1\"><p class=\"c13 c4\"><span class=\"c30 c31\"></span></p></td></tr></tbody></table>"
],
"React Life Cycle Methods": [
"<p class=\"c13\"><span class=\"c8\">React lifecycle methods are special functions that get called at different stages in a component's life. They allow us to hook into these different points to perform actions, such as setting up a component, updating it, or cleaning it up. As of React 16.3, some lifecycle methods have been deprecated in favour of safer alternatives called \"lifecycle hooks\" which are used with functional components and React Hooks.</span></p>",
"<p class=\"c13\"><span class=\"c2\">Class Component</span><span class=\"c8\">: componentDidMount, componentDidUpdate, and componentWillUnmount</span></p>",
"<p class=\"c13\"><span class=\"c2\">Functional Component</span><span class=\"c8\">: useState, useEffect, useRef, useContext, useReducer</span></p>"
],
"React Hooks": [
"<p class=\"c13\"><span class=\"c8\">React Hooks are functions that allow us to use state and other React features in functional components. They were </span></p>",
"<p class=\"c13\"><span class=\"c8\">e.g. useState, useEffect, useRef, useContext, useReducer</span></p>"
],
"Custom Hooks": [
"<p class=\"c13\"><span class=\"c8\">A custom hook in React is a JavaScript function that uses one or more built-in hooks. It helps us to encapsulate, separate complex logic and reuse stateful logic across multiple components.</span></p>",
"<p class=\"c13\"><span class=\"c8\">Custom hooks must always start with the word \"use”, it helps React to recognise them as hooks.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Features of custom hooks:</span></p>",
"<ol class=\"c10 lst-kix_9jgx3e2yvtni-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Reusing Logic:</span><span class=\"c8\"> Custom hooks allows us to extract and reuse stateful logic that may be used in multiple components. This can include state management, side effects, subscriptions, and more.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Separation of Concerns:</span><span class=\"c8\"> Custom hooks promote separation of concerns. They allow us to keep our components focused on rendering and user interactions, while moving complex logic into hooks.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Composable: </span><span class=\"c8\">Custom hooks can be composed together. Multiple custom hooks can be used in a single component, allowing us to reuse different pieces of logic independently.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Manage State and Side Effects:</span><span class=\"c11\"> Custom hooks can use built-in hooks like </span><span class=\"c2\">useState</span><span class=\"c11\">, </span><span class=\"c2\">useEffect</span><span class=\"c11\">, </span><span class=\"c11\">etc</span><span class=\"c8\">. This enables us to manage component state and perform side effects within the custom hook.</span></li></ol>"
],
"Stateful Logic": [
"<p class=\"c13\"><span class=\"c8\">Any program's logic that depends on or interacts with the current state of the component. It involves managing and updating the state of the component based on user interactions, data changes, or other events.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Examples of stateful logic in a React application might include:</span></p>",
"<ul class=\"c10 lst-kix_26gfxcq4kxkp-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c8\">Managing form input values and validation.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Controlling the visibility or behaviour of UI elements based on user actions.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Handling data fetching and updates from an API.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c8\">Implementing conditional rendering based on the current state.</span></li></ul>"
],
"Side Effect": [
"<p class=\"c13\"><span class=\"c8\">In React, a side effect refers to any code that affects something outside the scope of the current component. Side effects are often asynchronous operations that don't happen immediately.</span></p>",
"<p class=\"c1\"><span class=\"c8\">Common examples of side effects in React components include:</span></p>",
"<ul class=\"c10 lst-kix_1nvlc6gaax4n-0 start\"><li class=\"c0 li-bullet-0\"><span class=\"c2\">Data Fetching:</span><span class=\"c8\"> Making API requests to get data for a component.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Event Listeners & Subscriptions</span><span class=\"c8\">: Setting up and tearing down event listeners or subscriptions.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Manual DOM Manipulation</span><span class=\"c11\">: Directly interacting with the DOM using methods like </span><span class=\"c2\">getElementById</span><span class=\"c11\">, etc.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Timers</span><span class=\"c8\">: Setting and clearing intervals or timeouts.</span></li><li class=\"c16 li-bullet-0\"><span class=\"c2\">Updating State Based on Props</span><span class=\"c11\">: Using </span><span class=\"c2\">useEffect</span><span class=\"c8\"> to update component state based on changes in props.</span></li></ul>",
"<p class=\"c13\"><span class=\"c11\">The primary way to manage side effects in functional components is through the </span><span class=\"c2\">useEffect</span><span class=\"c8\"> hook.</span></p>",
"<p class=\"c13\"><span class=\"c8\">useEffect(() => {</span></p>",
"<p class=\"c13\"><span class=\"c8\"> // Side effect code here</span></p>",
"<p class=\"c13\"><span class=\"c8\"> return () => {</span></p>",
"<p class=\"c13\"><span class=\"c8\"> // Cleanup code (optional)</span></p>",
"<p class=\"c13\"><span class=\"c8\"> };</span></p>",
"<p class=\"c13\"><span class=\"c8\">}, [/* dependencies */]);</span></p>"
],
"Synthetic Events": [
"<p class=\"c13\"><span class=\"c8\">Synthetic events are a cross-browser wrapper around the native browser events. They provide a consistent interface for handling events across different browsers.</span></p>",
"<p class=\"c13\"><span class=\"c2\">Event Pooling:</span><span class=\"c11\"> React reuses synthetic event objects. This means that the event object is nullified after the event callback has been called. If you need to access event properties asynchronously, you should call </span><span class=\"c2\">event.persist()</span><span class=\"c8\">.<br><br> function handleClick(event) {<br> event.persist(); // This allows you to access event properties later<br><br> setTimeout(() => {<br> console.log(event.type); // This will work now // without event.persist(), event will be null here<br> }, 100);<br> }</span></p>"
],
"Error Handling in React Application": [
"<ol class=\"c10 lst-kix_jb5t5f10zh8a-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c2 c34\">Try Catch Statement: </span><span class=\"c7\">We can use try catch at places/code logic (react side-effects) where we think that something might fail, and display meaningful messages to users when code goes to catch.</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2 c34\">then/catch for promises: </span><span class=\"c7\">We can also display meaningful messages to user when code goes to catch while using then/catch for promises</span></li><li class=\"c0 li-bullet-0\"><span class=\"c2 c34\">React Error Boundary:</span><span class=\"c34 c11\"> It is used to gracefully handle errors in React Apps. It helps us prevent the full app crash and let us define a fallback UI when an error is detected in our Application. It is generally wrapped at the top level of the app so that errors at any of the children components can be detected by our error boundary.</span></li></ol>"
],
"What triggers a react functional component re-render and what is happening after the rerender?": [
"<ol class=\"c10 lst-kix_42rw3tdgd0k0-0 start\" start=\"1\"><li class=\"c0 li-bullet-0\"><span class=\"c7\">A react functional component can re-render if:</span></li></ol>",
"<ol class=\"c10 lst-kix_42rw3tdgd0k0-1 start\" start=\"1\"><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c7\">Its state changes</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c7\">Its props changes</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c7\">Its parents component re-renders</span></li><li class=\"c1 c20 c40 li-bullet-0\"><span class=\"c7\">context changes (if the component consumes any context and any value in the context get changed)</span></li></ol>",
"<p class=\"c1\"><span class=\"c34 c11\">After rerendering, React compares the new Virtual DOM with the previous one, and finds the most optimised way (minimum number of operations - add/delete/modify) to update the actual DOM.</span></p>"
],
"HOC": [
"<p class=\"c13\"><span class=\"c8\">Higher-Order Component is basically a component in react that takes a component as an argument and returns a new component with additional props or functionality.</span></p>",
"<p class=\"c13\"><span class=\"c8\">It is used to enhance the functionality of a component by wrapping it with another component. HOCs are a way to reuse code logic and add additional features to a component without modifying the component itself.</span></p>",
"<p class=\"c13 c4\"><span class=\"c8\"></span></p>",
"<p class=\"c13\"><span class=\"c11\">e.g. HOCs are commonly used for tasks like authentication and authorization. They can check if a user is authenticated and conditionally render components based on their authentication status.</span></p>"
],
"Suspense": [
"<p class=\"c1\"><span class=\"c8\">React Suspense is a feature that allows components to \"suspend\" rendering while they wait for some data to load. This is especially useful for handling asynchronous operations like dynamic import of components using lazy loading.</span></p>",
"<p class=\"c1 c4\"><span class=\"c8\"></span></p>",