JavaScript Tricky Concept!
By: Asima Chowdhury
Tags: Find, Filter, Map, JavaScript, React Hook

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

JavaScript

React Hook:

React hook is well known in today’s world! We can use the react hook only in the function component. Hook cannot call inside loops, conditions or nested functions. Remember that hook should always be used at the top of the React functions.

1. useState

useState is used when any changes occur in a state. Such that when we see a post in fb we may give a like or not ,in this situation the state of like button we can say state. Maybe it can change or not.

Syntax:

const [value, setValue] = useState(defaultValue);

For example,

example of useState() hook

Here, state() and setState() are two inner functions, “state” will return a local variable & “setState” will set the local variable to the parameter passed into it.

In this example at first the initialName is inserted in a local variable. When setState is called it will accept newName & then set it in the local variable. And we will get newName .

2. useEffect

React hook provides us useEffect(). useEffect() accepts a function as an argument. The function runs when the component is first rendered and on every re-render/update. It is great for accessing 3rd party API.

For example,

example of useEffect

Here , clicking the button the name will be changed as an effect of useEffect.

3. 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:

example of Truthy & falsy value

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

Truthy values

4. Undefined Vs Null

Undefined is when we declare a variable and value has been not assigned yet. Null means empty or non-existence value and null should be assigned.

For example,

undefined Vs null

Here, we want access to an index of 11 which is not available in numbers. That time it gives undefined. A name variable is declared but value not assigned.

5. 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,

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

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.

6. 3Powerful array functions:

If any one asked a developer which array functions are powerful the answer will be most probably map, filter ,find!

map

map returns us a same length of array and original array will not change

example of map()

filter

filter returns us a new array where passed condition is satisfied or true.

If the passed condition is not satisfied or false then that element will be skipped.

If there are no elements in the original array that return true then an empty array will be returned.

example of filter()

find

find returns the first items in an array where passed condition is satisfied.

example of find()

The Syntax of map/filter/find:

function(currentValue, index, arr)

Here,

currentValue = Required. The value of the current element.

index = Optional. The array index of the current element.

arr = Optional. The array object the current element belongs to.

7. Array slice()

The slice() method returns a copy of a small portion of an array into a new array.

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.

slice of pudding

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.

example of slice()

8. Array splice()

The splice() method will add item in an array or remove item from an array.

Hence the original array will be changed.

Syntax:

array.splice(start, howmany, item1, ….., itemX)

start = The index from which it will start changing the array.

howmany = The number of items to be removed.

item1, ….., itemX = The new item/items to be added to the array

For Example,

example of splice()

In this example, the starting index is 2 & removed item value is 5, so from index 2 it will remove the next 5 items. We can see the original array is changed after splice().

9. global variable, local variable

JavaScript has two types of variable — global variable & local variable.

When variables declared and initialized outside of any function it becomes global variables. We can access and modify global variables from anywhere in the program.

example of global variable

When variables are declared and initialized inside a function it becomes local variables. We cannot access and modify local variables outside the function declaration.

example of global variable

10. call(), apply()

The call() method that can be used on different objects and takes arguments separately.

example of call()

The apply() method that can be used on different objects and takes arguments as an array.

example of apply()

I hope you found this article helpful if you did give it a 👏, and do share it with your friends.

Thank You!!! 🙂