JS Snippet #1 — Callbacks

In the recent months, many things have happened, including the end of the course, and the beginning of the job hunt in a new industry. It has all been a bit of a whirl wind, and I don’t wish to go into a million details about it in one go, so instead I’ve decided to occasionally divulge some of what I’m learning on the side. Namely, a lot of JavaScript.

One particular tech test I was asked to complete as part of an interview process required the use of pure JavaScript. Since this means not very much to most people reading, the reaction this recieved was something along the lines of:

ahhh

You see, we learned a basic overview of JavaScript at Makers, and then were introduced to some libraries (like jQuery, or AngularJS), that do LOADS of JS things in the background. These libraries are written in JavaScript, but apparently you can get by just fine with the basics, and most things are done for you. So, weirdly, I didn’t know much JavaScript.

But, as we learned to do very well throughout the course, one perseveres.
And persevere I did, because my familiarity with the language just grows. However, I’ve found a number of bits here and there that trip me up constantly, and I’m still working on figuring these out. The basics. But necessary basics.

And I’ve decided to log some of that here! Starting with callbacks.
To explain callbacks, I need to explain asynchronicity.

JavaScript has this weird thing where depending on what you ask it to do, it is ascynchronous. Which means that when the code is being read, line by line, it doesn’t necessarily wait for the line it just read to finish executing when it starts executing the next one. Which can be complicated when we rely on one thing to happen so that the other can, too. To illustrate this rather vague sentence, come on the toast journey with me.

You, sensible human, know that if you want to eat some luxuriously buttered toast, you need to toast bread, then spread sinful amounts of butter on it. Otherwise, it’s just bread. Or just butter.

Awesome, so we got the steps down to a tee. Naturally. Our computer though, not so much. Not at all, actually. See, remember when I said JavaScript starts executing everything it comes across? Well if we told it to toast bread, and then asked it to spread all of the butter on it, it would be like, cool, and go ahead and just do both at the same time, so you’d end up with toast and a buttered up counter top. Talk about making a mess. This is where callbacks come in. You need to be very explicit about the toasting and buttering process when you want JavaScript to do it, or it’ll just plough through instructions with no regard for order.

Have a little bit of code. This function tells JavaScript to  toast some bread:

function toast(bread) {
toaster.insert(bread);
toaster.pushDown;

return toast;
}

And here, a function that butters toast!

function butter(toast) {
toast.spreadButter

return butteredToast;
}

Voilá! But this is that code I was talking about. It’ll try to do both at the same time, and we all know it takes a while for toast to have that perfect crunch. So this is where the callback comes in, and our code should look more like this:

function toast(bread, callback) {
toaster.insert(bread);
toaster.pushDown;
var toast = return toastedBread;

callback(toast);
}

function butter(toast) {
var butteredToast = toast.spreadButter

return butteredToast;
}

Since the butter function handles the toast that comes out of the toaster, you’re served up scrumptious toast when JavaScript has finished working its way through both of those functions, in order, when you ask it to do this:

toast(sourdough, butter);

If that didn’t make sense, and all you feel now is hunger, go make toast, and tell me I’m speaking gibberish.

Let’s face it, JavaScript couldn’t really do this for you. At least not this simply.

giphy

Advertisements
Tagged , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: