arrays are the most common thing that we are using in the programming. now we are going to be covering 8 javascript array methods that life makes so much easier and more enjoyable.
let’s see the following simple javascript array
// array sample
const products = [
{ name: 'Iron', price: 530 },
{ name: 'Phone', price: 770 },
{ name: 'Laptop', price: 2300 },
{ name: 'Toy', price: 250 },
{ name: 'Pen', price: 40 },
{ name: 'Book', price: 120 },
{ name: 'Table', price: 900 },
{ name: 'Shoes', price: 650 }
];
as you can see in the above array, just imagine we just need new array which should contains only less more than 500 products. for the scenario we can use array filter method. let’s see in a simple function below
// array filter method
const filteredProduct = products.filter(item => {
return (item.price <= 500);
});
console.log(filteredProduct);
so in the console if you can see the new array is here with only less than 500 items. and that’s perfect. the filter array method super easy to use as it return true or false for each item.an it its true it is in the new array, an if its is false it is not in the new array.
next see the map array method. an map allows you to take one array and converted into new array
// map array method
const productNames = products.map(item => {
return item.name;
});
console.log(productNames);
//result
// ["Iron", "Phone", "Laptop", "Toy", "Pen", "Book", "Table", "Shoes"]
according to the above code, we can see new array contains with all only the product names, also we can get all the prices related to the product as an array
// map array method
const productNames = products.map(item => {
return item.price;
});
console.log(productNames);
//result
// [530, 770, 2300, 250, 40, 120, 900, 650]
this is the convenient way if you want an array with specific element only from the existing one.
next we can look in to find method. this allows you to find the single object in the array. let’s see the following example for the above scenario.
// find array method
const findProduct = products.find(item => {
return item.name === 'Laptop';
});
console.log(findProduct);
//result
// {name: "Laptop", price: 2300}
main thing that we need to consider about using find method, its return the very first object when the given condition is true.
let’s see foreach method. this very similar to the for loop in the javascript. this will not return any value. but we can do things inside the method as we want. this id best way to loop some dom elements in the html. something like that. let’s take a look at the below example snippet
products.forEach((item) => {
console.log(item.price)
})
//result
// 530 770, 2300 250 40 120 900 650
products.forEach((item) => {
console.log(item.name)
})
//result
// "Iron", "Phone", "Laptop", "Toy", "Pen", "Book", "Table", "Shoes"
let’s see some function. this is bit different from the other array methods that we talk earlier. its actually going to return true or false. we can check some of the elements of the array like price less than 1000.
// some method
const isInexpensiveItems = products.some(item => {
return item.price < 1000;
});
console.log(isInexpensiveItems);
//result
//true