Phase 1 project at Flatiron

Before starting at flatiron I had absolutely no background or knowledge in coding/ programing at all. I knew it was going to be challenging but still possible to learn. Most of the content I was learning was very straight forward and simple in concept, but then came array iteration. Now after spending so much time trying to understand the concept on some of them its pretty simple. the part that was so difficult for me was what to put in after the array iterator. Hopefully this post can help someone else as I struggled to understand it and which to use

forEach:
a very simple example of using forEach that I personally used in my project is

storedBreeds.forEach((breed, i) => {
 let option = document.createElement('option')
    if(breed.image){
    option.value = i
    option.innerHTML=`${breed.name}`
    }
 document.getElementById('breed_selector').appendChild(option)
 showBreedImage(0)
})
    })
}

• for anyone that has not seen my project the forEach example in this is a method that iterates over every element in the array and finds every element(breed.image) that satisfies the condition and does whatever else you want it to do(create an option in the select menu and put the breed name as the option name)

forEach in general iterates over the first element and then passes the callback function. After that is done it then loops through every element in order until reaches the last element in the array.

filter:
By far the hardest form of array iteration for me to learn was the filter method. Yes you can use for loops to do this but using the filter method in javascript is much simpler. The concept its self is simple, it filters things out of the array, but actually filtering it was the hard part for me.

A very simple example of this:

const numbers = [3,53,23,77,100,42];

const numbersGreaterThanFifty= numbers.filter((element)=> element> 50 )
console.log(numbersGreaterThanFifty)

Similar to the forEach method, filter also loops through every element in the array to filter out each element that satisfies the condition set. In this example, the array numbers is filled with a bunch of random numbers, then a new variable is created(numbersGreaterThanFifty) which is set equal to the numbers array uses the filter method to only put numbers greater than fifty in the new array returning 53,77,100.

map:
For me personally the map method was the easiest to understand because it takes all the elements in the array and returns them under the conditions of the callback function

const nums = [1,2,3,4]
const numDouble = nums.map((element)=> element * 2);

console.log(numDouble)

///////console//////
[2,4,6,8]

like all the other array iteration methods, in this instance an anonymous function is passed through and goes to the first element and multiplies it by two then loops through every element until it reaches the end of the array. I know this isn't very technical but explaining it as simply as possible helped me better understand how to write array iteration methods and actually make it work.