Photo by Jonatan Pie on Unsplash

There are literally tons of resources on the internet that go over algorithm prep and how to ace the software engineering interview. In fact, if you printed all of them, and launched them into space, they would probably collapse together under their own weight and start to orbit the Earth as our second Moon. Every time you looked up at the night sky you would see the graph question you got at your last Google interview that made you cry.

It’s hard to know where to start, given this immensity of resources, but I do think there’s a baseline set of problems that you can study that should give you good coverage across most of your technical interviews. This article would probably be most helpful to those just finishing college or a bootcamp or have one to a few years of experience as a front-end or full-stack engineer and are on the job hunt. Or you might just like this stuff. Whatever floats your buffer.

Broadly speaking, when it comes to the coding portion of Front-End / Full-Stack interviews, you’ll either be faced with a more Front-End focused interview that revolves around your JavaScript knowledge and how much JS wizardry you command (are you Gandalf or are you the “Wizard” of Oz) or you’ll have to do some algorithms / data structures.

So I’ve broken this article into two sections, one focusing on each general topic. You’ll find a description of the kind of task, topic, or exercise that would be great practice as well as links to further study material. Exercises are highlighted in bold.

I’d like to emphasize that this is a CHEATSHEET and should be treated as such. It’s not meant to be exhaustive in topic coverage, it’s just meant to point you in the direction of problems that come up relatively often in interviews. I will dive deeper into some of these topics in their own posts. So stay tuned!

Note: Skip to the bottom if you want a TL;DR cheatsheet of a cheatsheet with links to all the resources I’m suggesting.

JavaScript Prep

Photo by Christopher Robin Ebbinghaus on Unsplash

General Advice

It’s easy to get caught up in the hype about the latest and greatest tools. React is top of the market right now, but before that it was AngularJS, and before that it was Backbone.js. That’s not to say that you shouldn’t learn new technologies, you need to stay on top of the market to make a living, but you shouldn’t put the technology over the language and you should always aim to pick the right tool for the right job.

So, generally speaking, you want to prioritize becoming excellent at JavaScript. You need to understand how JavaScript implements inheritance, what are higher order functions and closures, what’s the Event Loop, etc. Doing so will make it easier to pick up new technologies. Don’t try to learn everything though, have a just-in-time model for learning what you need to when you need to.

I don’t go into any detail on React in this article. Know that it will come up in interviews and study up on it. It’s far more important to git good at JavaScript because it makes you a better React developer. I’ll follow up with a post dedicated to React and dive into more detail.

JavaScript30

Wes Bos is awesome, he has so many great resources that are so useful for learning about web development.

In particular, I highly recommend his free JavaScript30 course. The course centers around 30 different JavaScript exercises, each focusing on a different aspect of the language. The idea is you do at least one exercise a day every day for a month, but of course you can do more. Not all of the exercises will be relevant for the job you’re going for (chances are you won’t be using much canvas at your next job) but overall they’re great for practicing JS.

Implementing a Modal

This one is probably a little controversial but hear me out.

I’ll first acknowledge the proverbial elephant in the room. Modals are, in mine and many others’ opinion, a blight upon the modern web. They’re often neglected with respect to accessibility, they’re difficult to style and maintain, and they make for a really bad experience on mobile.

That said, it’s a great exercise to implement a modal from scratch, using just JS, HTML, and CSS (NO FRAMEWORKS) because it challenges you to use some front-end web dev muscles that may have atrophied. This has come up for me a couple of times in front-end interviews and is asked at a decent enough rate that it’s worth doing the exercise.

The Event Loop

JavaScript is single-threaded, and yet it seems to be able to do more than one thing at once. You can call some asynchronous code and run other code while the asynchronous code takes its time to complete. How is this possible? The answer is the Event Loop.

The Event Loop is JavaScript’s concurrency model and any good JS developer needs to understand what it is and how it works. Fortunately, there’s a fantastic video on YouTube that just recently surpassed 1 million views on exactly this topic.

JS Promises (and Async Techniques)

You need to understand what promises are and how to use them. Read the MDN docs on what promises are and how to use them in JS.

If you want a one-liner for what a promise is, think of a promise as “an object that is a placeholder for a future value”.

A great way to practice using promises is to promisify some Node.js callback based functions e.g. fs.readFile or fs.writeFile and then use them.

Broadly speaking, a good JS engineer needs to have a strong understanding of callbacks, promises, and async-await. You need to understand the different ways of handling asynchronicity in JS and be comfortable using promises and async-await in modern JS.

OOP / Inheritance / this

You’re not expected to be an OOP whiz, at least not in junior or entry level interviews, but you are expected to understand how to create classes, add methods and properties, and how to subclass.

In order to do all of the above you need to a) have a very strong understanding of the this keyword and b) have a very strong understanding of how JavaScript implements inheritance. Spoiler alert, it’s not true inheritance. The technical term is prototypal delegation.

