Array methods are functions built-in to JavaScript that we can apply to Arrays. some of the must know Array methods bellow.
Array Filter()
This method creates a new array with elements that follow given condition. for a example you wanted to know which item has price less than or equal to 500
const Items = [ {'name' : 'iPhone 11', 'price' : 699}, {'name' : 'iPhone XS', 'price' : 649}, {'name' : 'iPhone 7', 'price' : 249}, {'name' : 'iPhone 8', 'price' : 499}, ]; const filterItem = Items.filter(item => { return item.price <= 500; }) console.log(filterItem); /* console log - We get new array with price less than qual to 500 [{'name' : 'iPhone 7', 'price' : 249}, {'name' : 'iPhone 8', 'price' : 499}] */
Array map()
Map() iterate array, access each value and return a new value for each iteration – eg. we want add stock details in new array
const Items = [ {'name' : 'iPhone 11', 'price' : 699, 'quantity' : 10 }, {'name' : 'iPhone XS', 'price' : 649, 'quantity' : 0 }, {'name' : 'iPhone 7', 'price' : 249, 'quantity' : 0 }, {'name' : 'iPhone 8', 'price' : 499, 'quantity' : 15}, ]; const filterItem = Items.map(item => { return{ 'name' : item.name, 'price' : item.price, 'stock' : item.quantity ? 'in stock' : 'out of stock' } }); console.log(filterItem); /* console log - We get new array with stock details [{ "name": "iPhone 11", "price": 699, "stock": "in stock"}, { "name": "iPhone XS", "price": 649, "stock": "out of stock"}, { "name": "iPhone 7", "price": 249, "stock": "out of stock"}, { "name": "iPhone 8", "price": 499, "stock": "in stock"}] */
Array Find()
This method returns the value of the only first element in an array that pass condition
const Items = [ {'name' : 'iPhone 11', 'price' : 699, 'quantity' : 10 }, {'name' : 'iPhone XS', 'price' : 499, 'quantity' : 0 }, {'name' : 'iPhone 7', 'price' : 249, 'quantity' : 0 }, {'name' : 'iPhone 8', 'price' : 499, 'quantity' : 15}, ]; const filterItem = Items.find(item => { return item.price === 499 }); console.log(filterItem); /* console log - Return the first element witbh price 499 [{ "name": "iPhone XS", "price": 649, "stock": "out of stock"}] */
Array findIndex()
This method returns the index of the first element in an array that pass condition
const Items = [ {'name' : 'iPhone 11', 'price' : 699, 'quantity' : 10 }, {'name' : 'iPhone XS', 'price' : 499, 'quantity' : 0 }, {'name' : 'iPhone 7', 'price' : 249, 'quantity' : 0 }, {'name' : 'iPhone 8', 'price' : 499, 'quantity' : 15}, ]; const filterItem = Items.findIndex(item => { return item.price === 499 && item.quantity > 0; }); console.log(filterItem); /* Return the first element witbh price 499 and Qty > 0 [LOG] : 3 */
Array includes( ) and indexOf( )
includes() checks if an array includes the element that passes the condition and returning true or false
indexOf() returns the index of the first element in an array that pass the condition and -1 if not found
const countries = [ 'Canada', 'France','Germany', 'India', 'Italy', 'Japan', 'UK','US' ]; const search1 = countries.includes('Germany'); const search2 = countries.indexOf('India'); const search3 = countries.indexOf('Russia'); console.log(search1); console.log(search2); console.log(search3); /* Return following [LOG]: true // includes (if value found) [LOG]: 3 // indexOf (if value found return index) [LOG]: -1 // indexOf (-1 no matching value found) */
Array reduce()
This method applies a function against an accumulator and each element in the array to reduce it to a single value. for example we want total of all mobile prices
const Items = [ {'name' : 'iPhone 11', 'price' : 699, 'quantity' : 10 }, {'name' : 'iPhone XS', 'price' : 499, 'quantity' : 0 }, {'name' : 'iPhone 7', 'price' : 249, 'quantity' : 0 }, {'name' : 'iPhone 8', 'price' : 499, 'quantity' : 15}, ]; const priceTotal = Items.reduce((sum, item) => sum + item.price, 0 ); console.log(priceTotal); /* Return total of the price [LOG]: 1946 */
Array every( ) and some()
every() checks every element in the array that passes the condition, returning true or false
some() if at least one element in the array that passes the condition, returning true or false
const Items = [ {'name' : 'iPhone 11', 'price' : 699, 'quantity' : 10 }, {'name' : 'iPhone XS', 'price' : 499, 'quantity' : 0 }, {'name' : 'iPhone 7', 'price' : 249, 'quantity' : 0 }, {'name' : 'iPhone 8', 'price' : 499, 'quantity' : 15}, ]; const isEveryItemsAvailable = Items.every(item => { return item.quantity > 0 }); const isSomeItemsAvailable = Items.some(item => { return item.quantity > 0 }); console.log(isEveryItemsAvailable); console.log(isSomeItemsAvailable); /* Return total of the price [LOG]: false // every() as all items are not available [LOG]: true // some() as some items are available */
Array shift() and unshift()
shift() – removes the first element from an array and returns that element
unshift() adds one or more elements at the beginning of an array and returns the new length of the array.
const countries = ['Canada', 'France','Germany', 'Italy', 'Japan']; const removeFirstCountry = countries.shift(); console.log(removeFirstCountry); console.log(countries); const addAtBegining = countries.unshift('India'); console.log(addAtBegining ); console.log(countries); /* Return total of the price [LOG]: "Canada" // removed first element [LOG]: ["France", "Germany", "Italy", "Japan"] // updated array [LOG]: 5 // add new elemenmt and return total length [LOG]: ["India", "France", "Germany", "Italy", "Japan"] // updated array */