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.

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


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.

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


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:

3
3
3

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


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

Image for post
Image for post
Photo by Phil Shaw on Unsplash

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(...), …


Learn about the most popular string-iteration techniques in JavaScript

Image for post
Image for post
Photo by Yurii Stupen on Unsplash

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…


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


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

Image for post
Image for post
Photo by Caleb Jones on Unsplash.

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


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

Image for post
Image for post

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


LIFO versus FIFO

Image for post
Image for post

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


Image for post
Image for post

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


Image for post
Image for post

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

About

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