-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnotes.html
1043 lines (819 loc) · 37 KB
/
notes.html
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript - Weird Parts</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="bg">
<h1>Syntax parser</h1>
<h3>A program that reads js code and translates it to computer readable language.</h3>
<br />
</div>
<div class="bg">
<h1>Lexical Environment</h1>
<h3>Where something sits physically in the code you write.<br />
Lexical Environment exists in which <b>where</b> you write something is important.
It basically tells where is it written and what surrounds it.
For example:
<pre>
<code>
var b = "b";
function abc(){
var a = 'a';
}
</code>
</pre>
<h4> Here <b>variable b</b> is globally available but <b>variable a</b> is available only inside <b>function
abc</b>
that is <b>lexical scope</b> of variable b</h4>
</h3>
<br />
</div>
<div class="bg">
<h1>Execution context</h1>
<h3><b>A wrapper to help manage the code that is running.</b>
There are lot of lexical environments but <b>which one is running currently</b> is managed by Execution
code.
<br />
It not only contains our code but it also contains things written by syntax parser to run code.
</h3>
<br>
<h1>Objects</h1>
<h3>Collection of name value pairs
<pre>
<code>
let address = {
street : 'Main',
apartment : {
floor : 2,
number : 100
}
};
</code>
</pre>
Here address, street, apartment, floor and number are all name and respective to right their values.
Value can itself be another object.
</h3>
<h3>All primitive types are poperties of object, whereas function in an object is called method.</h3>
</div>
<div class="bg">
<h1>OOP</h1>
<h3>When we write our code using objects to represent entities, that’s called object-oriented programming, in
short: “OOP”.</h3>
<pre>
<code>
const obj = {
name : 'Khushbu',
sureName : 'Thakur'
};
function welcomeUser(){
alert(`Hi there! Welcome to corona world.`);
}
obj.welcomeUser = welcomeUser;
obj.welcomeUser();
</code>
</pre>
</div>
<div class="bg">
<h1>Execution context - GLOBAL</h1>
<h3>Javascript engine creates <b>Global Object</b> and variable <b>this</b> (setup in memory) whenever our code
runs because code
in wrapped inside <i>execution context</i></h3>
</div>
<div class="bg">
<h1>Hoisting</h1>
<h3>Javascript engine moves functions and variables to the top of the code
E.g.
<pre>
<code>
b();
console.log(a);
var a = "a val";
function b(){
console.log('b function called');
}
//output
-> b function called
-> undefined
</code>
</pre>
<p>here a and b both are called before they are declared. but still there is no error in console because
they are moved to the top</p>
</h3>
<h3>
There are <b>two phases</b> which happen during execution;
<ul type="none">
<li>
1. Creation phases
</li>
<li>
2. Execution phase
</li>
</ul>
<ul>
<li> 1. During creation phase -> global object is setup within memory. </li>
<li> 2. Parser recognizes where we have created variables and functions. </li>
<li> 3. Set asides memory space for them </li>
<li> 4. Function is entirely placed in memory i.e. both function and logic inside it </li>
<li> 5. Whereas in case of variables it only sets memory space and sets value as undefined as it don't
know what's it value will be until it is executed
i.e. it assigns undefined placeholder for it </li>
</ul>
<b>All variables in javascript are initially set to undefined and functions are sitting in memory
entirely.</b>
</h5>
<p>if we use let instead of var then it will throw error instead of showing undefined and will say <br>
<b> ------------ Cannot access 'a' before initialization ---------</b></p>
</div>
<div class="bg">
<h1>Single threaded - synchronous execution</h1>
<h3>Single threaded : One command is executed at a time.</h3>
<h3>synchronous : one at a time and in order that it appears.</h3>
</div>
<div class="bg">
<h1>Invocation</h1>
<h3>Running a function { by using paranthesis() }. So when we say invoke the function we mean to say run the
function.</h3>
<b>So whenever we invoke a function a new execution context is created and put on the top of the stack. The
execution context on the top is always executed currently.</b>
<p> When function is executed it gets poped out from the stack.</p>
<div>
<img src="./img/function-invocation.gif" class="responsive" />
</div>
</div>
<div class="bg">
<h1>Scope Chain</h1>
<img src="./img/scope-chain.png" class="responsive">
<h3>If we call same function twice, each will get it's own execution context.</h3>
</div>
<div class="bg">
<h1>Scope</h1>
<h3>Where a variable is available in the code.</h3>
<h3><b>let</b> is block scope. It is only available inside the current function.</h3>
<pre>
<code>
function a(){
let b = true;
var c = false;
}
</code>
</pre>
<h3> <b>let is same as var.</b> It is declared, set to undefined and stored in the memory. <b>However we can't
use it until the line of code is actually run</b></h3>
<h4>In above example if we call b variable before it's declaration, it throws reference error.</h4>
<h3><u>Variable c is available outside <code>function a</code> but variable b is not available as it is declared
using let. And let is block scoped.</u></h3>
<h5>A block's in general defined by curly braces. Eg. if statement, for loop, function</h5>
<pre>
<code>
for (let i = 0; i < 3; i++) {
setTimeout(() => {
// here everytime we will get a different variable in memory as let is block scoped
console.log(i)
}, 1);
}
/*
output
0
1
2
*/
for (var j = 0; j < 3; j++) {
setTimeout(() => {
// because of var j is defined only once,
and after that it's value just keeps on updating
console.log(j)
}, 1);
}
/*
output
3
3
3
*/
</code>
</pre>
</div>
<div class="bg">
<h1>Asynchronous callback</h1>
<h5>Since JavaScript is synchronous, how is this handling those asynchronous events? </h3>
<h3>JS first executes all the tasks in it's global execution task, in between if we do some <b>http request
or click event</b>, it gets stacked in <b>Event queue</b>. When js's stack gets empty it
periodically looks into event queue and see if there is something. Then it runs all the items in event
queue synchronously. </h3>
<img src="./img/asynchronous.gif" class="responsive">
</div>
<div class="bg">
<h1>Dynamic Typing</h1>
<h3>It figures out variable type on the fly.</h3>
</div>
<div class="bg">
<h1>Primitive Type</h1>
<h3>A <b>type of data that holds single value</b>. So object is primitive type as it holds key value pairs.</h3>
<h4>There are 6 primitive types:</h4>
<ol>
<li><b>Undefined</b> : Represents lack of existence. It is set by js engine sets variables to undefined
initially. (Leave this value for engine to set)</li>
<li><b>Null</b>: Represents lack of existence. Use this when we want to say somwthing does not exist or has
no value. (We i.e. code will use this value to indicate that this does not exist.)</li>
<li><b>Boolean</b>: True or false</li>
<li><b>Number</b>: Floating point number. Int,decimal all accepted in number.</li>
<li><b>String</b>: Sequence of characters in single '' of double "" quotes.</li>
<li><b>Symbol</b>: Once you create a symbol, its value is kept private and for internal use.</li>
<li><b>BigInt</b></li>
</ol>
</div>
<div class="bg">
<h1>Operator</h1>
<h3>+ , - , * , / , >, <, etc </h3> <h3>This are as good as function which returns some value based on function
name(operator)</h3>
<h2><b>Infix notation</b>: The function name i.e. the operator sits between two parameters.
</h2>
<pre>
<code>
var a = 3 + 4;
function +(a,b){
// return addition of a and b
};
</code>
</pre>
<p>So for calling this we would have to write something like</p>
<pre>
<code>
+(3,4) without infix notation
3 + 4 -> infix notation (operator between two params)
+3 -> prefix notation (operator before param)
3+ -> postfix notation (operator after param)
</code>
</pre>
<p>This does not seem good. That's why all programming languages have infix notation. </p>
</div>
<div class="bg">
<h1>Operator Precedence</h1>
<h3>It means which operator function gets called first. For example <b>()</b> will be given more priority over
<b>*</b> which in turn will be called before <b>+</b></h3>
<p>There's complete list of order od precedence. <a href="./order-of-precedence.pdf" target="_blank"> Click here
to view.</a></p>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence"
target="_blank">Get detailed explanation here.</a>
<pre>
<code>
var a = 3 + 4 * 5;
console.log(a);
// output -> 23
var b = (3 + 4) * 5;
console.log(b);
// output -> 35
</code>
</pre>
</div>
<div class="bg">
<h1>Associativity</h1>
<h3>If all operators / functions are same then in what order will the be called, i.e. from left-to-right or
right-to-left.</h3>
<h4>For e.g. ..*.., ../.., ..%.. all have same precedence. In such case this will be called from left-to-right.
</h4>
<pre>
<code>
all have same precedence so called left to right
var c = 2 * 10 / 4;
console.log(c); // 5
var d = 2 / 10 * 4;
console.log(d); // 0.8
</code>
</pre>
<a href="./order-of-precedence.pdf" target="_blank"> Click here
to view.</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence"
target="_blank">Get detailed explanation here.</a>
</div>
<div class="bg">
<h1>Coercion</h1>
<h3>Converting a value from one type to another. Since JS is Dynamically typed this happens a lot in js.</h3>
<pre>
<code>
var a = "1" + 2;
console.log(a); // 12
var b = 4 + "1" + 2;
console.log(b); // 412
var c = 3 + 5 + 9 + "2";
console.log(c); // 172
var d = '3' + 5 + 9 + "2";
console.log(d); // 3592
</code>
</pre>
</div>
<div class="bg">
<h1>Comparison</h1>
<h3>
<b>==</b> coerces the value for Comparison, i.e. they just check value whereas <b>===</b> does not coerce
value, checks value asa well as type;
</h3>
<h4>Strict Equality Comparison (===): used by Array.prototype.indexOf, Array.prototype.lastIndexOf, and
case-matching</h4>
<a href="./comparison.pdf" target="_blank">Refer this table to know more</a>
<a href="https://dorey.github.io/JavaScript-Equality-Table/unified/" target="_blank">Refer this table to know
more</a>
<a href="https://github.com/slikts/js-equality-game">Game for js equality check.</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness"
target="_blank">In depth explanation</a>
</div>
<div class="bg">
<h1>Objects and dot notation</h1>
<h3>An object can have:
<br> <br>
1. primitive i.e. boolena, string, number
<br> <br>
2. key value pairs ->
<br> <br>
<code>
var a : { b : c { d : { e : 1}}};
</code>
<br> <br>
3. methods (functions)
<br>
<code>
var a = {
read : function(){
console.log('read');
}
}
</code>
</h3>
<h3>Bracket notation is also called computed member access -> it has highest precendence after ()</h3>
<h3> Dot notation is also called member access -> it has highest precendence after () </h3>
</div>
<div class="bg">
<h1>Namespace</h1>
<h3>In modern coding, a namespace is a container for variables and functions. It's just a holder, a container.
And typically it's used to keep variables and functions with the same name separate.</h3>
<h5>For.eg.</h5>
<pre>
<code>
var greet = 'Hello';
var greet = 'Hola';
consloe.log(greet); //Hola
var english = {
greetings : {
greet : 'Hello'
}
};
var spanish = {
greetings : {
greet : 'Hola'
}
};
consloe.log(english.greetings.greet); // Hello
consloe.log(spanish.greetings.greet); // Hola
</code>
</pre>
<h3>
Before the greet variable was overrided and this can cause error.
Since JS does not have namespace. So we created fake name space i.e.
container for each language.</h3>
<h4>I've contained my variables, maybe my functions and methods, and
other objects, inside a container object, and that's all it's really doing.</h4>
</div>
<div class="bg">
<h1>JavaScript Object Notation (JSON)</h1>
<h3>It is a string of data looks just like object literal syntaxt ({ "a" : 2}). All properties are wrapped in
quotes.</h3>
<h3>JSON is more strict. It requires you to put properties in quotes. And does not allow to put values as
functions inside it. It is used to pass from client in browser to server.</h3>
<pre>
<code>
<!-- JSON -->
'{
"firstName" : "Khushbu",
"isPerson" : true
}'
<!-- Object -->
{
firstName : "Khushbu",,
isPerson : true
}
</code>
</pre>
</div>
<div class="bg">
<h1>Expressions</h1>
<h3>Anything that returns a value</h3>
<pre>
<code>
1 + 3
// 3
</code>
</pre>
</div>
<div class="bg">
<h1>Function is an object in js.</h1>
<h1>They are called <b>first class functions</b>. Because JS functions can be asigned to
variables, passed as an argument, returned from other function. They can even reside inside another object.
</h1>
<pre>
<code>
// assigned to variables
const getName = function(name){
console.log(name);
}
// passed as an argument
const logName = (name) =>{
name();
}
logName(function(){
console.log('some random name');
});
// returned from another function
function getFullName(firstName){
return function(lastName){
console.log(`${firstName} ${lastName}`);
}
}
getFullName('John')('Doe');
// can reside inside objects
const person = {
name : 'John Doe',
getName : () => this.name
};
</code>
</pre>
<a href="./js/functions.js">Refer for examples</a>
</div>
<div class="bg">
<h1>Anonymous Function</h1>
<h3>It is a function that does not have name in it's name property. E.g.</h3>
<pre>
<code>
// anonymous function
var anonymousGreetFunction = function(){
console.log('Hi user!');
}
anonymousGreetFunction(); // Invocation
</code>
</pre>
<h2>We cannot invoke anonymous function before it is declared, because functions are completely stores in memory
while hoisting but in case of variables they are stored in memory with undefined value. So if we call it
before it is executed we will get error. </h2>
<b>Error : Cannot access 'anonymousGreetFunction' before initialization</b>
<h3>Here function is not referenced by name but by a variable which knows where this function sit. As it has no
name it is called anonymous. This is function expression</h3>
</div>
<div class="bg">
<h1>Function expression</h1>
<pre>
function log(a) {
a();
}
log(function () {
console.log('Hi from log function')
});
</pre>
<h3>a function expression creates an object, a function object on the fly.
create function on fly, put some code in it and Pass it to another function which is then referenced by
argument and then execute it.</h3>
</div>
<div class="bg">
<h1>By value vs By Reference</h1>
<h3>All primitive types gets referenced by value. Whereas on case of non-primitives i.e. objects value gets
copied by reference.</h3>
<b>All primitive types are by value and all objects are by reference.</b>
<pre>
<code>
// by value (primitive)
var a = 3;
var b;
b = a;
/* here both a and b are 3, but there are two copies in memomry with value 3,
so if we now change value of a it would not change value of b */
// by pointer - reference (non- primitive)
var c = { someVal : 1};
var d;
c = d;
// whereas here both c and d are pointing to same address in memory.
</code>
</pre>
<b>Refer value-vs-reference.js file for more details.</b>
</div>
<div class="bg">
<h1>Mutate : Something which can be changed. To change something.</h1>
<h1>Immutable : Something which cannot be changed</h1>
</div>
<div class="bg">
<h1>THIS</h1>
<h3><b>This</b> keyword usually refers to global object in browser. When execution context is created, a this
keyword is also created for it. </h3>
<a href="./js/this-keyword.js" target="_blank">Refer for notes here</a>
</div>
<div class="bg">
<h1>Array</h1>
<h3>Array is a collection of object and primitive types. It is Dynamically typed.</h3>
<a href="./js/array.js" target="_blank">Refer here for example</a>
</div>
<div class="bg">
<h1>IIFE : Immediately Invoked Function Expression</h1>
<h3>Function is called as soon as it is created.</h3>
<h3>IIFE, it needs to be an anonymous function, a function without a name, this is because IIFE needs to be
Invoked Immediately without invoking it a function name. We also need to wrap the anonymous function with
parenthesis, so the Javascript parser treats our anonymous function as a function expression.
<pre>
<code>
(function() {
console.log('hi from iife');
}());
</code>
</pre>
A function expression is when you assign a function to a variable or property of an object. Anything that is
a Javascript expression, including function expression, returns a value.</h3>
</div>
<div class="bg">
<h1>Closures</h1>
<pre>
<code>
function greet(whatToSay){
return function(name){
console.log(`${whatToSay} ${name}`);
}
}
greet('Hello')('Khushbu');
let greetings = greet('Namaste');
greetings('Chandler');
/*
output
Hello Khushbu
Namaste Chandler
*/
</code>
</pre>
<ol>
<li>We called <b>greet function</b> with paramter "Khushbu" / "Chandler". </li>
<li>An <b>exection context is created</b> for greet function</li>
<li>Memory space is created for <b>whatToSay</b></li>
<li>Now anonymous function is returned (which consoles 2 variables whatToSay & name)</li>
<li>After this the the execution context of <b>greet function</b> is <b>popped off the stack</b>.</li>
<li>So now -> greet('Hello') is replaced with function returned. To invoke this function we wrote <b>
greet('Hello')('Khushbu'); / greetings('Chandler');</b></li>
<li>The inner function does not have it's own <b>whatToSay</b> variable. So following scope chain it goes to
outer function.</li>
<li>Javascript normally destorys all the variables defined inside function when it is popped out of context.
But in this cases like above the variable still lives.</li>
<li>The inner function still can reference to the all the vairables it need.</li>
<li>So our anonymous function call still reference to <b>whatToSay</b> variable.</li>
<li>The JavaScript engine will always make sure that whatever function I'm running,
that it will have access to the variables that it's supposed to have access to. </li>
</ol>
<h3>Greet is gone, the execution context is gone. <br>
But what's in memory for that execution context isn't and the <br>
JavaScript engine makes sure that my function can still go down the scope chain and find it. <br>
Even though it's not even on the execution stack anymore.
<br>
And this way we say that the execution context has closed in its outer variables, <br>
the variables that it would normally have reference to anyway. <br>
Even though those execution contexts are gone. <br>
And so this phenomenon, of it closing in all the variables <br>
that it's supposed to have access to, is called a closure.</h3>
<a href="./js/closure.js" target="_blank">Refer for exmaples</a>
<h3>Closure is useful in hiding implementation detail in JavaScript. In other words, it can be useful to create
private variables or functions.</h3>
<h3>Definition: A JavaScript closure is when an inner function has access to its outer enclosing function's
variables and properties. <br>
In other words, closure is created when a child function keep the environment of the parent scope even after
the parent function has already executed
</h3>
</div>
<div class="bg">
<h1>All functions in javscript gets access to three methods : apply, bind and call.</h1>
</div>
<div class="bg">
<h1>Bind</h1>
<h3>Bind method : The bind() method creates a new function that, when called, has its this keyword set to the
provided value, with a given sequence of arguments preceding any provided when the new function is called.
</h3>
<h3>let boundFunc = func.bind(thisArg[, arg1[, arg2[, ...argN]]])</h3>
<h3>Bind basically lets us control what a function's this will be.</h3>
<b>Bind creates a copy of function</b>
<p>Below logName function's this was global object, by binding it to person object now it is person object.</p>
<pre>
<code>
const person = {
firstName : "Khushbu",
lastName : "Thakur",
fullName : function(){
return `${this.firstName} ${this.lastName}`
}
}
let logName = function(){
console.log(this.fullName());
}.bind(person);
logName();
// output : Khushbu Thakur
</code>
</pre>
<a href="./js/call-apply-bind.js" target="_blank">Refer this</a>
</div>
<div class="bg">
<h1>Call</h1>
<h3>Calls a method of an object, substituting another object for the current object. <b>Call does not create
copy
of the function but instead executes it.</b></h3>
<h3>let callFunc = func.call(thisArg[, arg1[, arg2[, ...argN]]])</h3>
<pre>
<code>
const person = {
firstName: "Khushbu",
lastName: "Thakur",
fullName: function () {
return `${this.firstName} ${this.lastName}`
}
}
let logName = function (language) {
console.log(this.fullName());
console.log(language);
console.log('-----------');
};
logName.call(person, 'hindi');
</code>
</pre>
<a href="./js/call-apply-bind.js" target="_blank">Refer this</a>
</div>
<div class="bg">
<h1>Apply</h1>
<h3>Calls the function, substituting the specified object for the this value of the function, and the specified
array for the arguments of the function. <b>Apply does not create
copy
of the function but instead executes it.</b>
<b>Apply is same as call, the only difference is that it needs arguments in an array</b></h3>
<h3>let callFunc = func.call(thisArg, [ arg1, arg2, ...argN])</h3>
<pre>
<code>
const person = {
firstName: "Khushbu",
lastName: "Thakur",
fullName: function () {
return `${this.firstName} ${this.lastName}`
}
}
let logName = function (language) {
console.log(this.fullName());
console.log(language);
console.log('-----------');
};
logName.apply(person, ['marathi']);
</code>
</pre>
<a href="./js/call-apply-bind.js" target="_blank">Refer this</a>
</div>
<div class="bg">
<h1>Currying</h1>
<h3><b>Take a function, create copy of it and bind it with some default values. It is called currying.</b></h3>
<b>Function currying: creating a copy of a function but with some preset parameters.</b>
<pre>
<code>
const multiply = function (a, b) {
return a * b;
}
console.log(multiply(2, 4)); // 8
// here new copy of multiply is created with default paramter value of a as 2;
// so when we will call multiplyByTwo, a will always be 2 and will pass value of b;
const multiplyByTwo = multiply.bind(this, 2);
// here 10 is value of b
console.log(multiplyByTwo(10)); //20
const multiplyByFour = multiply.bind(this, 4);
console.log(multiplyByFour(20));
// 80
/*
we created copy of multiply function
then set a default value
this is called currying
*/
</code>
</pre>
</div>
<div class="bg">
<h1>Inheritance</h1>
<h3>One object gets access to properties and methods of another object.</h3>
</div>
<div class="bg">
<h1>Prototypes</h1>
<h3>In JavaScript objects ave a special hidden property [[Prototype]]. It is either null or references to other
object.</h3>
<h3>If we want some property from object and it is missing over there, then it automatically goes down the
prototype chain and finds it in [[Prototype]].</h3>
<b>The prototype is a little bit “magical”. When we want to read a property from object, and it’s missing,
JavaScript automatically takes it from the prototype. In programming, such thing is called “prototypal
inheritance”. </b>
<br>
<b>The property [[Prototype]] is internal and hidden, but there are many ways to set it.
One of them is to use the special name __proto__</b>
<br>
<img src="./img/prototype.png" class="responsive" />
<ol>
<li>We wanted prop1 from obj. Since obj has it we directly get from obj.</li>
<li>We now want prop2 from obj. But obj does not have it, so it goes down to it's __proto__ and finds it
over there and returns if it has.</li>
<li>Now __proto__ of obj can have another __proto__ too.</li>
<li><b>So going from obj to __proto__ to __proto__ to find properties is called propotype chain.</b></li>
<li>For prop3, obj goes to __proto__. It does not have it. So this __proto__ goes to its __proto__ and
returns it from there.</li>
</ol>
<b>__proto__ is a historical getter/setter for [[Prototype]]</b>
<h3>In below example when we look from some property or method in john or janice object, if it is missing over
there then it automatically inherits it from <b>person object</b>.
</h3>
<pre>
<code>
const person = {
firstName: 'default',
lastName: 'default',
getFullName() {
return `${this.firstName} ${this.lastName}`
}
};
console.log(person.getFullName());
// default default
// only for demo purpose, do not do this ever. Affects performance.
const john = {
firstName: 'John',
lastName: 'Doe',
};
// error john.getFullName is not a function
// console.log(john.getFullName());
/* since john does not have it's own getFullName property
we are trying to get it from person object.*/
john.__proto__ = person;
console.log(john.getFullName());
// John Doe
const janice = {
firstName: 'Janice'
};
janice.__proto__ = person;
console.log(janice.getFullName());
// Janice default
</code>
</pre>
<h3> <b>person</b> is prototype of john and janice. <b>john and janice</b> prototypically inheitrs from person.
</h3>
</div>
<div class="bg">
<h1>[[Prototype]] && __proto__</h1>
<h3>There can be only one [[Prototype]]. An object may not inherit from two others. </h3>
<h3>__proto__ can only be an object or null.</h3>
<h3>__proto__ references can't go in circles. For example above, as john's __proto__ referes to person. Person's
__proto__ can't again reference to john. </h3>
<h3>Methods are shared across objects via prototype but not states. Refer below example.</h3>
<pre>
<code>
const animals = {
name : 'animal',
walk() {
if (!this.isSleeping) {
return true
}
},
sleep() {
return this.isSleeping = true
}
}
const rabbit = {
name: 'Rabbie',
__proto__: animals,
};
const snake = {
name: 'snaky',
__proto__: animals
}
// modifies isSleeping only in rabit object
rabbit.sleep();
console.log(rabbit.isSleeping); // true
console.log(animals.isSleeping); // undefined (no such property in the prototype)
console.log(snake.isSleeping); // undefined (no such property in the prototype)
// this is in prototype always refers to the object before dot.
console.log(snake.name);
</code>
</pre>
<b>No matter where the method is found: in an object or its prototype. In a method call, this is always the