Top 10 topics you must know in JavaScript

Map

The map function is used to loop through the array, runs the operation on its elements and returns a new array. This is just what it does.

var arr= [1,2,3,4]
var array=arr.map(element=> element*2)
console.log(array)

Here, we have an array named “arr” having 4 elements. We run the map function on each element of the array which is the “element” parameter. The function makes every element multiplied by 2 and inserts them in a new array. After traversal, it returns the new array, where all the elements are multiplied by 2.

Returned output — [2,4,6,8]

Note — It does not modify the original array. It traverses through the array and returns a new array.

Filter

Like the map, the filter function traverses through each element of an array and returns a new array. It does not modify the real array.

var arr= [1,2,3,4]
var array=arr.filter(elem=> elem*2)
console.log(array) // [ 2, 4, 6, 8 ]

But there is a difference.

Let’s look at the following 2 pieces of code,

var arr= [1,2,3,4]
var array=arr.map(elem=> elem>2)
console.log(array) // [ false, false, true, true ]
var arr= [1,2,3,4]
var array=arr.filter(elem=> elem>2)
console.log(array) // [ 3,4 ]

In the map function, when we enter a condition it will return whether the condition is true for a specific element of an array. For example, for the first element of array 1, the condition is false. So, it will return false. For 2 it is still false. For 3, it is true. For 4, it is true.

So, the final output is — [false, false, true, true]

In the filter function, when we enter a condition it will return those elements for those the condition is true. For example, for the first element of array 1, the condition is false. So, it will not return the element. For 2 it is still false. For 3, it is true so, it will return the element. For 4, it is the same as 3.

So, the final output is — [3, 4]

Reduce

Reduce is different from both map and filter. These two returns traverse through the array and return a new array. But Reduce traverses through an array and reduces it to one element.

Let’s look at the following code,

var arr= [1,2,3,4]
var value= arr.reduce(((acc, val)=> acc+val),5)
console.log(value) // 15

This reduce function takes a callback function and an initialValue, which is optional. The callback takes two parameters, the accumulator and the currentValue. Now if the initialValue is provided like the example, for the first iteration the accumulator is the initialValue and the currentValue is the first element of the array. Then it executes the code from the function, for this case adding the accumulator and current value and returns it.

For the next iteration, the accumulator is the returned value which is 6 and currentValue is the next element of the array which is 2. These two gets added inside the callback and returned as an accumulator which is 8. For the next iteration, the accumulator is 8 and the current value is 3, the next element. And it continues like this until the array is fully traversed.

The iteration of the array is given below,

Let’s look at another code,

var arr= [1,2,3,4]
var value= arr.reduce(((acc, val)=> acc+val))
console.log(value) // 10

Here the final output is — 15

There is another case where the initialValue is not set, the exception is the first iteration, where the accumulator will be the first element which is 1, and the currentValue will be the second element which is 2. These two gets added in the callback and returned, which is 3. In the next iteration, the accumulator is 3, the returned value and the current value is 3, the third element. These two gets added and returned. And it goes on until the whole array traversal finishes.

The iteration of the array is given below,

The final output is 10

The difference between having initialValue or not is the traversal number. The default accumulator value is the first element of the array so, the array traversal starts from the second element. If the initialValue is set then the traversal will start from the first element of the array.

includes()

In javascript, the includes() method is used to find whether one string may be found within another string or not. It returns a boolean value true or false. The syntax is given below —

string.includes(searchString, position)

From the syntax of includes() method, we can see that it takes two parameters. The first parameter “ searchString” represents the string which we will search in the string to find out whether it exists in that particular string or not. The second parameter represents the position from where the search will be processed. It is an optional parameter. If we don’t provide it then the search will be taken place from the starting index. Let’s see the demo of how the includes() method works —

//Demo of includes method
const str = "All that glitters is not gold"
const isIncluded = str.includes('gold')
console.log(isIncluded)//expected output : true

Demo of includes() method

As the second parameter isn’t given, the search will be taken place from the starting index. And here the search string is “gold” so it will search for gold. Since it is present in the string, it will return a true.

One thing you need to keep it in your mind is that the includes() method is case sensitive. It doesn’t treat lowercase characters the same way as uppercase characters. Let’s see the example of what happens if we use “Gold” instead of “gold” as a search string.

//Demo of includes method
const str = "All that glitters is not gold"
const isIncluded = str.includes('Gold')
console.log(isIncluded)//expected output : False

