It's all about me

Learning JS: Higher Order functions

Quality study is always going to benefit from looking at multiple resources on the same topic. In self-directed study, not only do we have to read and work through the tutorial material, we have to seek it out for ourselves.

In this loose thread on my JavaScript up-skilling journey, I’m breaking down the sub-topics and sharing the resources I’ve looked at in the hope that this helps someone else. Note that this post only directs to other resources (it’s not in itself a tutorial), but in a roughly progressive order.

To make useful sense of these links, you will need to have a grasp of the very basics of JavaScript. This means you will need to understand how and why to construct a function in both the traditional and reduced, ES6 formats, even if that’s only to perform the simplest of tasks (like adding two arbitrary numbers) where the result is returned to a variable. It’s also going to be really useful to be able to use the browser console.

With that knowledge we can start looking at what a higher order function actually is, as distinct from a regular function. This is worth a little extra effort, because the way JavaScript treats functions can be quite confusing. If it doesn’t sink in first time around, don’t be too surprised, and definitely look at several other resources.

This 19 minute YouTube tutorial, The 10 Days of JavaScript: Day 6 (Higher-Order Functions) by LearnWebCode is very clear about how higher order functions are constructed. I would also recommend the next video in the series series

In this 10 minute YouTube Video, 8 Must Know JavaScript Methods by Web Dev Simplified, we look at 8 commonly used higher order functions, .filter .map .find .forEach .some .every .reduce and .includes in such a way that the examples draw out the subtleties.

This article, A quick intro to Higher-Order Functions in JavaScript by Yazeed Bzadough is a succinct summary of the topic, and good revision material.

I’m personally a great fan of the Traversy Media channel on YouTube. In this 35 minute tutorial, JavaScript Higher Order Functions & Arrays, Brad Traversy works through the native (built in) functions .map .filter .reduce .sort with some dummy data. To work through this yourself, make sure you know how to construct an array and an object literal. It complements the previous video from Brad Schiff, skipping over some of the definitions and background explanations in favour of practise.

A Higher Order function can be defined as “a function that receives a function as an argument, or returns the function as output”. This article by M. David Green, Higher-Order Functions in JavaScript, is a more technical breakdown of that concept where we’re preparing to look at the broader topic of functional programming.

As a general introduction to the basics of JavaScript, the series mentioned above, 10 Days of JavaScript, is brilliant if you know practically nothing about programming. Each video is approximately 20 minutes long (totalling about 3 hours). Schiff is exemplary for the patience and clarity he brings to a training. Traversy Media has a brisker, single video JavaScript crash course for beginners at 1 hour 40, but assumes some familiarity with basic programmatic ideas.

The characters .JS drawn graffiti style.

The characters .JS drawn graffiti style. .js is the JavaScript file extension. Gouache on cartridge paper (version 2).

Post categories

JavaScript, Web Development

Post tags