What even are JavaScript Array Methods?
Now that you’re getting started with the basics of JavaScript, at some point soon you’ll likely come across three seemingly magical words in many code examples: .forEach(), .map() and .filter(). When you go to loop through (or iterate through) an array, the first thing you think of is probably a for loop. .forEach(), .map() and .filter() are all just other ways of iterating through arrays to perform a specific task on each element of the array, and are called methods.
Why should we use Array Methods?
- We write less code, leaving less opportunity for bugs
- .forEach() literally says what it is going to do (similarly .map() and .filter() do pretty much what they say on the tin!)
- It is more readable and intuitive than a for loop – we can name the variable representing each element of the array. For example, number is much nicer to read than numbers[i], and if it was an array of people, you could name the parameter person rather than having to use people[i]
.forEach()
What is it?
The .forEach() method is the most similar to the for loop. The two examples of code below essentially do the same thing:
The function inside the parentheses of the .forEach() is simply executed “for each” element of the array.
When should I use this?
.forEach() is a very generic array method. We should try to only use it when we want to perform a specific action for each element of an array.
A common pitfall
.forEach() does not create a new array. In fact, it returns undefined! That means if we try to do something like this…
We get a log of undefined.
.map()
What is it?
.map() is a lot like .forEach(), but it very helpfully creates and returns a new array as the below example shows:
Unlike forEach, the code above returns a new array containing doubled numbers.
When should I use this?
Use .map() whenever you need to update data inside an array (by mapping over it!). For example, perhaps you have a list of names and you want to capitalise them all. You might write:
.map() will always return a new array of the same length as the original!
.filter()
What is it?
.filter() loops through (or iterates) through data, and filters out data that doesn’t match the criteria that we set. We define what those criteria are through a truth test inside a function. For example, in the below case, we want to filter through an array to create a new array with only the three-letter words.
For every element in the array, the function will be called. The function should return either true or false, to tell JavaScript whether that element should be included in the resulting array or not.
When should I use this?
This one is pretty straightforward: use it when you want to filter an array based on criteria you want to define yourself. For example, perhaps you have an array of objects which represent people, and you want to create a new list of only the people who live in Leeds:
Learn to code with Northcoders
Do you want to make coding your career? With our intensive coding bootcamps, you can. Our in-house careers team will even help you find work after you’ve completed the course!
The Beginner’s Guide to forEach, map and filter in JavaScript
What even are JavaScript Array Methods? Now that you’re getting started with the basics of JavaScript, at some point soon you’ll likely come across three seemingly magical words in many code examples: .forEach(), .map() and .filter(). When you go to loop through (or iterate through) an array, the first thing you think of is probably a for loop. .forEach(), .map() and .filter() are all just other ways…
You CAN Become a Software Engineer Without a Degree. Here’s How
You don’t need to study computer programming at uni to get your foot on the coding career ladder. With the right help, training and support, you could go from absolute beginner to junior engineer in as little as 13 weeks — no qualifications required. Here’s how… For those pursuing a career in software development, the…
Ellie: Mechanical Engineer to Software Developer
It definitely lived up to the hype. I was very focused on finding the ‘right’ job – I really felt they understood what I wanted How did you find your time on the bootcamp? I already had great expectations of the course after hearing about it from a friend, and it definitely lived up to…
Reduce: Five Unusual Uses
…for the best thing in JavaScript The array method reduce is the best thing in JavaScript, but it’s only existed as a native method of the language since 2009 or so, when the 5th Edition of ECMAScript was released. Before then, people would have relied on their own or other implementations. Even now, there are arguments for going elsewhere…
React: componentWillMount to be deprecated!
Our React teaching team follow developments in the Facebooks UI-creating library very closely. We update our curriculum every 2 weeks, and recently they came across an update worth sharing with everyone! This is a blog for anyone who builds User Interfaces with React! Some very important features are improving – but it’s important everyone knows…
JavaScript: The Spread Operator
The spread operator is awesome. It can do SO much — it’s efficient, readable, and can save a whole load of mess. I don’t know how you can not love it! It’s a reasonably new feature of JavaScript that came with ECMA2015 (or ES6, if you prefer, although the former is technically correct!) — or for those unfamiliar with…
Taking your JavaScript Skills to a Higher (Order) Level – Part 1
Take your JavaScript knowledge to another level, a ‘higher-order’. I remember reading about Higher Order Functions, watching videos and still not being 100% sure about what they are and what I should understand about them. Maybe it was a case of trying to run before I could walk but it all seemed so mysterious. This…
A Beginner’s Guide to Test-Driven Development
Test Driven Development (TDD) is an industry best practice, and it’s a method we teach our students from week 1 of the course. Throughout this post, I will be using Mocha as a testing framework, and Chai as an assertion library. If you’re new to programming, you’ll need to ensure you have Node installed on your machine before you read up…
Is Coding for Me? Signs You Should Learn to Code!
Ever considered learning to code? If you’re bored at work, consider yourself creative, or love learning, this post is for you! You like learning I’ve always enjoyed learning, even when I didn’t necessarily enjoy my schooling. I liked the feeling of approaching a brand new topic, having no idea where to start, and slowly feeling my…
Writing the Perfect Junior Developer CV
Poor CV? No interview. Great CV? Fast lane to interview. Your CV is your first chance to market yourself, and in many cases, your only chance to make a first impression. Make it count. In this post, I explain how to write a great Junior Developer CV What are the best practices? 1. Keep it…
What is Pair Programming and Why Do Developers Do It?
New to the world of programming? You might not be familiar with the term pair programming – yet. But one thing’s for sure, you will be by the end of this post! What is pair programming? Pair programming is a common software development technique where two developers work on the same code, together, at the…
Unlock Yourself
I’m overdue a post on coding and why, for me, it’s one of the most amazing things you can spend your time doing. I just wanted to get this one out first though. This is quite a personal post but I think it’ll resonate with at least a few people who read it. For me,…