Undefined & Null, This (Bind, Call & Apply)

Dear Dev Community,
Greetings!

We can get undefined in many ways. Some of them is given below:

1. Any variable declared but not assigned any value that shows the result undefined.
   e.g. let number;
   console.log (number) // output undefined.

2. Function which is not returning any value will show undefined.
   e.g. function add(num1, num2) {
   let result = num1 + num2;
   }
   console.log(add(10,20)); // output undefined
   But if you put like
   function add(num1, num2) {
   let result = num1 + num2;
   return result;
   }
   console.log(add(10,20)); // output 30

3. Object that has no key and try to access the key will return undefined.
   e.g.
   const person = {
   name: "Ahsan",
   age: 25,
   job: "Service"
   }
   console.log(person.surname) //output undefined.

4. Array that tries to access the item that has not in the array list will return undefined.

e.g. const person = [ 10, 20, 30, 50, 20, 40 ];
console.log(person[10]) // output will be undefined as the person array does not assigned any value at index 10.

On the other hand, we can get null when we explicitly assign null as value of any variable.

e.g. const newValue = null;
console.log(newValue) // output null

Bind, Call & Apply:

To understand the Bind, Call & Apply, first we have to understand the "this" key word. Let's see example

const person = {
firstName : "Hasan",
lastName : "Abid",
salary : 30000,
getFullName : function() {
return this.firstName +" "+ this.lastName;

}
}
Note: here this means the object person.

Now see this

const person = {
firstName : "Hasan",
lastName : "Abid",
salary : 30000,
getFullName : function() {
return this.firstName +" "+ this.lastName;

}
}
const newPerson = {
firstName : "Hero",
lastName : "Adam",
salary : 20000
}
const newName = person.getFullName.bind(newPerson);
console.log(newName()); // output Hero Adam here this indicating the newPerson object.

Call:

See the example below:

const person ={
firstName : "Altaf",
lastName : "Mahmud",
salary : 30000,
getFullName : function() {
return this.firstName +" "+ this.lastName;

},
chargeBill : function(amount) {
console.log(this);
this.salary = this.salary - amount;
return ("Now the new salary of " + this.firstName + " " + this.lastName + " is "+ this.salary)
}
}
const newPerson = {
firstName : "Hero",
lastName : "Adam",
salary : 20000
}
const newPersonChargeBill = person.chargeBill.bind(newPerson);
console.log(newPersonChargeBill(2000));
Here the call method using the other object's method and invoking immediately whereas the bind method does not invoke it immediately.
const newBill = person.chargeBill.call(newPerson,3000)
console.log(newBill);

// output
{ firstName: 'Hero', lastName: 'Adam', salary: 20000 }
Now the new salary of Hero Adam is 18000
{ firstName: 'Hero', lastName: 'Adam', salary: 18000 }
Now the new salary of Hero Adam is 15000 //

Apply :

See the example
const person ={
firstName : "Altaf",
lastName : "Mahmud",
salary : 30000,
getFullName : function() {
return this.firstName +" "+ this.lastName;

},
chargeBill : function(amount) {
console.log(this);
this.salary = this.salary - amount;
return ("Now the new salary of " + this.firstName + " " + this.lastName + " is "+ this.salary)
}
}
const newPerson = {
firstName : "Hero",
lastName : "Adam",
salary : 20000
}
const newPersonChargeBill = person.chargeBill.bind(newPerson);
console.log(newPersonChargeBill(2000));
const callBill = person.chargeBill.call(newPerson,3000);
console.log(callBill);

Here the Apply method do the same thing like call but it takes array as parameter.
const applyBill = person.chargeBill.apply(newPerson,[5000])
console.log(applyBill);

// output
{ firstName: 'Hero', lastName: 'Adam', salary: 20000 }
Now the new salary of Hero Adam is 18000
{ firstName: 'Hero', lastName: 'Adam', salary: 18000 }
Now the new salary of Hero Adam is 15000
{ firstName: 'Hero', lastName: 'Adam', salary: 15000 }
Now the new salary of Hero Adam is 10000 //