Skip to content

Commit f9f4088

Browse files
Ch-sriramCh-sriram
committed
52 Bind, Call & Apply
README's Index Updated.
1 parent 645980f commit f9f4088

File tree

3 files changed

+130
-1
lines changed

3 files changed

+130
-1
lines changed

‎JS-Objects-Functions-Advanced/bind_call_apply.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Advanced JS: Objects & Functions - Bind, Call & Apply</title>
7+
</head>
8+
<body>
9+
<h1>Bind, Call & Apply</h1>
10+
<p><em>Check the developer console for the log (Only in .html version)</em></p>
11+
<script src="./scripts/bind_call_apply.js" type="text/javascript"></script>
12+
</body>
13+
</html>

‎JS-Objects-Functions-Advanced/scripts/bind_call_apply.js

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/********************************************************************************************
2+
* Bind, Call & Apply
3+
* ------------------
4+
* call() & apply() are similar to each other, such that, call() asks for the arguments
5+
* differently compared to apply(). Both call() & apply() are used for method borrowing.
6+
*
7+
* call() syntax
8+
* -------------
9+
* <object>.<method>.call(this, argument1, argument2, ...);
10+
* where, this refers to the object that the particular method is being called on.
11+
* argument1, argument2, ... are arguments of the <method>.
12+
*
13+
* apply() syntax
14+
* --------------
15+
* <object>.<method>.apply(this, [list of arguments]);
16+
* where, [list of arguments] are all the list of arguments that the <method> accepts. The
17+
* <method> also has to be defined in such a manner that it takes in a list as an
18+
* argument.
19+
*
20+
* bind() is majorly used for something known as currying. Currying is a technique used to
21+
* create a function based on another function, but with some preset parameters. In JS, this
22+
* is achieved using the bind() method. This new variable holds the curried/presetted
23+
* function. When calling the curried function, we just pass the remaining parameters.
24+
*
25+
* bind() syntax
26+
* -------------
27+
* <object>.<method>.bind(this, argument1, argument2, ...);
28+
* where, argument1, argument2, ... are optional values of arguments we want to preset
29+
* before calling the function with all the arguments passed into the function.
30+
*/
31+
32+
var john = {
33+
name: "John",
34+
yearOfBirth: 1990,
35+
job: "teacher",
36+
presentation: function(style, timeOfDay) {
37+
// depending on the style & timeOfDay, the greeting will differ
38+
if (style === "formal") {
39+
console.log(
40+
"Good " + timeOfDay + " ladies and gentlemen. I'm " + this.name +
41+
", I'm a " + this.job + " and I'm " + (2019 - this.yearOfBirth) +
42+
" years old."
43+
);
44+
} else if (style === "friendly") {
45+
console.log(
46+
"Hey, what's up? I'm " + this.name + ", I'm a " + this.job +
47+
" and I'm " + (2019 - this.yearOfBirth) + " years old. Have a nice " +
48+
timeOfDay + "."
49+
);
50+
}
51+
}
52+
};
53+
54+
// we can simply call john.presentation as follows
55+
john.presentation("formal", "morning");
56+
57+
var emily = {
58+
name: "Emily",
59+
yearOfBirth: 1984,
60+
job: "designer"
61+
};
62+
63+
// We can use method borrowing using call() as follows:
64+
john.presentation.call(emily, "friendly", "evening");
65+
66+
// example of apply()
67+
// john.presentation.apply(emily, ["formal", "afternoon"]);
68+
// In this code, the line above will give us an error because presentation method doesn't
69+
// the a list argument as a parameter.
70+
71+
72+
// We can use bind() for currying, i.e, for presetting some arguments before calling
73+
// Here, we're presetting the friendly parameter as follows:
74+
var johnFriendly = john.presentation.bind(john, "friendly");
75+
johnFriendly("morning"); // we only send the remaining arguments' values which is in this
76+
johnFriendly("evening"); // case, the calue for the timeOfDay
77+
78+
var emilyFormal = john.presentation.bind(emily, "formal");
79+
emilyFormal("morning");
80+
emilyFormal("evening");
81+
82+
83+
84+
// exampple from first class functions
85+
var years = [1955, 1966, 1989, 1995, 2004, 2000];
86+
87+
function arrayCalc(arr, fn) { // fn is the function
88+
var result = [];
89+
for(var i = 0; i < arr.length; ++i)
90+
result.push(fn(arr[i])); // we call the function argument 'fn' on arr[i]
91+
return result;
92+
}
93+
94+
function calculateAge(year) {
95+
return 2019 - year;
96+
}
97+
98+
// in some countries, age for becoming an adult is different. In japan, it is 20. Hence
99+
// we will use the 'limit' variable to preset the age before calling the function
100+
function isAdult(limit, age) {
101+
return age >= limit; // if the age is >= 18, the function returns true, else false
102+
}
103+
104+
var ages = arrayCalc(years, calculateAge); // callback function here is calculateAge()
105+
console.log(ages);
106+
107+
// arrayCalc only uses one function argument in its callback fuunction's call. Therefore,
108+
// presetting the 'limit' variable in isAdult function as follows
109+
var isAdultJapan = isAdult.bind(this, 20);
110+
var adultsJapan = arrayCalc(ages, isAdultJapan);
111+
console.log(adultsJapan);
112+
113+
// or, we can simply write the following
114+
var adultsIndia = arrayCalc(ages, isAdult.bind(this, 18));
115+
console.log(adultsIndia);

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,5 @@ Syntax -
6262
2. Primitives vs. Objects: [prim_vs_obj.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/prim_vs_obj.html) | [prim_vs_obj.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/prim_vs_obj.js)
6363
3. First Class Functions: [first_class_functions.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/first_class_functions.html) | [first_class_functions.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/first_class_functions.js)
6464
4. Immediately Invoked Function Expressions (IIFE): [iife.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/iife.html) | [iife.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/iife.js)
65-
5. Closures: [closure.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/closure.html) | [closure.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/closure.js) | closure.pdf - [view](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/assets/closure.pdf) or [download](https://raw.githubusercontent.com/Ch-sriram/JavaScript/9f569b0a67f10ff4a4075015fbccad929c265789/JS-Objects-Functions-Advanced/assets/closure.pdf)
65+
5. Closures: [closure.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/closure.html) | [closure.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/closure.js) | closure.pdf - [view](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/assets/closure.pdf) or [download](https://raw.githubusercontent.com/Ch-sriram/JavaScript/9f569b0a67f10ff4a4075015fbccad929c265789/JS-Objects-Functions-Advanced/assets/closure.pdf)
66+
6. Bind, Call & Apply: [bind_call_apply.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/bind_call_apply.html) | [bind_call_apply.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/bind_call_apply.js)

0 commit comments

Comments
 (0)