There’s a better way to do that

Image for post
Image for post
Photo by Steve Johnson on Unsplash.

A map is one of the most frequently used data structures in daily programming. It keeps key-value pairs that can easily be accessed by their keys. In Java, it is pretty obvious to use a HashMap for that. However, in JavaScript, it is quite convenient to just use a plain object for that purpose:

But there is a built-in data structure in JavaScript that was made for exactly that purpose: Map. Let me give you some reasons to prefer Map over plain objects.

1. More Key Types

Objects can only have symbols or strings. …


Build bug-free apps

Rubik’s cube
Rubik’s cube
Photo by ALAN DE LA CRUZ on Unsplash.

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:

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?


Avoid bugs by understanding how the array method works

Woman holding out her hand as a stop signal
Woman holding out her hand as a stop signal
Photo by Isaiah Rustad on Unsplash.

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…


Safely access URLSearchParams

Code
Code
Photo by Markus Spiske on Unsplash.

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…


Let’s address the confusing keyword once and for all

Toy figurine
Toy figurine
Photo by Edo Nugroho on Unsplash.

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…


Leverage promises in your asynchronous functions

Stormtrooper by a bridge
Stormtrooper by a bridge
Photo by Angelo Abear on Unsplash.

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…


Image for post
Image for post

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. …


Sets combine the best parts of arrays and objects

Image for post
Image for post
Photo by Jonathan Mast on Unsplash.

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…


Image for post
Image for post

Classic 2D top-down RPGs often come with a movement that is grid-based. That means that your player can either walk a whole tile in the grid or not walk at all. It is not possible by design to walk part of a tile. Imagine a chessboard. A chess piece can only be on one field at a time. This article shows how you can implement such a movement with Phaser 3 and TypeScript.

Please note that I bundled the functionality described in this article into a Phaser 3 plugin.

Pixel Position vs. Tile Position

The Phaser arcade physics engine already provides everything we need to…


let vs. var inside your loop

Image for post
Image for post
Photo by Mika Korhonen on Unsplash

I stumbled over two code snippets that made me think about the scoping in for loops and about a possible misunderstanding. The first one looks as follows:

You can see it from time to time to demonstrate the event loop, the concept of closures, or as an interview question. The output of that code is:

The variable i is captured in the closure of the anonymous function that calls console.log() and is invoked asynchronously via setTimeout(). …

Johannes Baum

Software Engineer 🚀 JavaScript 👾 TypeScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store