DEV Community

loading...

5 Array Methods You Should Know 🚀

Garvit Motwani
Web Developer 👨‍🎓 13 👨‍💻 HTML, CSS, JavaScript, ReactJS
Updated on ・4 min read

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
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

.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];
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

.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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

.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]
Enter fullscreen mode Exit fullscreen mode

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

by my friend @devlorenzo

Subscribe to our newsletter to receive our weekly recap directly on your email!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

Happy Coding.

Discussion (1)

Collapse
hdenizd profile image
HDenizD

Why is reverse important? Never used ist tbh.

Forem Open with the Forem app