8 must know JavaScript array methods.

8 must know JavaScript array methods.

Introduction

Nowadays, many developers love to use JavaScript to develop their solutions. In this article, I’ll discuss about 8 array methods/functions that I love to use and think that you should be aware of. So… let’s get started😎.

01. map( )

This is one of the useful array methods in my knowledge. What it does is, this method iterates all through the array and creates a new array of values from the original array. If it’s confusing to understand, imagine that there is an array called “cars”. It has a key, value pair of brand and model. Using the code below, you can understand what I am saying.

const cars = [
{ brand: "Toyota", model: "axio" },
{ brand: "Nissan", model: "GTR R35" },
];
const carBrands = cars.map((car) => {
return car.brand;
});
console.log(carBrands);
// expected output: Array ["Toyota", "Nissan"]

I think now you have an idea how a map() method works. Let’s move into the next method.

02. filter( )

This method looks similar to the map() method. But with this function, you can give a condition/criteria and it will return a new array that falls under the given condition/criteria. Take a look at the below code snippet and you can understand the behavior of the filter() method.

const names = ["James", "Freddie", "Johnson", "Nelson", "Jenny", "George"];
const result = names.filter((name) => {
return name.length > 6;
});
console.log(result);
// expected output: Array ["Freddie", "Johnson"]

What happens in the above code snippet is it filters out the “names” array under the condition of “name.length > 6”. So, inside the method, it checks each value and returns the values that satisfy the given condition. Pretty straightforward, right? Let’s move on.

03. forEach( )

I’m sure that you know the for loop. If I say this is the simplest type of for loop, I think you’ll agree with me after getting to know about this method. So, take a look at the given code snippet.

const array = ["a", "b", "c"];
array.forEach((element) => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"

When using the forEach() method, it executes a provided function once for each array element.

04. find( )

Using this method you can find a single object in an array. It also takes a single function with a given name as the parameter. All we do is we have a true or false statement and it returns the item for the first one where it’s true. Take a look at the below code snippet

const cars = [
{ brand: "Toyota", model: "axio" },
{ brand: "Nissan", model: "GTR R35" },
];
const carBrands = cars.find((car) => {
return car.brand === "Nissan";
});
console.log(carBrands);
// expected output: Object { brand: "Nissan", model: "GTR R35" }

I think now you have a clear idea about the find() method. But there’s one thing to remember. If there’s a key, value pair with same key or value, this method doesn’t return all the objects. It only returns the object that is true.

05. every( )

Using this method, you can check the array with some condition. What does that mean is you can give a condition and every() method checks to make sure every single item falls under that. Then as the result, it returns the true or false .

const books = [
{ name: "book 01", price: 500 },
{ name: "book 02", price: 100 },
{ name: "book 03", price: 400 },
{ name: "book 04", price: 700 },
{ name: "book 05", price: 200 },
{ name: "book 06", price: 600 },
];
const hasCheaperBooks = books.every((book) => {
return book.price <= 400;
});
console.log(hasCheaperBooks);
//expected output: false

As the name of the method, this checks every single item that satisfies the given condition. Since there are books greater than 400, this method will return false as the output. The next array method is very similar to this method. So… let’s take a look at what it is all about.

06. some( )

In the every() method it checks the every single item that satisfies the given condition and it returned true or false . When it comes to some() method, as the name of the method it checks if some of the items in the array satisfy the given condition and return true or false . Take a look at the same example we used in every() function and see how it changes when it comes to some() method.

const books = [
{ name: "book 01", price: 500 },
{ name: "book 02", price: 100 },
{ name: "book 03", price: 400 },
{ name: "book 04", price: 700" },
{ name: "book 05", price: 200 },
{ name: "book 06", price: 600 },
];
const hasCheaperBooks = books.some((book) => {
return book.price <= 400;
});
console.log(hasCheaperBooks);
//expected output: true

The output of the example is true because it does have books less than or equal to 400. In simple terms, it just checks the array to see if anything in the array returns true for the given condition. If it does, the entire thing returns true .

07. reduce( )

This method is a little bit different than all of the other methods since it’s actually doing some operation on the array and returning a combination of all those different operations. You may find this method is a little bit confusing to understand🤨, but I’ll explain in the simplest way I can.

The reduce() method takes a function and it has two parameters. 1st one is the previousValue . 2nd one is currentValue . Finally, end of the method there is initialValue . Take a look at the below code snippet and you will understand this confusing explanation.

const books = [
{ name: "book 01", price: 500 },
{ name: "book 02", price: 100 },
{ name: "book 03", price: 400 },
{ name: "book 04", price: 700 },
{ name: "book 05", price: 200 },
{ name: "book 06", price: 600 },
];
const total = books.reduce((currentTotal, book) => {
return book.price + currentTotal;
}, 0);
console.log(total);
//expected output: 2500

You can see the initial value of the currentTotal is 0. In the 1st iteration, 500 will be added to the 0. Then the currentTotal will be 500. Like that it will run until the end of the array. Then it’ll return the final output as 2500.

08. includes( )

The includes() method determines whether a given array includes a certain value among its entries, returning true or false as appropriate. It’s not similar to all the methods that I mentioned earlier in this article. This doesn’t take a function, it takes a single argument. Referring to code snippet, you can understand what happens when you use the includes() method.

const array = [1, 2, 3];
console.log(array.includes(3));
// expected output: true
const pets = ['cat', 'dog', 'parrot'];
console.log(pets.includes('dog'));
// expected output: true
console.log(pets.includes('pig'));
// expected output: false

I think the code snippet describes the behavior of the includes() method because it’s easier than previously describes methods😉.

I hope you have learned something interesting and got an idea about the methods I discussed in this article. So, until next time, stay safe!!!😎.