Case sensitive of includes() method demo

Here, “Gold” is used instead of “gold”, so it will return a false

substr()

The substr() method returns a portion of a string. It takes two parameters where the first one represents the index of the first character to include in the returned string and the second one represents the number of characters to take out from the string and it is optional.

The syntax is given below —

string.substr(start, length)
//usage of substr method
const str = 'JavaScript';
console.log(str.substr(1,3));//expected output :ava

Since the first parameter is 1 so the first character of the returned string will be a because index counts start with 0. The returned string contains three characters because the second parameter is 3.

Now you might be thinking of what will happen if I don’t put the value of the second parameter as it’s optional. Well, if you don’t give any value as the second parameter then it will take out the rest character of the given string. The demo is given below —

//Demo of substr method
const str = 'JavaScript';
const substr = str.substr(1))
console.log(substr);//expected output :avaScript

parseInt()

parseInt() function is used to accept the string and radix/base as parameters then converted it into an integer. The second parameter radix is optional and is used to specify which numerical system to be used as the first parameter. If the radix parameter isn’t given then the parseInt() function treats the given string parameter as a decimal value. parseInt() method converts floating number string into a decimal integer value. Let’s see an example —

Floating number to a decimal value

If the string doesn’t contain a number, it returns NaN as the string isn’t a number. The demo is shown in the following image below -

//Demo of parseInt() function
const str = 'Hello World';
const parseIntNum = parseInt(str)
console.log(parseIntNum);//expected output : NaN

Converting string to Integer

Through this method, we can easily convert binary, octal, and hexadecimal numbers into decimal number.

Let’s do convert a binary number into a decimal number.

//Demo of parseInt() function
const binaryStr = '11';
const parseIntNum = parseInt(binaryStr,2)
console.log(parseIntNum);//expected output : 3

Binary to Decimal

The picture above shows the string given “11” is converted into decimal number 3. That’s very easy to convert, isn’t that? Now one question may come to your mind is that what if the string doesn’t consist of binary numbers then what will be the output? Well, the answer to the question is that the output will be NaN. Let’s see this -

//Demo of parseInt() function
const binaryStr = '52';
const parseIntNum = parseInt(binaryStr,2)
console.log(parseIntNum);//expected output : NaN

The way we can convert binary numbers into decimal number is the same we can convert octal and hexadecimal numbers into decimal numbers.

every()

The every() method test whether all elements in an array doesn’t the test implemented by the provided function or not. It returns a boolean value. If all elements pass the test then it returns true, otherwise false.

//Demo of every() method
const isBelowThirty = (currentValue) => currentValue < 30;
const array= [10, 20, 25];
console.log(array.every(isBelowThirty));//expected output : true

In the above picture test all elements in the array whether it is below thirty or not. Then it found that all elements in the array pass the test so it returns true as an output.

What if only one element in the array doesn’t pass the test?

The answer to the question is that the output will be false. All elements in an array have to pass the test implemented by the function to get true as an output.

//Demo of every() method
const isBelowThirty = (currentValue) => currentValue < 30;
const array= [10,20,35];
console.log(array.every(isBelowThirty));//expected output : false

From the picture shown above, we can see that one element in an array doesn’t pass the test function, the value of an element is below thirty is not, the last element of the given array is 35 which is greater than 30. Since all elements don’t pass so the output is false.

One thing we have to remember while using this every() method is that if we call this method on an empty array it will return true for any condition. The demo is given below —

//Demo of every() method
const isBelowThirty = (currentValue) => currentValue < 30;
const array= [];
console.log(array.every(isBelowThirty);//expected output : true

The output is true as we call this method on an empty array.

forEach()

forEach() is a method that executes a provided call back function once for each array element in ascending order. There is no way to stop or break a forEach() loop other than by throwing an exception.

//Demo of forEach() method
const array= ['apple', 'Banana', ,'Orange'];
array.forEach(element => console.log(element));
//expected output : "Apple"
//expected output : "Banana"
//expected output : "Orange"

Since the elements in an array are 3, it invokes the call back function 3 times. The call back function isn’t called for index properties that have been deleted or are uninitialized.

//Demo of forEach() method
const array= ['apple', 'Banana', 'Orange'];
array.forEach(element => console.log(element));
//expected output : "Apple"
//expected output : "Banana"
//expected output : "Orange"

The missing value between Banana and Orange didn’t invoke the callback function as there is no operation for an uninitialized value in forEach() method.