Kyle Simpson is an amazing teacher and has an excellent e-book series called You Don’t Know JS. In general, you should read through the whole series to get a better understanding of JavaScript. In particular, he has a section on this and object prototypes that would be instrumental in understanding how JavaScript implements inheritance and how to work with classes.

Once you’ve read through that, an exercise you can do is to implement a set of classes and subclasses in ES5, not ES6. In other words, you can’t use the Class keyword. This will force you to understand how to work with the object prototype and show you what’s going on under the hood with ES6 classes because they’re really just syntactic sugar for the ES5 version of classes and subclasses. I suggest making something like a Car class and a bunch of subclasses that are variations on a Car e.g. Van, Roadster, Truck, etc.

REST

It’s important to have a solid conceptual understanding of REST. If you already have an understanding then great, if not, I will shamelessly plug this repo I put together on the topic. You can also skip straight to the Medium article.

There are plenty of other articles you can read if you google “What is REST?” but the repo should do a decent job of clarifying some nuances.

Data Structures and Algorithms

Photo by Barna Bartis on Unsplash

General Advice

Whenever you’re given an algorithm question, you need to ask yourself, “what data structure, if any, would help me solve this question?” As you practice more problems, you’ll get a feel for which situation calls for which data structure.

Also, when you’re practicing problems you’re likely to revisit them multiple times. I’d recommend keeping a spreadsheet and tracking how long it takes you to solve a problem. If you couldn’t solve the problem, make note of where you got stuck. Using LeetCode difficulties as a benchmark, you’ll want to solve easy problems in 5–10 minutes, medium problems in 10–20 minutes, and hard problems in no more than 30 minutes. On your spreadsheet, you’ll mark your time and where you got stuck so you know what to study for the next time you revisit the problem. You’ll want to start the problem fresh so I’d recommend revisiting after a few days have passed.

Stacks and Queues

Stacks and Queues are fundamental data structures that come up often in algorithm questions because they’re necessary to solve the underlying problem efficiently. They’re also fundamental for BFS / DFS (see below).

Did you know that you can implement them using a linked list or a ring buffer? What the F is a ring buffer you might ask? Definitely google it if you haven’t heard of it, it’s pretty interesting.

LeetCode has an excellent explore card for learning about queues and stacks.

BFS and DFS

BFS (breadth-first search) and DFS (depth-first search) are graph traversal algorithms. Problems that need to be solved using BFS/DFS come up very often. In fact, I’ve never gone through a job search without being asked a BFS/DFS question.

In particular, it’s important to know how to BFS/DFS through a matrix (2D array). Given a matrix, how do you represent a vertex and how do you represent an edge? I’ll let you noodle on that. If you’ve gone through the queue-stack exercises listed above, you’ll know how to answer this.

I’ve also curated a list of some good BFS/DFS problems on LeetCode. There’s a decent chance you get some variation of the Island Count problem in an interview. The most basic form is something like: Given a 2D array of integers, where 0 represents water and 1 represents land, count the number of islands in the 2D array. Islands are contiguous sets of 1s surrounded by 0s. The linked list (see what I did there?) above has a couple of those kinds of problems, so they’re well worth your time.

Another excellent exercise to practice BFS/DFS is to implement Minesweeper in the terminal. The algorithms for revealing cells and counting surrounding bombs are particularly interesting. If you want to make this a full-stack exercise, you can create a web-based UI. I’ve been asked to implement Minesweeper in each of my job searches and some friends of mine have also seen it come up in their interviews, so this is definitely an exercise worth completing. Plus, it’s super fun to do!

Arrays and Strings

Array and string problems come up often in initial coding screens e.g. HackerRank or TripleByte tests. They also have a fairly good range of difficulty. I’d recommend practicing the top easy problems on LeetCode where you’ll find plenty of string and array problems.

Once you’ve gone through the easy problems, you can move on to the medium and hard problem lists. Here is where my advice about keeping a spreadsheet of problems and tracking your progress comes in handy. When you’re unable to solve a problem on your own, you need to note why you couldn’t solve it so that you know what to study for the next time you come around to trying the problem. This way, working through these problems isn’t like just ticking off check marks in a todo list, you’re polishing up skills and concepts you’re rusty on or don’t fully understand.

TL;DR

Below are links to resources to help you prepare for topics that come up very often in JavaScript and Data Structures / Algorithms interviews.

Read, watch, and/or do the following:

The Event Loop

Implement Minesweeper in terminal and/or make a Minesweeper web app

Implement a modal from scratch using just HTML, JS, CSS

Implement a Car class and various car subclasses e.g. Van, Truck, Roadster in ES5, not ES6

Closing Thoughts

All of the above is just a snippet of what’s out there, but that’s what makes this field so fun! There’s always something new to learn.

Feel free to follow me on Twitter or on Medium (Kevin Arthur) for more content like this.

Happy studying!