10 javascript tricky topics that you should know

Hello programmer, today I am going to talk about some javascript tricky topics. So, let’s get started.

Difference between Null vs Undefined

In javascript, null means nothing and its type is an object. So, it’s a valid javascript assigned value. On the other hand, undefined means, you declared a variable but didn’t assign a value so it will throw an error called undefined. Undefined is a data type in javascript. See the example below for a better understanding.

const name;
console.log(name); // undefined
console.log(typeOf(name)); // undefined
const friends= null;
console.log(friends) // null
console.log(typeOf(friends)) // object

Difference between double equal(==) vs triple equal(===)

const a = 125;
const b = '125';
// double equal
 if(a == b){
  console.log('it's type is same') // result it's type is same
} else {
  console.log('it's type is not same')
}
// triple equal
if(a === b){
  console.log('it's type is same')
} else {
  console.log('it's type is not same') //result it's type isnot same
}

In the above example, we see that when we use the double equal it compares only the value not type so it logs the output as “its type is same”. On the other hand, when we use the triple equal it compares not only the value but also the type. So, it gives the output like that “its type is not same”. Is it clear?

Scope in javascript

Scope In javascript is the accessibility and visibility of a variable. In javascript, there are three types of scope. They are 1) global scope 2) function scope/local scope 3) block scope.

Global scope is declared a variable above the code which can be called anywhere of the codes. for example

const a = 5;
function myfunc(){
  console.log(a) // output: a = 5
}
console.log(a) // output: a = 5

Functional scope/Local scope means you declared a variable inside a function that can only be accessible to that function. Example

function myfunc(){
  const a = 5;
  console.log(a) // output: a = 5
}
console.log(a) // output: ReferenceError: a is not defined

When you declared a variable inside curly braces that will be a block scope variable. So, it can not access outside of this block. See the code below

{
  let a = 5;
  console.log(a); // output: a = 5
}
console.log(a) // output: ReferenceError: a is not defined

let, const vs var

Let and const are introduced in es6. Let and const are block scope variables because if we use let const inside a curly brace it can not be accessed out of this block( a pair of curly braces is called a block). For example :

function myfunc(){
  const a = 5;
  console.log(a) // output: a = 5
}
console.log(a) // output: ReferenceError: a is not defined

On the other hand, var is a global scope variable because if we use var inside a curly brace it can be accessed anywhere of the codes. (it happens for javascript hoisting).

function myfunc(){
  var a = 5;
  console.log(a) // output: a = 5
}
console.log(a) // output: a = 5

Javascript Hoisting

Have you ever been to a car factory? where cars are hoisted by cranes on top of the floor. Javascript hoisting does the same thing. Let’s know what is javascript hoisting. Hoisting is a javascript mechanism where variable and function declarations are moved to the top of the scope before code execution. As a result, if we call a function before its initialization javascript doesn’t give an error rather it will give a warning that the function is declared but its value is not assigned yet. One matter keeps in mind that the javascript hoisting mechanism only hoists the declaration, not the value. See code the code for better understanding.

// using test before initialization
console.log(test);   // output: undefined
var test;

Javascript Closure

When you declare a function inside a function you created a closure. The inner function is the closure. So, it can use a variable that is declared in the outer function. Because they make a closed environment. See the example below for a better understanding.

function outerFunction () {   
   const outer = "hello programmer"
   return function innerFunction() {     
     console.log(outer) // output: "hello programmer"
   }
}

Difference between Call and Apply

When we want to use an object method from another object we can use the method by using bind, call and apply. Bind is separate from call and apply. But Call and Apply works similarly. So, it’s a tricky question what is the difference between call and Apply.

To use a call method, we have to pass the arguments by comma separation. see the example.

const person1 = {
  firstName: "bill",
  lastName: "gates",
  salary: 5000,
  getFullName: function () {
    return this.firstName + " " +this.lastName;
  },
  monthlyCost: function (market, tax,electricityBill,schoolFees){
        this.salary = this.salary - market - tax - electricityBill - schoolfees
      return this.salary;
  },
};
const person2 = {firstName: "elon",lastName: "mask",salary: 8000,};
const person2tax = person1.monthlyCost.call(person2, 1500, 1500, 1000, 500);
console.log(person2tax); // output: 3500

But in Apply method, arguments should be passed in an array. For example:

const person1 = {
  firstName: "bill",
  lastName: "gates",
  salary: 5000,
  getFullName: function () {
    return this.firstName + " " +this.lastName;
  },
  monthlyCost: function (market, tax,electricityBill,schoolFees){
        this.salary = this.salary - market - tax - electricityBill - schoolfees
      return this.salary;
  },
};
const person2 = {firstName: "elon",lastName: "mask",salary: 8000,};
const person2tax = person1.monthlyCost.call(person2, [1500, 1500, 1000, 500]);
console.log(person2tax); // output: 3500

This is basically the difference between call and apply. Is it clear?

Javascript global variable

A javascript global variable is declared outside the function or as a window object. So that it can be accessed from anywhere in the code. for example.

var value = 50; // global variable
function a() {
   alert(value)
}
function b() {
   alert(value)
}

Window

The Window represents the browser window that we see in the browser. It is called the browser object model or BOM. BOM allows javascript to talk to the browser. The window object is supported by all modern browsers. All global javascript variables, objects, functions automatically become the member of the window object. Variables are the property of a window object. Functions are the method of a window object. Event the document object(HTML DOM) is also the property of the window object.

Implicit conversion

When javascript operates in the wrong data type, it will try to convert the value to the right data type. So, sometimes javascript gives an output, which is not expected. See the example below for a better understanding.

const add = 20 * [6];
console.log(add);  // output: 60

Here [6] is converted to a number. And give the output as number 60.

So, guys, this is the end of today.