5 Array Methods You Should Know 🚀

Array methods are used in almost every JavaScript project nowadays, which also means that everybody should know the important ones. So I will give you 5 array methods that you should know.

So let's get started!!

.forEach

This is a common one and a vital one. The .forEach method executes a given function on every element from an array. So I would try to explain it through some code:

const nums = [1, 2, 3, 4, 5, 6, 7, 8];

nums.forEach(arrFunc);

function arrFunc(item, index, arr) {
  console.log(item);
}

// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8

So as you can see I created an array nums and then called the .forEach() method and then declared a callback function called arrFunc(), so this is where it all happens, you see the .forEach() needs 3 parameters, first one is item which are the elements which in our case are 1, 2, 3, 4, 5, 6, 7 and 8, then the second parameter is index which is the index of the item in the array and second is the arr which is the array itself, although you don't use this parameter often. So in the callback function, you can just type the things you want with every single element on the array. It is like a for loop on the base but not much like it.

Keep in mind that you can use the .forEach() method with arrow functions, which is always the recommended way:

const nums = [1, 2, 3, 4, 5, 6, 7, 8];

nums.forEach((item, index, arr) => {
  console.log(item);
});

.concat

The .concat method allows you to merge 2 or more arrays together without modifying the arrays but instead creating a new one.
It is a bit easy and useful and it is as simple as it sounds in code too. So let's say we have two arrays:

const x = [10, 20, 30];
const y = [40, 50, 60];

So if you want to merge them you can do that easily with this method, like this:

const z = x.concat(y)

// Now If you console.log the z array
console.log(z)
// You will receive [10, 20, 30, 40, 50, 60]

If you want to concat more than 1 arrays, you can just add it as the second parameter and if more you can add more parameters, like this:

const z = x.concat(y, q, v)

You can also use .concat method like the .push method like this:

const x = [10, 20, 30];

const z = x.concat(40);

console.log(z);
// Output: [10, 20, 30, 40]

.includes

The .includes method allows you to find if an element is included inside an array. Let's try understand it with code:

const names = ["Garvit", "Lorenzo", "Adam"];

const outputRes = names.includes("Adam");

console.log(outputRes);

// Output: true

So here as you can see we have declared an array called names and we have the names, Garvit, Lorenzo and Adam stored in them now in the next line we declared a variable called outputRes in which we typed if the array names includes "Adam" then the output will be true, prooving that the array includes that and if we wrote something like, "John" the output will be false prooving that "John" is not in that array.

.splice

The .splice method allows you to remove or replace an existing element of an array, simple right? Let's try to learn more about this in code:

const numbers = [1, 2, 3, 4, 5, 6];

numbers.splice(2, 3);

console.log(numbers);

// Output: [1, 2, 6]

So as you can see I have created an array called numbers and entered some numbers in it and then I typed numbers.splice(2, 3), so here the first parameter is the starting index from where we want to start removing elements which in our case was 2 (3) and then the second parameter that we passed was that how many elements we want to remove which in our case was 3 (3, 4, 5).

Now take a look at this:

const numbers = [1, 2, 3, 4, 5, 6];

const modifiedArr = numbers.splice(2, 3);

console.log(modifiedArr);

// Output: [3, 4, 5]

Not much of a difference, right? but still, the output has changed, that is because we have stored the splice array in a variable, so It is like putting all the deleted element in the modifiedArr.

If you want to replace the existing elements, you can just add the elements as another parameter:

const numbers = [1, 2, 3, 4, 5, 6];

numbers.splice(2, 3, 7, 8);

console.log(numbers);

// Output: [1, 2, 7, 8, 6]

.reverse

The .reverse method allows you to reverse an array, this is an easy one, lets see how that works in code:

const numbers = [1, 2, 3, 4, 5, 6];

numbers.reverse();

console.log(numbers);

// Output: [6, 5, 4, 3, 2, 1]

References:

Florin Pop's Array Methods Playlist
MDN Web Docs

⚡️ Giveaway ⚡️

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

Thank you very much for reading this article.

PLEASE LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter

You Should also check