Passing functions around

Last chapter you handed "the work itself" to the array tools. What was that? This chapter goes to look at what it really is.

The answer first: in JavaScript a function is one of the values too. Just as you can put a number or a string in a variable, or hand it over as an argument, you can do the same with a function. Functions are not a special breed, in other words.

Get used to this way of thinking and a lot of things join up. You can put a function in a variable. You can put a function in an array. You can hand a function to another function as an argument. That last one is what is called a callback function — a function to be called back later.

Why do this? So that only the frame of the work is decided, and the contents are left for the caller to decide. The array tools were exactly that. The frame — "take the array one item at a time, do something, gather the results" — belongs to the tool. Only the "what to do" part is handed over by the user, as a function. That is why the same tool serves for totalling, converting and narrowing alike.

This way of dividing work turns up all over programming, not just in callbacks. Separate the part that stays the same from the part that varies, and let the varying part be slotted in from outside. Do that and reusing parts starts to pay off enormously.

There is a timing side to callbacks as well: "call it later". A function called when a button is pressed, a function called when the data arrives. It is a way of handing something over that says I do not know when it will be called, but when the moment comes, please call it. Web programs are full of this shape; a single button click is built out of a callback.

One knack for reading. Code with callbacks in it looks deeply nested and you brace yourself. When that happens, try pulling the handed function out to a separate place and giving it a name. Write it as array.filter(isAdult) and what it does is clear at a glance. Once you are used to it, the on-the-spot form reads naturally too.

The thing that trips people up is mixing up handing a function over with calling it and handing over the result. Put the brackets on and it becomes a call, and the result of running it there and then gets handed over instead. What you want to hand over is the work itself, so no brackets. That one character changes the behaviour completely, so keep it in mind.

This chapter is also the finish for everything so far. Without functions, arguments, return values and scope, callbacks cannot be read. Conversely, once this settles into place, JavaScript written by other people gets much easier to read.

As for how to practise, making the previous chapter's tools yourself works best of all. Write a function that works through an array one item at a time, with your own hands. Run a for inside it and call the handed function once per item. It is under twenty lines of code, but when it is written you should get that "ah, so that is how it worked" feeling.

This way of thinking turns up whatever language you go on to. The name differs, but the idea of "handing work over as a value" is everywhere. Having come through it here in JavaScript, you will understand it faster next time.

This is the end of the main body of the introduction. Having come this far, you hold ways to handle values, judge, repeat, gather, split into parts, and combine parts with one another. You are welcome to go on to HTML and CSS from here.

Chapter 8 onwards is not required. They are extra chapters collecting the ways of writing you need to read other people's modern code. You can go on ahead and come back when you meet a symbol you cannot read.