Date Archives → May 2015

Introduction to ES6 Promises – The Four Functions You Need To Avoid Callback Hell

Update October 2018: If you need to brush up on promises and async/await, I highly recommend you look instead at my Mastering Asynchronous JavaScript course on Frontend Armory. The course contains 47 live examples and exercises, and also comes with this spiffy Promises and async/await cheatsheet.

Of course, my original promises guide is still useful today! Here it is:

Apart from being new and shiny, Promises are a great way to clean up your code, reduce dependencies on external libraries, and prepare yourself for async and await in ES7. Developers who use them swear by them, and developers who don’t just don’t know what they’re missing.

That said, promises can take a lot of work to understand. They feel completely different to the callbacks which we often use to accomplish the same thing, and there are a few surprises in their design which often cause beginners hours of debugging pain.

So why should I learn promises, again?

If the fact that promises are awesome doesn’t convince you, maybe the alternative to promises will.

Up until promises arrived, developers in JavaScript land had been using callbacks. In fact, whether you realise it or not, you’ve probably used them too! setTimeout, XMLHttpRequest, and basically all browser-based asynchronous functions are callback based.

To demonstrate the problem with callbacks, let’s do some animation, just without the HTML and CSS.

Say we want want to do the following:

Continue reading →

The three faces of JavaScript`this`

JavaScript is a language which is full of surprises: its type coercion has been the subject of comedy, and one of it’s most well known books is titled JavaScript: The good parts. But of all of it’s eccentricities, the this keyword is likely the one which causes the most day-to-day confusion.

While there are a number of articles about this, they generally take an exhaustive approach to explaining the many ways of using it. This is great for reference, but not so great if you just want to know how you should use this in your next project.

That’s why in this tutorial, I explain only the three most common senses of this, by building a simplified version of a component taken from a real project – clubroom. In particular, I explain how this is used in the code which generates unique IDs for users and chat rooms.

So without further ado, let’s get started!

Continue reading →

Are JavaScript Promises swallowing your errors?

This article has kindly been turned into a video by the folks at Webucator who do JavaScript training.

When dealing with asynchronous code, JavaScript’s ES6 promises can make your life a lot easier. No more callback pyramids, no more error handling on every second line, and no more reliance on external libraries to do things as simple as getting the result of a for loop.

But ES6 Promises can have their own pitfalls, the biggest by far being disappearing error messages. Reddit’s /u/ledp put it better than I ever could:

What the actual flying fuck? Promises swallows errors by default! Who’s idea was that?

More specifically, any exception which is thrown within a then handler, a catch handler, or within the function passed to new Promise, will be silently disposed of unless manually handled.

The problem

Let’s test your understanding. Which of the following would you expect to print an error to the console?

Continue reading →