Javascript -> 8 useful Array Methods

What is Array ?

An array is a special variable, which can hold more than one value at a time.

If you have a list of items, storing those names in single variables could look like this:

let item1 = "Saab";
let item2 = "Volvo";
let item3 = "BMW";

However, what if you want to loop through the items and find a specific one? And what if you had not 3 items, but 100?

Here comes Array!

An array can hold many values under a single name, and you can access the values by referring to an index number.

You can also save objects as shown below:

const items = [
  {name: "Bike", price: 30 },
  {name: "TV", price: 100 },
  {name: "Laptop", price: 80 },
  {name: "Album", price: 5 },
  {name: "Book", price: 50 },
  {name: "Phone", price: 70 },
  {name: "Computer", price: 65 },
  {name: "Pencil", price: 40 }
]

The restriction of the same type is an important one, because arrays are stored in consecutive memory cells.

Now when you know about Arrays, let's see what are the essentials methods that will make your life easier while working on Arrays.

NOTE: ANY OF THE BELOW FUNCTION WON'T CHANGE EXISTING ARRAY

Filter: Returns array

Filter method can be used when you want to select specific elements from the array.

It takes a function as parameter that should return true/false. Condition in function will decide whether we want to include that element in new array or not.

const filteredItems = items.filter((item) => {
  return item.price < 50;
})

Map: Returns array with total new format or objects

Normally used to convert a array in totally different new array.

It takes a function as parameter that should return string/object/number/bool. Parameter function will loop through all values of Array and transform those values in new object/format.

At the end we'll have new array with new format or objects returned from parameter function.

const itemNamesAndPricesCombine = items.map((item) => {
  return item.name + " - " + item.price;
})

Find: Return Object

Iterate over array values and will return first object that fulfills the given condition.

const itemBook = items.find((item) => {
  return item.name === "Book";
})

ForEach: Returns Nothing

Similar like for loop. It can be used to print or perform some calculations and processing on Array values.

Below example will print name of all items on the screen

items.forEach((item) => {
  console.log(item.name);
})

Some: Returns Bool

Iterate over array and will stop and return True if there exist any item that fulfills the given function condition.

let hasInexpensiveItems = items.some((item) => {
  return item.price < 10 
})

Every: Returns Bool

Iterate over array and will return True if every single item of array fulfills the given function condition else return False.

items.forEach((item) => {
  console.log(item.name);
})

Reduce: Returns single value after performing operations on all items

It's the most complicated one in all Array methods. It takes following two parameters

• First parameter is the function with two parameters: - return value of last iteration - current item
• Second parameter is the starting value.

Below example is to calculate sum:

let start = 0

const total = items.reduce((previousIterReturn, item ) => {
  return previousIterReturn + item.price
}, start)

Now in above function for the first iteration, previousIterReturn will contain 0 as have set start=0. First iteration will process value1 of Array and will return data to next iteration and so on.

Includes: Return bool

Only works for simple Arrays not on list of objects.

items = [1,2,3,4,6,7,8]
items.includes(7)