# 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:

# 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 far, so good. ES6 sets are a bit more concise to use on these operations, but does this really justify using a more complex data structure? …

# Grid-Based Movement in a Top-Down 2D RPG With Phaser 3

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.

# Pixel Position vs. Tile Position

The Phaser arcade physics engine already provides everything we need to implement a 2D movement that is pixel based. However, we wish that the player is only able to move whole tile distances. In our example this will be multiples of 48 pixels. Therefore it will always be clear on which tile of the map the player is positioned and which are the neighbouring tiles. This allows us to logically see the coordinates of game items in a tile grid coordinate system. So instead of saying “the player is currently located at position x = 159 pixels and y = 252 pixels” we can simply say “the player is currently located at position x = 3 and y = 4” meaning the third tile from the left and the fourth tile from the top. …

# Scoping in JavaScript For Loops

## let vs. var inside your loop

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:

`333`

The variable `i` is captured in the closure of the anonymous function that calls `console.log()`

# Is Deep Cloning Coming to Our Browsers?

## Read about a possible exposure of the structured clone algorithm in major browsers

There are many discussions on the web about deep cloning in JavaScript. While there are native solutions like destructuring or `Object.assign()` for shallow clones, deep clones had to be created using third-party libraries like Lodash or abusing APIs like MessageChannel to take advantage of unexposed implementations of structured cloning as proposed by the HTML standard.

According to the usage of third-party libraries like Lodash, the popularity of questions regarding deep cloning in JavaScript on Stack Overflow, and the common (and in many cases problematic) usage of `JSON.parse(JSON.stringify(...)`, …

# How to Iterate Through Strings in JavaScript

## Learn about the most popular string-iteration techniques in JavaScript

For many things in JavaScript, there’s not a single way to achieve them. A thing as simple as iterating over each character in a string is one of them. Let’s explore some methods and discuss their upsides and downsides.

Before we start, we need to come back to a much more basic question.

# How to Access a Single Character of a String

Nowadays with ECMAScript 2015 (ES6), there are two ways of accessing a single character:

## charAt()

This method of the string object has been around for some time now and can be seen as the classic approach. It’s supported even in oldest browsers.

## Bracket notation

The second method is accessing a character via bracket…

# Stop Using Objects as Hash Maps in JavaScript

## There’s a better way to do that

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

# 5 Ways to Find the Shortest Path in a Graph

## Dijkstra’s algorithm is not your only choice. Find the simplest algorithm for each situation

When it comes to finding the shortest path in a graph, most people think of Dijkstra’s algorithm (also called Dijkstra’s Shortest Path First algorithm). While Dijkstra’s algorithm is indeed very useful, there are simpler approaches that can be used based on the properties of the graph. These can be very handy in competitive programming contests or coding interviews, where you might be forced to code up a shortest-path algorithm by hand. You need the simplest approach possible to reduce the possibility of bugs in your code.

In case you are not familiar with graphs or depth-first search (DFS) and breadth-first search (BFS), I recommend reading this piece. …

# Data Structures in JavaScript: Graphs

## Learn what you need to know about graphs and their basic algorithms to ace your next coding interview

Welcome to my follow-up article to Basic Interview Data Structures in JavaScript.

This article focuses on the implementation of graphs and their most important algorithms in JavaScript. Many interview questions can be solved by building a graph and running specific algorithms on it. That makes graphs one of the most important data structures to know for a coding interview.

Make sure you are familiar with big-O notation to understand the asymptotic time complexity of the different algorithms.

# What Is a Graph?

Simply put, a graph is a collection of nodes with edges between them. …

# Basic Interview Data Structures in JavaScript: Stacks and Queues

## LIFO versus FIFO

Welcome to my follow-up article to “Basic Interview Data Structures in JavaScript”, where I described the JavaScript implementations of arrays, array lists/vectors, hash maps, and hash sets for the use in coding interviews. This article focuses on stacks and queues.

Stacks and queues are commonly used in interview questions, and certain problems can be solved very efficiently by using them. Two very famous algorithms that rely on stacks and queues are depth-first search and breadth-first search, both used to traverse a graph.

# Stacks

A stack is a so-called last in first out (lifo) data structure that works like a pile of plates. You can easily take the plate on top of the pile, but if you want to take a plate from the bottom, you first have to remove all of the plates on top of it. …

# Basic Interview Data Structures in JavaScript: Linked Lists

Welcome to my follow up article to Basic Interview Data Structures in JavaScript, where I describe the JavaScript implementations of arrays, array lists / vectors, hash maps and hash sets for the use in coding interviews. This article focuses on linked lists.

A linked list is a simple data structure that can be very handy when you need to efficiently insert/remove nodes at any position of the list. To do that efficiently you simply need a pointer to the previous node.

As in my previous article, I will give you the runtime complexity for the data structure:

• Insertion (insert an element)…

# Basic Interview Data Structures in JavaScript

Data structures have become essential when it comes to coding interviews nowadays. Large tech companies like Google, Microsoft, Facebook, Apple and Amazon started to focus a lot on algorithms and data structures in their interviews and many smaller companies followed this trend. These interviews typically involve coding on a whiteboard using a common programming language like C++, Java or Python.

During the last years JavaScript gained a lot of attention and is getting more relevant for interviews. However, most books and coding interview tutorials focus on C++, Java or Python. It can be tricky to convert ideas and data structures from those languages to performant JavaScript. …