Javascript concept you should know

We will go from the easier ones to the more difficult ones. Let us start with our first concept.

let and var

what is the difference between the keywords let and var. First var has been in javascript since the beginning while let was introduced in ES2015./ES6. Lets say your browser has not been upgraded in a decade. let will not work on such browsers. Secondly, let has a block scope which means a variable defined with the let keyword will die at the end of the block it is defined compared to var which has functional scope which means it doesn't respect all of the block except the function block. So it will die at the end of the function it is defined not the block. The third difference is the var is gets hoisted at the top of the function while variable defined with let doesn't get hoisted. Let us look at it in play

 let z = function () {

  if (true) {
    //console.log(y)
    //console.log(m)

    var y = 2;
    let m = 3;

  }
  console.log(y)
  console.log(m)
}
z();

We can see that the variable y gives us 2 which means that it exist outside the block giving it a function scope while variable m gives an undefined which means it does not exist outside the block.
Similarly if we call the functions inside the block before the definition of the variable

 let z = function () {

  if (true) {
    console.log(y)
    console.log(m)

    var y = 2;
    let m = 3;

  }
}
z();

the variable y is undefined because its definition gets hoisted but not the value. That is why it does not give an error but m gives an error because it does not exist before its definition.

Difference between === and ==

The double equal sign and the triple equal sign are both comparison operators. Which means they would compare values on their left hand and their right side. The difference is when using the double equal sign it compares values but does not compare type. The triple equal sign compares both the value and type. Let us look at this in play

  if('3' == 3) {

}

What happens is that in order to compare using the double equal sign, first it will make the value on the left side equal to the value on the right side. It will try and convert both to a string. That way it will say true. Right side equal to left side. The double equal sign does not compare types it actually converts one type to reflect the other. When we use the triple equal sign it does not try and convert anything, it just says well the left side is a string and the right side is a number so it is not true.

Keyword let and const

The let and const keywords are used basically to define variables. After the first assignment of value using the const keyword you cannot reassign another value or change type compared to let which allows all this changes. For example

 let l = 3;
l = 5;
console.log(l);

const h = 6;
h = 3;
console.log(h);

We get 5 for the let keyword while the const keyword throws a typeerror. The variable using a const keyword can be modified if its an object but values cannot be reassigned to it.

undefined and null

undefined and null in javascript both represent empty values but the difference is that when you define a variable and not assign a value to it, it automatically puts a placeholder which is called undefined. javascript does this so you don't have to do it. null meanwhile can be set by yourself. If we check the

typeof(null);
  typeof(undefined);

typeof undefined gives undefined while typeof null gives an object.

The arrow function

let person = {
  firstname:'',
  lastname: '',
  setname:function(name){
    let splitname = function(n){
      let newarray = n.split(' ');
      this.firstname =  newarray[0];
      this.lastname = newarray[2]
    }
    splitname(name)
  }
}
person.setname('hello man');
console.log(person.firstname);

We have this object called person and it also has properties firstname and lastname. It has a function inside called setname and it takes the argument name and splits the fullname into firstname and lastname. This splitting is done by an inner function which is a private function. Because the function is inside of a function it has its own this. As it is not a constructor it will set the the this to the windows object. If we run the above code it will give us nothing

it is because it is setting to the windows object. So if we say

window.firstname

we get

Here is a perfect scenario to use the arrow function. The way to do it is to remove the function keyword and insert the arrow function

let person = {
  firstname:'',
  lastname: '',
  setname:function(name){
    let splitname = (n) => {
      let newarray = n.split(' ');
      this.firstname =  newarray[0];
      this.lastname = newarray[2]
    }
    splitname(name)
  }
}
person.setname('hello man');
console.log(person.firstname);

Now if we run the

person.firstname

we get hello because it does not have its own this it is automatically setting it for setname which is person object.