Javascript Tricky Concept

Faria Abid
5 min readMay 8, 2021

Let me introduce some of the tricky topics of JavaScript. Hope you enjoy this article! let’s get started!

Truthy & Falsy value

Here false,’’(empty string), “”(empty string), 0(Zero), null, undefined, NaN(Not a Number) are falsy values and anything that is not mentioned above are truthy values.

For example:

Note: if we write 0 & false in a double quotation it will return true because these are string! So don’t be confused!

null vs undefined

We know that, null is a primitive value of JavaScript. Generally null means empty or not existing anything. It can be set explicitly. We can set null explicitly or represent it when any object value was there but presently absent.

On the other hand, undefined can occurs in many ways. Let me explain:

  1. If we declare a variable but is not initialized, then it will be undefined.
  2. Suppose we create an object. Now if we try to access any property which is not present in that object, then it will be undefined.
  3. Similarly, if we create an array, then try to access an element that is not present at all. Then it will be undefined. And so on

double equals (==) vs triple equals (===)

Double equals will check only the value equality. Double equals(==) is also called Abstract Equality Comparison.

Triple equals will check value and data-type. Triple equals(===) is also called Strict Equality Comparison.

For example:

Here, in firstExample is number and secondExample is string when checking the equality of value the answer returns true because it just checks the value not data-type!

When checking value and data-types at a time it returns false because value is equal but data-type are different.

Map vs Filter vs Find

In JavaScript, all of this are popular array method.

.map() execute the same code on each element in the declared array and return a new array with the updated element.

.filter() checks every element in the declared array to see if it meets a certain condition and returns a new array with the elements that return truthy for the condition.

.find() checks every element in the declared array to see if it meets certain criteria and returns the first element that is truthy for the criteria.

Scope

In JavaScript, the scope defines the clarity and accessibility of a variable or other resource in the source code.

Global Scope

Global scope in JavaScript is define the outside area of the function. Variable that declare inside the global scope can be accessible in any other scopes.

Local Scope

When we declare a variable inside the functions , it become local to the function and are considered as a local scope variable. A local scope can be classified as a function scope and block scope.

Function Scope

When we declare a variable in a function, the variable is accessible only within the function. We can’t access it outside the function. var is used to declare a variable for function-scope accessibility.

Block Scope

Block scope is the area with if condition or switch statement or for and while loops. Usually, we see a block with {curly brackets}. In ES6, two keywords are allow to declare variables in the block scope: let, const. Those are accessible only in the corresponding block.

Closure

In JavaScript, it is the most important concept. The closure is something that is widely discussed but still confusing. OK!! Let’s discuss the closure:

From a function when an inner function is being called or return, then a close environment is created. They keep a reference of an external variable. This is called closure. Example:

Here productCount function call an inner function. This inner function try to access an outer variable count. After accessing, product1 keep his own value and product2 keep his own value as they create a close environment. This is closure and this is how closure work.

Array slice()

  • The slice() method returns a copy of a small portion of an array into a new array.
  • Where it is selected from a start value and end value.
  • The start value is the index number of start & end value is the index of items in that array.
  • Hence the original array will not be changed.
  • Suppose, when we cut a slice of pudding it has a start & end area and we get the slice before the end area. Similarly, in the example below the index start value is 2 and index end value is 5. So we will get the slice of index 2 to index 4, the value of those indexes are 13,14,15.

splice() takes an array, remove some elements from a specific area returns a new array with specified start to end elements. But those elements are removed from the original array as well.

Bind

It is a method that allows an object to get access of a method from another object. It creates a new function that will make the this keyword inside the function to pass the parameter to bind().

Call

It is a method that is used to call a function containing this value and argument provided one by one as required. With this method, an object can get access to a method from another object.

Apply

It is a method that is used to call a function containing this value and argument as an array. With this method, an object can get access to a method from another object.

I hope you found this article helpful if you did give it a 👏.Thank you.. :)

--

--