call apply bind in javascript examples

1Answer in SIMPLEST form
2
3Call invokes the function and allows you to pass in arguments one by one.
4Apply invokes the function and allows you to pass in arguments as an array.
5Bind returns a new function, allowing you to pass in a this array and any number of arguments.
6
7Apply vs. Call vs. Bind Examples
8--------------
9Call
10
11var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
12var person2 = {firstName: 'Kelly', lastName: 'King'};
13
14function say(greeting) {
15    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
16}
17
18say.call(person1, 'Hello'); // Hello Jon Kuperman
19say.call(person2, 'Hello'); // Hello Kelly King
20
21--------------
22Apply
23
24var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
25var person2 = {firstName: 'Kelly', lastName: 'King'};
26
27function say(greeting) {
28    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
29}
30
31say.apply(person1, ['Hello']); // Hello Jon Kuperman
32say.apply(person2, ['Hello']); // Hello Kelly King
33
34-------------
35Bind
36
37var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
38var person2 = {firstName: 'Kelly', lastName: 'King'};
39
40function say() {
41    console.log('Hello ' + this.firstName + ' ' + this.lastName);
42}
43
44var sayHelloJon = say.bind(person1);
45var sayHelloKelly = say.bind(person2);
46
47sayHelloJon(); // Hello Jon Kuperman
48sayHelloKelly(); // Hello Kelly King

1// ----------------------
2// Traditional Example
3// ----------------------
4// A simplistic object with its very own "this".
5var obj = {
6    num: 100
7}
8
9// Setting "num" on window to show how it is NOT used.
10window.num = 2020; // yikes!
11
12// A simple traditional function to operate on "this"
13var add = function (a, b, c) {
14  return this.num + a + b + c;
15}
16
17// call
18var result = add.call(obj, 1, 2, 3) // establishing the scope as "obj"
19console.log(result) // result 106
20
21// apply
22const arr = [1, 2, 3]
23var result = add.apply(obj, arr) // establishing the scope as "obj"
24console.log(result) // result 106
25
26// bind
27var result = add.bind(obj) // establishing the scope as "obj"
28console.log(result(1, 2, 3)) // result 106

1const obj = { number: 1 }
2
3function foo() {
4	console.log(this.number)
5}
6
7//bind - binds obj's 'this' context to foo, but doesn't call it
8const newFoo = foo.bind(obj) 
9
10//call/apply - binds obj's 'this' context to foo, then calls it
11foo.call(obj, /*arg1*/, /*arg2*/) 
12foo.apply(obj, [/*arg1*/, /*arg2*/])
13
14//Only difference between call/apply is argument passing - ',' vs '[]'
15

1Apply vs. Call vs. Bind Examples
2
3Call
4
5var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
6var person2 = {firstName: 'Kelly', lastName: 'King'};
7
8function say(greeting) {
9    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
10}
11
12say.call(person1, 'Hello'); // Hello Jon Kuperman
13say.call(person2, 'Hello'); // Hello Kelly King
14
15Apply
16
17var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
18var person2 = {firstName: 'Kelly', lastName: 'King'};
19
20function say(greeting) {
21    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
22}
23
24say.apply(person1, ['Hello']); // Hello Jon Kuperman
25say.apply(person2, ['Hello']); // Hello Kelly King
26
27Bind
28
29var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
30var person2 = {firstName: 'Kelly', lastName: 'King'};
31
32function say() {
33    console.log('Hello ' + this.firstName + ' ' + this.lastName);
34}
35
36var sayHelloJon = say.bind(person1);
37var sayHelloKelly = say.bind(person2);
38
39sayHelloJon(); // Hello Jon Kuperman
40sayHelloKelly(); // Hello Kelly King