I recently did a mock technical interview. I chose to do it on React. I spent the entire week practicing writing components, setting local state, and passing props. The first 10 minutes or so was the 'non-technical' portion of the interview. My interviewer used this time to ask me basic questions on JavaScript. I should have seen this coming, considering React is a JavaScript framework, but I didn't study up on my basics and found myself a bit unprepared.
One of the questions she asked me was, "What is the difference between .forEach and .map?" I didn't know the answer and just gave the first thought that came into my head as an answer. It wasn't quite right, but it also wasn't totally wrong. Either way, I decided to make myself a JavaScript iterator cheatsheet. In my coding bootcamp, they always mentioned not trying to memorize code, but iterators seem like a good thing to have memorized. Knowing off the top of your head which iterator to use when coding will save you so much time. I know there are hundreds of iterator cheat sheets on google, but what better way to study and make sure you understand exactly what you're talking about than writing a blog? This blog is meant for personal use, but if it helps you too, Awesome!
Let's just dive right in!
Array.forEach()
This iterator calls a function once for every element in an array
The argument for this method is a callback function.
let students = ['Bessy', 'Tom', 'Adam', 'Ben', 'Martha']
students.forEach(function(students) {
console.log(`${students} is a senior in college`)
})
=> Bessy is a senior in college
Tom is a senior in college
Adam is a senior in college
Ben is a senior in college
Martha is a senior in college
forEach() returns undefined.
You want to use forEach() the least. While it will iterate through your array, because it doesn't return anything, you can't pass the return value to another function for use. It can also be hard for another programmer to understand what exactly you're trying to do with this method. If you feel like you need to use .forEach(), DON'T, you're better off using .map().
Array.map()
Just like forEach(), .map()iterates over all elements and allows you to perform some operation to each element in that array and changing them into something else.
.map() returns a new array, leaving the original array unchanged.
We use .map() when we want to perform an action on each element in the the array and collect the results into a new array.
let numbers = [2,4,6,8,10]
let odds = numbers.map(x => x + 1)
=> numbers: [2,4,6,8,10]
=> odds: [3,5,7,9,11]
In the above example, I use .map() to add 1 to each element in the number array. I assign the method to a variable called "odds" to give the returned array something to reference when it's time to call it. If we call the numbers array, we can see the original array remains unchanged. When we call the odds array, we can see this new array that has changed by the .map() method.
Array.find()
.find() returns the first element that meets a specified condition. It's good to note that you could have multiple matches, but it will only return the first one that matches the condition. If no match is found, it will return undefined. Only use it when you want to isolate a specific result.
let dogNames = ["Suki", "Lumi", "Mia", "Sophie", "Coco"]
let result = dogNames.find(name => name.startsWith("S"))
=> "Suki"
If we have an array dog names, but want to find one of the names that start with "S", "Suki" will be the first name returned, because it's the first name that appears in the array that satisfies the condition set in the callback function.
We can even add a second condition with the Logical And (&&) operator.
dogNames.find(name => name.startsWith("S") && name.length > 4)
=> "Sophie"
Array.filter()
.filter() goes through each element in an array and keeps any element that meets the defined condition. The callback function needs to return either true or false. If it returns true, the new array keeps that element and filters out the ones that return false.
let dogNames = ["Suki", "Lumi", "Mia", "Sophie", "Coco"]
let sNames = dogNames.filter(name => name.startsWith("S"))
=> ["Suki", "Sophie"]
If we had that same array of dog names, but wanted to find all of the names that start with the letter "S". filter() would make a new array, leaving us with just those names,
while leaving the original array unchanged.
This is just a basic rundown of some commonly used JavaScript iterators. Being able to manipulate, sort, or find specific data in arrays is something you'll do often, so it's important to make sure you know what each of these iterators does, how they're used, and what they return. Hope this helps!
Top comments (0)