10 Confusing things you should know as a javascript developer !!
Javascript is called the weirdest language. But if u really understand how it works you will love the language. Besides these things are also important for interview questions. If you are preparing for an interview or want to learn and think in a javascript way, this blog is for you.
What will we learn?
Truthy Vs Falsy | Null vs Undefined | == vs === | ForEach vs Map Method| Find vs Filter method | Array Methods (Slice and Splice) | Object Methods ( bind, call . apply ) | Scope and Block Scope | Window variable and Local Variable | Async And await Function
Truthy Vs Falsy:
Truthy: Truthy are expressions which evaluates to a boolean true value and falsy evaluates to a boolean false value.
How can we get truthy and falsy values in our javascript? There are several ways we can get these values. Some of the examples are shown below.
Falsy :
- Set 0 to a variable.
Here, we see that we set a variable value to zero and we are getting false. But if we set zero as a string then it will be true.
2. Set empty string “” to a variable without space.
But if we add space on an empty string then javascript will consider it as a string of length 1. Thus, it will be true. See the example below
3. Set undefined to a variable.
4. Set null to a variable.
5. Set NaN to a variable :
But if we set null as trying it will be truthy.
6. Set false implicitly to a variable:
but if we set this as a string, it will be truthy.
okay, I think we got enough knowledge about truthy and falsy. Now we will discuss another confusing thing that is “undefined”. When and how will we get this “undefined”? Let’s see some examples:
Different ways to get “undefined” in javascript
Set undefined implicitly to a variable and consoling it :
Left a variable without assigning a value and consoling it :
Passing fewer parameters to a function and console all the parameters in that function :
But if you do something with the parameters and console it.you will get NaN this time.
Accessing property of an object which does not exist :
Similarly, Accessing element of an Array which does not exist :
So, these are some ways of getting “undefined” in javascript.
Now it’s time to discuss the difference between the double (==) operator and (===) operator.
Difference between double (==) operator and (===) operator in javascript.
In JavaScript, the double and triple equals are used for comparison between two operands.
Double Equals (==) checks for value equality only. It inherently does type coercion. This means that before checking the values, it converts the types of variables to match each other.
But, Triple Equals (===) does not perform type coercion. It will verify whether the variables being compared have both the same value AND the same type.
In short: == inherently converts type and === does not convert type. Let us see some examples to clarify these things.
Using double operator :
Using triple operator:
If you do not want your program to show unexpected values ,you should get used to with “===” operator.
Difference between forEach and Map Method:
In modern javascript, we are using these two methods quite a lot. we can implement forEach or Map, anyone for looping through our elements. but there is a small difference between these two.
Map returns an array of elements whereas forEach does not. This means, after the end of the looping procedure you will get an array of elements that are satisfied by the logic, but you will not get an array from forEach. so what forEach does? forEach simply prints all the elements of that array that matched the logic.
So when to use what? If you need the array after the end of the loop and do something with it use Map but if you just want to print or send an individual element as a parameter to another function go for forEach. Let's see examples :
forEach does not return anything:
Map returns an array
So you might be thinking of what is the use of getting the same array. Well you can do method chaining with map and filter and get all the expected elements in an array but with forEach you can not. see these two examples :
Find vs Filter in Javascript
Find returns only one element (first matched element) that matches the logic you put, whereas Filter returns an array of elements. Let us see the examples:
Using Find we got the first element that matched the logic:
Using filter we got all the elements that matched our logic:
Slice vs Splice in Javascript
The slice() method returns the selected elements in an array, as a new array object. The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.
Note: The original array will not be changed.
Let us see an example :
The splice() method adds/removes items to/from an array, and returns the removed item(s).
Note: This method manipulates the original array.
we can also add items in the removed place with the splice() method. See the example below:
Differences among bind(), call() and apply() :
When we want to use a method from another object to our object we can use bind or call or apply. Bind() is considered less efficient. There are some differences between them. Let us see the methods one by one.
bind() method returns a new function, when invoked, has its this sets to a specific value. See the example below: We have an object RichMan
and we have another object called PoorMan and if we want to use the method chargeBill from RichMan we can use bind() method like this :
In the bind() method, we have to declare a variable and assign the method to it and then call it.
If we want to use the call() method for the above example, we can use like this :
Call() :
We can do the same thing using the apply() method.
apply() :
The difference between call and apply is if we use the call() method we have to pass parameters separated by a comma, and if we use apply() we have to pass an array with parameters.
