Javascript concept you should know
Tags: javascript, programming, newbie
Published: 2022-01-10 13:44:40

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

```javascript

 let z = function () {

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

    var y = 2;
    let m = 3;

  }
  console.log(y)
  console.log(m)
}
z();
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/992a5fxc4q8uvaz0mhca.jpg)

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 
 
```javascript

 let z = function () {

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

    var y = 2;
    let m = 3;

  }
}
z();
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aa7i0hyokxkj2u2qmxh6.jpg)
 
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

```javascript

  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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h3bqbeogro9k9ucu4yr.png)

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 

```javascript
typeof(null);
  typeof(undefined);
```
typeof undefined gives undefined while typeof null gives an object.

##### The arrow function

```javascript
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
  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiomm2swbfvtpryu1qyv.png)

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

```javascript
window.firstname
```

we get 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6y2bnime4nrq4cn4ulji.png)

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 

```javascript
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 

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