As a JavaScript developer, working with arrays are a must. That's why i think it's very important to understand some common and important methods used in manipulating arrays.
I have a list of 5 array methods you should know to make your working with arrays in JavaScript much easier and enjoyable
To get started with this tutorial, i have an array of items below that i am going to use to explain some of the array methods. i believe being able to visualize with examples is the best way of learning and making these methods stick in your memory.
//array of items
const itemsList = [
{ name: "phone", price: 300 },
{ name: "laptop", price: 200 },
{ name: "Xbox", price: 250 },
{ name: "television", price: 400 },
{ name: "shoe", price: 500 },
{ name: "speaker", price: 50 },
];
- Filter method: creates a new array filled with elements that passes a condition provided by a callback function. we call the method on an array, pass in a callback function and provide a condition and we get back elements that meets the condition we pass into the callback function.
for example: say on our items list, we only want to get items that the price is greater than 200.
const filteredItems = itemsList.filter((item) => {
return item.price > 200;
});
console.log(filteredItems) // prints items with
prices greater than 200
to the console;
in the above code, we call the filter method on the itemsList array, passed a callback function that will execute for every element, in the call back funtion, we passed in "item" as an argument which is going to be a representation of each item in the array. we then pass in a condition, which is; for every price on our itemsList, return "true" if items are greater than 200, return "false" for the items that are not greater than 200.
we go through every "price" in the array, save the prices that returned true (greater than 200) in the "filteredItems" variable and discard the rest of the items that did not meet the condition. so, the "filteredItems" variable is a new array that only consists of element with price above 200.
important note: the filter method does not change/mutate the original array we are filtering over.
console.log(itemsList); //returns the original array untouched
console.log(filteredItems); // returns the filtered Array
- map method: map method allows you to take an array and convert it into a new array with modified values.
say in our ItemsList, we want to get a new array that consists only of the item names.
we call the map method on the array, pass in a callback function that executes for every elements in the array, we then pass in conditions we want the new array to be modified by (e.g return item.name), and this will return a new array with only item names.
examples
const ItemNames = itemsList.map(item => {
return item.name
})
//returns new array that consists only of item names.
const ItemPrices = itemsList.map(item => {
return item.price
})
//returns new array that consists only of item prices.
- Find method: as the name suggests, it allows us to find a single object in an array. we call the find method on the array, pass in a callback function that executes for every elements in the array, pass in a condition and we get back first item that meets the conditions we passed in. sweet and straightforward.
example
const speakerItems = itemsList.find(item => {
return item.name === "speaker"
})
//returns first item in the array with the name of "speaker"
const laptopItem = itemsList.find(item => {
return item.name === "laptop"
})
//returns first item in the array with the name of "laptop"
- forEach method: Unlike the other methods, this method does not actually return anything. it is similar to the for loop, it is used to loop through an array and perform a function for every element in the array.This function makes working with arrays much simpler, especially when you need to loop over them to perform some operation. you won't have to write out the weird for-loop syntax just to look over an array.
example
itemsList.forEach(item=> {
console.log(item.price + 50);
})
////adds 50 to each price item of the itemsList array and prints to console.
itemsList.forEach(item=> {
console.log(item.name);
})
//print names of all items to the console.
- includes method: This method is a bit different from all other type of array methods, because it doesn't actually take a callback function like most array methods, it just takes one argument and return true or false depending on if the argument passed in, is present in the array or not. it's very convenient if you just need to check if an array has a value present in it or not.much better than working with a slightly more complex "find" method.
simple example.
const numbers = [1,2,3,4,5,10,40,33]
const includesTwo = numbers.includes(2)
console.log(includesTwo);
//includes true returns a Boolean and prints "True" to the console.
const numbers = [1,2,3,4,5,10,40,33]
const includesHundred = numbers.includes(100)
console.log(includesHundred);
//includesHundred returns a Boolean and prints "False" to the console.
That concludes the list of incredible useful JavaScript array methods that i want to cover. hope you found this article helpful.
Top comments (0)