Confusing concepts of JavaScript
There are a lot of things in JavaScript that are a small part of it but makes a big difference. Let's discuss two such things here today.
Difference between null, NaN, undefined and undeclared.
Difference between "==" and "===".
1. Null, NaN, Undeclared, Undefined.
Null
Null comes up as an output when we explicitly assign the value of some variable as "null". When we intentionally want some variable to have no value, we assign it as "null".
Null's data type is object. It means that an object is basically empty and doesn't point to any memory address.
But then again in arithmetic operations, null behaves as 0. Also, when in a function, null will not take default parameter/available parameter, it will stay null.
Example
const a = 1 + null;
console.log(a);
const obj = {a: null};
const stringObj = JSON.stringify(obj);
console.log(stringObj); // {a:null}
// We have explicitly assigned the value of a as null;
function consoleLog(b = "hello")
{
console.log("Your output is : ",b)
}
const k = null;
consoleLog(k); // Your output is : null
// Even though there is an available value for k which can be "hello", it will still print null.
NaN
NaN(Not a Number) is nothing but an indication that whatever the outcome you got is not a legitimate number.
But a weird thing about NaN is that it's datatype is "number".
A good example of this is 0/0. 0/0 is technically undefined in layman terms but in logical terms, whatever the output will be, it surely is not a number even though we are operating it on valid numbers.
Example
console.log(0/0); // NaN
console.log(1+undefined); //NaN
Undeclared
Undeclared is simple error which comes when we use a variable before its declaration. For declaration of a variable in JavaScript, we use var, let or const. It is basically using an item without its existence.
Undeclared values give ReferenceError : variable_name is not defined.
Example
const a=10;
let c=a+b;
console.log(c); // ReferenceError : b is not defined.
Undefined
Undefined is a datatype in JavaScript. When you have declared some variable and haven't given any value to it but you are still using it, then we get this statement. This says that the variable exists but its value does not exist in the compiler.
On the very basic level, we can say that every variable's default value is "undefined" until we give some legit value to it.
Also, if you JSON.stringify an object with a key whose value is undefined, you'll get an empty object., because JSON doesn't have "undefined" value.
One difference between null and undefined is that undefined will take available value/ default parameter in a function.
Example
const obj = {a: undefined};
const stringObj = JSON.stringify(obj);
console.log(stringObj); // {}
function consoleLog(b = "hello")
{
console.log("Your output is : ",b)
}
const k = undefined; // Here k basically said that I exist but
// I do not have any value assigned to me as of right now.
consoleLog(k); // Your output is : hello
// Since there is an available value for k,
// the undefined variable took its value.
Now there's this weird similarity and dissimilarity between undefined and null
console.log(null == undefined); // true
// Since both null and undefined says that there is
// no value for the variable you're trying to access,
// this is true in double equals to comparison
console.log(null === undefined); // false
// Why is this false??????
// Let's look into our next topic...
2. vs =
When we see these two operators, the first thing that comes in our mind is comparison, but why are there two operators for the same purpose?
So, there are two types of equality : 1. Abstract (==), 2. Strict (===)
Let's see with an example
console.log(1 == "1"); // true
console.log(1 === "1"); // false
How is this possible? What is happening above?
==
So, basically when we do "==" comparison, something called type coercion happens in the background which is our implicit type conversion to a common data type between the operands.
Here, when we are doing 1 == "1", our JavaScript will first convert the data types of our operands into something common and then will just compare their values. So, even though one is string and the other is a number type, their values are same.
===
Now, when we are doing "===" comparison, firstly the data types of our operands will be compared and then if the data types are same, then only the values will be compared. There is no type conversion in "===".
That's why when we put 1 === "1", one is a string type and the other is number type, we got false as our answer.
Let's see another example for this.
console.log(0 == false); //true
console.log(0 === false); //false
Here we know that 0 is used to represent false boolean even though it is a number. "==" does the type coercion and then compared the value and gave answer as true whereas "===" did data type comparison and got different results.
So, to get the null === undefined : false, we know what is happening behind this, null's data type is an object which is not equals to undefined data type, simple!
So, these were tiny but confusing parts of JavaScript. I hope some of the fog got cleared through this article, do let me know if it was helpful for you, keep coding!
Let's connect at