-
Notifications
You must be signed in to change notification settings - Fork 65
Expand file tree
/
Copy pathMethod-Chaining.js
More file actions
135 lines (119 loc) · 3.04 KB
/
Copy pathMethod-Chaining.js
File metadata and controls
135 lines (119 loc) · 3.04 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/* 💡"JavaScript-with-JC"
👉 Method Chaining
Method chaining is a chain of methods where each method shares the same reference means each method returns an object, allowing the calls to be
chained together in a single statement. Method chaining is used to write more readable code.
💡 this keyword in JavaScript refers to the current object in which it is called. when a method returns this means it returns an instance of the object in which
it is returned and with returned instance of an object, we can call next method of an object. In this way, we achieve method chaining in JavaScript.
*/
// 💡 Three ways of implementing method chaining.
// 👉 1) Using Objects
const calculate = {
total: 0,
add: function (number) {
this.total += number;
return this;
},
multiply: function (number) {
this.total *= number;
return this;
},
divide: function (number) {
this.total /= number;
return this;
},
subtract: function (number) {
this.total -= number;
return this;
},
};
calculate.add(5).multiply(10).divide(5).subtract(5);
console.log(calculate.total); // 5
// 👉 2) Using function Constructor.
function Calculator() {
this.total = 0;
this.add = function (number) {
this.total += number;
return this;
};
this.multiply = function (number) {
this.total *= number;
return this;
};
this.divide = function (number) {
this.total /= number;
return this;
};
this.subtract = function (number) {
this.total -= number;
return this;
};
}
const calci = new Calculator();
calci.add(5).multiply(10).divide(5).subtract(5);
console.log(calci.total); // 5
// 👇 we can create a new instance here
const newCalci = new Calculator();
newCalci.add(15).multiply(20).divide(5).subtract(20);
console.log(newCalci.total); // 40
// 👉 3) Using function as Closure or factory function
// 👇 we are forming closure and returning a new object from it
const CalculatorFunc = function () {
return {
total: 0,
add: function (number) {
this.total += number;
return this;
},
multiply: function (number) {
this.total *= number;
return this;
},
divide: function (number) {
this.total /= number;
return this;
},
subtract: function (number) {
this.total -= number;
return this;
},
result: function () {
return this.total;
},
};
};
const result = CalculatorFunc()
.add(5)
.multiply(10)
.divide(5)
.subtract(5)
.result();
console.log(result); // 5
const result2 = CalculatorFunc()
.add(15)
.multiply(20)
.divide(5)
.subtract(20)
.result();
console.log(result2); // 40
// 👉 Method Chaining Question to implement.
function Calc(num) {
this.total = num;
this.add = function (num) {
this.total += num;
return this;
};
this.sub = function (num) {
this.total -= num;
return this;
};
this.value = function () {
return this.total;
};
}
function add(num) {
return new Calc(num);
}
function sub(num) {
return new Calc(num);
}
console.log(add(4).sub(3).value()); // 1