In JavaScript, there are several ways to check if a property exists on an object. Which one to pick pretty much depends on your use case, so you need to know how each one works.

Let’s take a look at the most commonly used methods.

1. Checking for Truthy

One very simple way to check for a property is to simply check if the property is truthy:

As you can see, this leads to a couple of problems with falsy values, so be very careful when using this method.

2. The in Operator

The in operator returns true if a property exists on an object or along…

A common pitfall in JavaScript is the usage of async/await in combination with forEach. Let’s look at an example with a simple asynchronous function (asyncPrint) that prints a value to the console. Say we want to call it sequentially for every value in an array via forEach:

We might expect the following output:

1
2
3

However, it does not work like that. We can point out the problem by implementing asyncPrint with a random delay before printing. If you run the snippet a couple of times, you will observe that the output occurs in any random order:

What Is the Problem?

…

If you want to iterate over an array, why shouldn’t you use the following code?

Well, there are a few reasons. One is that the for…of statement (and also the forEach method and the classic for loop) is officially recommended for this purpose. But still, what is the problem with using for…in for array iterations?

To answer this question, we need to know what for…in actually does. Here is what the MDN Web Docs say about it:

“The for...in statement iterates over all enumerable properties of an object that are keyed by strings.”

Enumerable properties have an internal enumerable…

In the past, there wasn’t a simple solution to the simple problem of retrieving key-value pairs from the query string of a URL in plain JavaScript.

Let’s take a look at the following URL: http://example.com/search?someParam=someValue&anotherParam=anotherValue. The information that we are interested in consists of two key-value pairs: {someParam: 'someValue', anotherParam: 'anotherValue'}. To the surprise of many developers, there did not exist a native solution with sufficiently large browser support. That is why you had to use libraries like jQuery or come up with your own home-made solution that often became quite complex.

Such a common task needed a built-in solution…

The this keyword causes some confusion for many JavaScript programmers, especially those coming from other languages. A frequently asked question is how to access the correct this inside a callback function.

Consider the following code snippet:

The code is not resulting in the desired output. What is the problem here? Why is data behaving as intended, but this.data is not?

Well, the problem is that the value of this depends on where the function is executed. This is called runtime-binding. Every other variable’s value depends on where the function is defined.

The common misunderstanding in this example comes from…

People who are new to asynchronous programming are often confused by the following situation:

While this example shows a specific use case for an AJAX call, it represents a much more general pattern: synchronously returning the result of an asynchronous function. Though transforming an asynchronous call into a synchronous one is not possible in JavaScript, I will show you how to solve your problem without destroying the idea behind asynchronous programming.

Types of Asynchronous Functions

Before we jump to a conclusion, we should take a quick look at the most common types of asynchronous functions. They differ in the way they provide their…

Let me explain my approach to combine the advantages of text based tutorials with video tutorials.

Video Tutorials

Coding tutorials typically consist of explanations and code. In a video tutorial, we can let the user see the code and listen to our explanations at the same time. This is a very natural way of learning and it is always clear what part of the code is currently being explained.
However, video tutorials come with several downsides: they are hard to navigate, consume a lot of bandwidth and are also hard to change/update for the author. …

What Is a Set?

A set is a collection of unique values. This means that no value can occur twice or more in the set. So it is really only that one restriction that makes a collection of values a set.¹

Which operations do we usually perform on a set? The most common are:

• Add an element.
• Remove an element.
• Check if the set contains an element.

Arrays vs. Objects vs. ES6 Sets

Before ES6, it was common practice to use arrays and plain objects as sets in JavaScript. Let us compare these basic operations on arrays, plain objects, and ES6 sets:

Arrays:

Objects:

ES6 sets:

So…