JavaScript Tricky Concepts

6 min readNov 5, 2020

Here are some of the JavaScript tricky concepts that can be quite confusing.

A website with accessibility means that web tools and technologies are properly designed and coded so that people with disabilities can use them.
More specifically, people will be able to perceive, interpret, navigate, and understand throughout the website just like a normal person.
Web accessibility is not only helpful for disabled people, but also for those people who are aging, temporary disabilities, smaller screen devices, or people with low contrast vision, etc.

There are many ways to implement web accessibility features on websites. Some of them are:-

Putting caption in videos for people who cannot hear or other disabilities.
Choosing a good color combination or web design for people with challenging vision.
WAI-ARIA document contains techniques for building fully accessible JavaScript widgets.
It is better to use HTML semantic tags as it will make the website more meaningful
In react, react fragment can be used to group elements and make it easier to understand.

2. Truthy and Falsy values

Some places or examples where values are said to true or false:-

In an, if statement, where it says if a value is there then the condition is true or else false

If a variable has any kind of value or number other than 0 then the value is true, otherwise false.
If there is an empty string with no value or text written, then the condition is false, but if it has a value or even whitespace, or written 0 and false within a quotation, then the condition is true.
If a variable is not defined, then the condition is false.
If a variable is declared with the value undefined, null, or NaN, the condition is false.
If a variable is declared with An empty array or object, then the condition is true, as there's still something inside.

3. Null vs Undefined

Undefined

Undefined is when you don't define something, so undefined is a negative or falsy value, that is, for instance, you declare a variable without giving any value to it, then the output will be undefined.
After you declare a function without typing return and call that function, you’ll get undefined or when you declare a function and not mentioning what to return, then also you’ll get undefined.
If in a function you give 2 parameters and while calling the function, you pass only 1 parameter then the value for that parameter will be undefined. To solve that, you can set a default value for that parameter.
If you try to access a property in an object that is not declared in the object, you’ll get undefined.
If you declare a variable setting the value to undefined, then the output of course will be undefined.

Null

Null is when a variable or something doesn’t have a value or it is non-existing, then it is said to be Null.
Usually, developers explicitly set something to null as they existed once but not anymore.

4. Double equal (==) vs Triple equal (===), implicit conversion

Double equal (==)

Double equal in a if statement or anywhere used checks only the value and not the type (like number or string, etc).
Checking with double equal, if a variable with number 2 is compared with a variable with a number 2 in a string, then the condition will be true as the values match.
Checking with double equal, if a variable with number 1 is compared with boolean true, then the condition will be true, or else false if the number 1 is compared to boolean false.
Double equal has it’s own algorithm for comparing values as they implicitly convert things on their own to compare like the above boolean and number with a string example.
Even though the number 2 is in a string they convert it to a number and sees the value is the same when comparing with the other number 2, that’s why the condition becomes true.

Triple equal (===)

Triple equal in an if statement or used elsewhere checks both the value and type (like number or boolean, etc).
Checking with triple equal, if a variable with number 2 is compared with a variable set with a number 2 in a string, then the condition will be false as one is a number and the other is a string, different type.
Checking with triple equal, if a variable with number 1 is compared with boolean true, then the condition will be false as one of them is number and the other is a boolean, different type.

5. Map, Filter, and Find

Map

Map is a smarter way to loop through each of the elements in an array and do something with them, instead of using for loop
It will map each of the elements in an array as well as give a new array as an output.
Inside map, function can be given without a name with max 3 parameters. The parameters are an element, index, and an array.

Filter

Filter can be used on an array to filter out the ones needed like finding a bigger number or smaller number, then return a new array with the filtered elements.

Find

FInd is new ES6 and find will find an element in a list of items in an array, then it will return only 1 element that matches at first.

6. Scope, Block Scope, Access outer scoop variable

If any variable is declared inside a function, then that variable will only be available inside the function and not outside. This is one kind of scope.
If inside the function, if statement is used, and in that statement (which is inside the curly brackets) let or const variable is declared, then that variable will only be accessible in the if scope and not outside, like in the function.
Just like that, if let or const is declared inside a for loop, then that variable will only be available in for loop scope.
If inside the function, if statement is used, and in that statement var is used, then that is variable het hoisted to the parent element will be accessible anywhere as this becomes a global variable.
You cannot console log out let or const before initialising, but you can do for var, just that the value will come as undefined.

7. How to find the highest number from an array