JavaScript features that confuses beginners

Hello my gorgeous friends on the internet, in today’s article we are going to talk about some of the features of JavaScript that a bit tricky as a result make beginner's confused. I believe after reading this article you’ll feel less confused, So let’s get started

Null vs Undefined

In javaScript’s data types there are two data typed that says ‘nothing’. But why two data types available there to just say ‘nothing’ ? yeah they says nothing but there are slight different between null and undefined. undefined says that there is no value defined but in future may be there would be some value on the other hand null explicitly says ‘nothing’, null used to make variables value clear by updating the variable with the value null

Global Variable & Scope

In order to read & execute javaScript code, javaScript engine need some space to store the code first. and in order to store our code javaScript uses a Object variable Known as Global variable. in browser the global variable name is window and in node.js the global variable name is global. All of our code is stored in global variable (which is a object) before execute the code.
and code that is not written inside any function is globally scoped, let’s say you have a variable in your code which is not defined inside any function is globally scoped that’s mean, you can use that variable anywhere from your code.

Loose equality vs Strict equality (== vs ===)

There are two ways to check equality between two value in javaScript, one with double equal (==) operator and other one is with triple equal (===) operator, as there are two operator available for checking equality for two values in javaScript it confuses beginner learners, but there are slight different between two the double equal operator is known as loose quality because it checks that if only value is same whether it’s string type or number type on the other hand triple equal operator known as strict equality operator because it’s not only checks the value of two values but also checks that if both values type are same, let’s see the differences in code

console.log(3 == "3") // true
here it's logging true because we are using loose equality operator which checks only value not the type that whether the two same or different type like here one is number type and another value is string type
console.log(3 === "3") false
here it's logging false because we are using strict equality operator which not only checks that is the values of both same but also checks the type, here one is number type and another is string type that's why logging false in console

Truthy vs Falsy

When JavaScript expects one type of value but we give it another type of value javaScript try to coerce the value to the expected value like in a place javaScript code is looking for a string value but we are giving it a number value, JavaScript coerce it to string by default which is known as implicit coercion because we are not explicitly not coercing a value type to another but javaScript automatically doing it. and when JavaScript looks for a Boolean value which is whether true of false but we give a non-boolean value javaScript converts it to true or false depending on value but this true, false is not called actual Boolean value but called truthy or falsy. So what are the values that converts to falsy? let’s see

false
0
-0
0n
"", '', `` (empty string)
null
undefined
NaN

There are the value that coerces to falsy if passed in place of Boolean and what are the values that coerces to truthy? It’s simple, what is not falsy is truthy.

Addition Operator (+)

Addition Operator in javaScript a bit weird because it’s not only do arithmetic operation but it concatenates strings. as javaScript try to coerce type of value automatically sometimes javaScript don’t know whether the addition operator should act for string concatenation or addition, for this reason addition operator behavior sometime seems pretty confusing. let’s breakdown the confusion

var sum = "3" * 3 // 9
even we did multiply one string with a number where it should be number but still it's working fine because javaScript thought string is not able to do multiplication, let's convert it to number. that's why it's working
but when we will use addition which also works for concatenating string, instead of doing math operation it will convert to string and concatenate
var sum = "3" + 3 //  33
instead of doing math operation, giving the result 6 it's giving 33 because it's concatenating 

So next time when you need to do math operations make sure you are doing with real numbers or explicitly coerce it to number with Number() method.

NaN

NaN is a very simple concept but might be confusing for developers who’s coming from other programming language. NaN means Not a Number. We know that javaScript don’t throw error messages even we try to do math operations with the string type values, but here is a thing to note, javaScript will try to convert string to number if only the character inside string is only number but if there in string different character than number characters javaScript will say Nan! because it’s not able to do math operation like here

var sum = 3 * 'car'
we are multiplying 3 with car which is not possible at all 😅, as a result javaScript will say NaN in console if we console the variable 

One thing to note that NaN also a type in javaScript