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 numbers.map, 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 numbers.map 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.