Photo by James Harrison on Unsplash

Top JavaScript Confusions

Closure Shutting Down Your Head?

JavaScript closure is one of most the important thing which confuses developers a lot. What is closure? Closure means calling a function under a function scope or block “{}”. How?

function(){
    function()
}

Closure needs when we assign the same variable name in both global and function block.

let product = 0;
const addProduct = () => {
     let product = 0;
     product += 1;
}
addProduct();
addProduct();
addProduct();

What do you think the output? 3? Nope. The output will be “0”. It is because JavaScript is not sure which product will he calculate. That’s why he keeps it default value “0”. So lets make the “product” from global scope to local scope or block scope.

const addProduct = () => {
     let product = 0;
     product += 1;
     return product;
}
addProduct();
addProduct();
addProduct();

Now what will be the output? 3 right? Nope! It will 1. It’s because we are not adding here rather we are resetting the function with every call. This is where we need closure. Look at this example.

const addProduct = () => {
     let product = 0;
     function(){
         product += 1;
         return product;
     }
}
addProduct();
addProduct();
addProduct();

Now it will return 3, here the nested function is adding to the local variable every time “1” with every function call.

If We Have Closure Then Why Do We Need Recursive Function?

Well this is very confusing because both are calling functions under a function block. But, recursive calls the parent function in it with it’s parameter. This is actually the alternate of iterative looping. If you need to loop through your block then it is a alternative way to do that.

const kickMyself = leg => {
      const kickMyself = withTwoLeg => {
           ...
      }
}  

The function will continue to call untill it completes kicking with two legs. Look at this example. It is a factorial calculator with for loop.

const factorial = number => {
    let init = 1; 
    for (let i = 0; i < number; i++) {
        const each = number[i];
        init = init * each;
    }
    return init
}
console.log(factorial(10));

Now take a look a how to re-write with recursive function

const factorial = number => {
    if(number < 0){
        return -1;
    }else if(number == 0){
        return 1;
    }else{
        return number * factorial(number - 1);
    }
}
console.log(factorial(5));

Here the factorial function is calling himself inside the block untill factorial(0).

Ever Declared Empty Loop With Condition?

Let’s have a fun..

for(let i = 0; i < 10; i++) {
  /* ... */
}
console.log(i);

What will be the output? Undefined? Nope. It will output 10. It is because of variable hoisting where the loop retains it’s last value after completing the loop. So it doesn’t matter that you have put value in the loop, if it has the condition then it will return the lat number it faced.

The “==” Magic and Hell!

The assigned operator “==” never looks what the type it is, only looks the value. So it returns true in some wired cases.

console.log(2 == "2") // true

And also for these logics

console.log(false == '0'); // true
console.log(null == undefined); // true
console.log('' == 0); // true

Trouble With 3 Timing: setTimeOut, setInterval, clearInterval

Now the main problem is with the setTimeOut and setInterval. If you want to execute once after loading the page then you have to use setTimeOut and if you want to execute continuously after some moments then you have to use seInterval.

clearInterval is to stop the interval.

setInterval(logTime, 1000); 

setTimeout(function() {      
    logMessage(msgValue);
  }, 1000);

Do You Use “Use Strict”?

This is default debbugger in your application. It will automatically solve issues for the functions who are causing trouble to your app. It solve the global hoisting or scoping problems means it prevents accidental globals. It also makes eval() safer means it controls the event bubbling.

The parseInt Issue

Hey, wanna see some magic? parseInt will help you done that.

console.log(parseInt(0.000001)) // 0
console.log(parseInt(0.0000001)) // 1
console.log(parseInt(0.000006)) // 0
console.log(parseInt(0.0000006)) // 6

If five floating “0”, it will return 0. If six floating “0”, it will return the last value (1,6). Actually it is the JavaScript lexicography where it is follow the standard of Java, C++, C etc. The bytes are very important here. it counts every byte and try to output with it.

Try To Add Two Array?

If you try to add two array collection like below, what will happen?

[1, 2, 3, 4] + [5, 6, 7, 8]

First of all if you add two arrays, then it will return the answer in string “ ”. So your expectation is may be "1,2,3,4" + "5,6,7,8" but the fact is

"1,2,3,45,6,7,8"

It happens because JavaScript create both of them into strings before you add.

Wanna See Banana Magic?

Suppose you have a code like below.

"b" + "a" + + "a" + "a"

This example is almost near to the last one. So your expectation is

ba aa

But no, look at that (+”a”), if you put a + before a string JavaScript returns it as a number. And “a” is not a number. So?

tadaa!! baNaNa

Min_Value Is Greater Than “0"?

Number.MIN_VALUE // 5e-324 
Number.MIN_VALUE > 0 // true

How? because if you want something smaller than “0” you need a negative value. But “5e-324" is not negative, it is the lowest positive value as possible but greater than “0”