Introduction to JavaScript Higher Order Functions: Map & Filter
Introduction to JavaScript Higher Order Functions: Map & Filter

This practical course explores JavaScript Higher Order Functions. A higher order function is a function that takes another function as an argument or returns a function. This course explores two built-in JavaScript higher order functions: Map and Filter.

Learning Objectives

  • Learn what is a higher order function
  • Learn about the structure of a higher order function
  • Learn how to use the Map function
  • Learn how to use the Filter Function

Intended Audience

This course is intended for anyone who wants to learn about JavaScript Higher Order Functions: Map and Filter.


Anyone with an interest in using the Map and Filter in JavaScript or who wants to improve their knowledge of JavaScript in general.


Introduction to JavaScript higher order functions: map and filter. A higher order function is a function that takes a function as a argument or returns a function. And JavaScript has a few built-in higher order functions. On the screen, I have a numbers array. And I'm gonna begin by typing const double equals, parentheses. I'm gonna use the JavaScript map method to create a new array where each element of the new double array will be double the value of the corresponding elements in the numbers array.

So there's a implication with the statement I just gave. If map is doubling the value of each element of the numbers array, that implies that map will loop through, iterate through the numbers array. I'm gonna write out the arrow function argument inside of the parentheses. The first parameter of the arrow function will be element.

Next, I will type the arrow, and I'm going to return element times two. In case you're wondering why there isn't parentheses around the element parameter, and arrow functions. When you have a single parameter, parentheses are optional. But the first parameter in the map function if required. And it represents the current element being processed in the array while is executing.

Down below, I'm gonna console.log double and execute the console. And each element in the array to the right is double the value of the corresponding numbers element. Now, the map function does have optional parameters. One of them being index. This parameter allows you to capture the position of the current element's location in the original array. I'm gonna transition over to a new screen, and continue to use the same numbers array. And the next higher order function I'm going to discuss is filter.

Filter, just like map, will iterate over the given array. And as a result, create a new array. I will begin by typing const greaterThanTwo equals numbers.filter parentheses. And just like map, the element parameter is required. I will now type a second parentheses. Element, then an arrow, curly brackets. Earlier in the video, I mentioned that with arrow functions, parentheses are optional with single parameters. In this case, I've included it to visually demonstrate the difference.

Now, inside of the curly brackets, I will type return element greater than symbol two. So what is happening with this return statement? Filter works on a conditional basis. In the return statement, I need to describe a condition. As filter iterates through each element, it will only return the values that make that condition true. If the condition is not true, the current element will not be included in the new array. In this case, the condition is to return every element greater than two. So down below, I will console.log greaterThanTwo. I will execute the console and to the right, there is a new array with every value greater than two from the numbers array. And that's it. Thanks for watching Cloud Academy.

About the Author
Learning Paths

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics