Little Guide for Array Methods/Iterators in JS

Learning a new language in 3 weeks enough to create a project has been very interesting to say the least. A lot of the information was jumbled up in my brain it was hard to put it into code. Fortunately, building a project from scratch has been a great help. But one subject in which I had the most issue understanding and also getting syntax correct was array methods/iterators. Below is a small guide into some of them.

const cats= [
    {name: "garfield", age: 10},
    {name: "sparky", age: 7},
    {name: "domino", age: 1}
 ]
const numbers = [5, 100, 84, 62, 22, 77, 50, 2, 43, 32]

for loop()

1. for(let i = 0; i < cats.length; i++) {
        console.log(cats[1])
    }
2. let greaterThanFifty = [];
   for(let i = 0; i < numbers.length; i++) {
       if(numbers[i] >= 50) {
          greaterThanFifty.push(numbers[i])}}

1. Returns:

{name: “garfield”, age: 10}
{name: “sparky”, age: 7}
{name: “domino”, age: 1}

2. Returns: 5) [100, 84, 62, 77, 50]

for…of

for (cat of cats) {
    console.log(cat)
}

Returns:

{name: “garfield”, age: 10}
{name: “sparky”, age: 7}
{name: “domino”, age: 1}

The for..of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects

forEach()

1. cats.forEach(function(cat) {
        console.log(cat)
  }) 
// here you can also console.log(cat.name) or (cat.age)

1. Returns:

{name: “garfield”, age: 10}
{name: “sparky”, age: 7}
{name: “domino”, age: 1}

the callback function inside the forEach() CAN take in 3 arguments

• the iterator name for each object in the array
• index
• the whole array

For example:

cats.forEach(function(cat, index, cats) {
 console.log(cat)
 })

map()

const catNames = cats.map(function(cat){
        return cat.name
 })
OR
const catNames = cats.map(cat => cat.name)
const greaterThanFifty = numbers.map(num => num >= 50)

Returns:

garfield
sparky
domino

map() is an array method that iterates over all elements, allowing you to apply a function to each element in that array, and changing them into something else. The result is then returned as a new array, leaving the original array unmodified

Map returns a NEW ARRAY

filter()

const greaterThanFifty = numbers.filter(function(num) {
      if(num >= 50) {
         return true
      }
  })
OR
const greaterThanFifty = numbers.filter(num => num >= 50)

this variable will have all the numbers in the array that are greater than or equal to 50.

Returns: (5) [100, 84, 62, 77, 50]

The filter() method returns a new array created from all elements in the original array that meet certain conditions.

Filter returns a NEW ARRAY

reduce()

totalNum = numbers.reduce(function(total, num) {
        return total + num
    }, 0)
OR
const totalNum = numbers.reduce((total, num) => total + num, 0)

this one will return the total number of all the numbers in the array.

Returns: 402

the 0 you see at the end of the function is you telling it where total should start from. Known as the (initialized value) I know very confusing but its basically saying

“Hey total start at zero and + each num in the numbers array and return me the new total after adding” — hope this helps

The initialization value can be left BUT If no initial value is supplied, the first element is used without having been used in the function:

With reduce() we are able to quickly get a minimized list or a total sum from a set of values.

Reduce returns a NEW ARRAY

sort()

const numOrder = numbers.sort((a, b) => a - b)

Returns: 8) [2, 5, 22, 50, 62, 77, 84, 100]

The sort() method sorts the items of an array.

The sort order can be either alphabetic or numeric, and either ascending (up) or descending (down).

By default, the sort() method sorts the values as strings in alphabetical and ascending order. But it does not work well if numbers are in strings.. since it will only look at the first digit. Meaning (“2”,“10”,“3”) 10 would come before 2.

find()

numbers.find(n => n > 50 )

Returns: 100

Find returns the first element that is true. So in this case the answer would be 100. Even though you could have multiple matches find returns only the first element.