Top 10 JavaScript Concepts to Know for Your Next Interview


February 03, 2018

Here is a summarized infographic of this blog post.

JavaScript is a heavily misunderstood language. It has been for most of its short life. While the resources for learning JavaScript are plentiful, most learning content has huge gaps that leave most people either confused or lost about the features of the language.

JavaScript is an extremely easy language to start using. Because of this, there are thousands of JavaScript developers out there on the market. While JavaScript is an easy language to start with, it’s definitely hard to master.

To create extremely complex applications you don’t need to learn the fundamentals of JavaScript I’m about to go over, but these concepts will definitely help you to become 10x more efficient and help you jump from “junior” to “senior” roles.

Interviews

Most companies that are worth working for will ask you questions that test your knowledge of JavaScript to the point where it will be clear if you don’t have a deep understanding of how JavaScript works.

The following are the concepts that will help you answer any question in a JavaScript interview, assuming that you already know the language basics (variables, functions, callbacks, etc).

The concepts

This is just a high-level overview. I suggest you find different, more detailed, sources on each of the following topics if anything seems unfamiliar to you.

I will try to create tutorials for each of these concepts later on.


1. Scope

There are three different places (scopes) where a variable or function can be declared.

  1. Global scope
  2. Function scope
  3. Block scope

When a variable or function is defined, it first looks into the block scope. If it is not found in the block scope, it looks in the function scope. As a last resort, if the variable or function is not defined in the current block or function scopes, it looks in the global scope.


2. Hoisting

In the background, variable and function declarations are raised to the top of the scope where they are defined.


3. Higher-Order Functions

In JavaScript, functions are first-class citizens. This means that you can pass a function into another function, or return a function from another function.

A function that takes a function as a parameter or returns a function is called a higher-order function.


4. Closures

For a closure to happen, a function (inner function) has to be defined within another function (outer function) and have access to the outer function’s variable declarations.

Example:

// NOTE: If the following syntax seems unfamiliar, learn basic ES6 concepts as well.

function NumberScreamerGenerator(someNumber) {
  // this inner function is a closure
  // because it is a function defined
  // within another function and has
  // access to the "someNumber" variable
  return () => {
    return console.log(`I am screaming ${someNumber} !`);
  }
}

const FiveScreamer = NumberScreamerGenerator(5);
FiveScreamer(); // output: I am screaming 5 !

You need to understand the implications of closures, and how they can help you to write better code by allowing data hiding, memoization, and functional programming.


5. Asynchronous Programming

JavaScript is single-threaded, which means that only one thing can happen at a time. To make up for this, in JavaScript, there is something called an “event loop”.

The event loop helps us deal with user interactions such as clicks, user input, web requests, and several other events through the use of callbacks and promises so that the user interface doesn’t come to a screaming halt and the user gets quickly annoyed with our application.


6. References

When arrays, objects, or functions are passed into a function, something called a “reference” is passed into the function, not a copy of the array, object, or function.

This means that, for example, changing an array that was passed into a function, from within the function, will change the original array as well.

Only primitive values are copied when passed into another function.


7. “this” Keyword

The this keyword does not mean what you think it means if you come from an object-oriented language. To find the meaning of this, use the following four rules:

  1. new

Was the function containing this called from an object created by using the new keyword?

If so, this refers to the object created by using the new keyword. Find more about the new keyword below.

  1. explicit binding

Was call, apply, or bind used on the function that contains this?

If so, this refers to the function where call, apply, or bind, was used. Find more about the call, apply, or bind keywords below.

  1. object binding

Was the function containing this called by using an object’s method such as myObject.helloWorld()?

If so, following the example, this refers to myObject.

  1. default

If none of the previous rules apply, then this refers to the default object. In a browser, for example, the default object would be the window object.

Knowing how to figure out the meaning of the “this” in each context will be crucial to debugging advanced JavaScript code.


8. “new” Keyword

The new keyword in JavaScript can be somewhat related to Object Oriented Programming (OOP). When you call a function using the new keyword, five things happen:

  1. Run function like it normally would.
  2. A brand new empty object ({ }) will be created out of thin air.
  3. This brand new object gets “linked” to the prototype of the function where we used the new keyword.
  4. The this keyword, when used within our new object, is bound to the object created out of thin air.
  5. If the function where we are using new does not return anything, this function will implicitly return a reference to this.

As an additional note, calling a function using the new keyword can be referred to as a “constructor call”.


9. Difference Between “apply”, “call”, and “bind”

Know that apply, call, and bind modify the meaning of this. Other than that, the differences are subtle but meaningful.

Functions with apply and call are executed immediately. Functions with bind give you back a function that can be executed later.

call takes the function arguments as comma-separated values. apply takes function arguments as an array.


10. Prototypes & Inheritance

Inheritance in JavaScript is achieved through something called the “Prototype Chain”. You need to have an understanding of how to create a prototype inheritance chain, and how this type of inheritance is different than in typical object-oriented languages.

An object’s prototype can be accessed through the __proto__ property. Everything in JavaScript is an object, so everything in JavaScript contains this __proto__ property.


If you have any questions, please don’t hesitate to leave a comment. I will do my best to help out!


Written by Victor Dozal who lives and works in Austin, TX. He enjoys building useful things, writing about his journey as an engineer, and consuming lots of coffee. You should subscribe to him on YouTube :)

Need help with your project? Struggling with a problem? I'm at your service.