To a lot of Beginners JavaScript can be daunting and difficult to understand. Arrays are a crucial part of any programming language and used in almost every software on the web. This article aims to simplify the complexity of array methods and help beginners have a grasp of array methods quickly:
1. Concat ( )
This method is used to merge two or more arrays and returns a new array, without changing the existing arrrays.
const arr1 = ["a", "b", "c"]
const arr2 = ["d", "e", "f"]
console.log(arr1.concat(arr2)) //["a", "b", "c", "d", "e", "f"]
2. Includes ( )
This methods check if an array includes the element that passes the condition and returns true or false.
const arr = [1,2,3,4,5,6]
console.log(arr.includes(2)) //this returns true
console.log(arr.includes(9)) //this returns false because 9 is not in the arrray
3. Join ( )
This method returns a new string by "joining" all the arrays of the elements seperated by the specified operator. The specified operator is the argument passed into join("-") here "-" is the specified operator.
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.join("-")); //this returns "1-2-3-4-5-6"
4. Reduce ( )
This method is a bit confusing and personally it took me a while to understand it. If you don't understand at first read it again and try to code it yourself without looking at the article.
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.reduce((total, current) => total + current, 0));
Here total is the initial value of the first argument i.e total So we set total=0; This is done outside the call back function as seen above. Then this loops through the array and adds each elements to the accumulated given total=total+current, as the loop continues till the end we get the total sum of the array.
5. findIndex( )
While I was learning react I confused this method alot of times with indexOf methods however they are closely related but different. One accepts a call function while the other accepts a single argument.
This method returns the index of the first element in an array that pass the test in a testing function.
const arr = [1, 2, 3, 4, 5, 6];
const index= arr.findIndex((age) => age > 4);
console.log(index); //This returns 4 because 4 is the first element in the array that satisfies the condition
6. indexOf ( )
This method returns the index of the first occurrence of the specified element in the array, or -1 if it is not found.
The Major difference between findIndex and indexOf: findIndex( ) takes in a function as an argument while indexOf( ) takes in a single value as the argument both return an index. However they return -1 when not found.
const arr = ["man", "boy", "girl", "woman"];
const index = arr.indexOf("man");
console.log(index); //This returns zero because the index of man is Zero
7. map ( )
The map() method in JavaScript creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method. Generally map() method is used to iterate over an array and calling function on every element of array.
const arr = [1, 2, 3, 4, 5, 6];
//multiplies each element of arr by 2
const newArr = arr.map((eachArrValue) => eachArrValue * 2);
console.log(newArr); //[2,4,6,8,10,12]
8. Filter ( )
The filter() method creates an array filled with all array elements that pass a test (provided by a function). filter() does not execute the function for empty array elements. filter() does not change the original array.
const arr = [1, 2, 3, 4, 5, 6];
//this returns on values >2
const newArr = arr.filter((eachArrVal) => eachArrVal > 2);
console.log(newArr); //[3,4,5,6]
Conclusion: In this article we discussed various array methods and how they can be implemented. This methods are used in almost every Software Running on the web. I hope you have been able to learn one or 2 from this article. However there are other methods such as shift, pop, unshift etc.
Thank you for Reading, Happy Coding!