Cheat sheet for JavaScript interviews

JavaScript with HTML and CSS is the building block of the World Wide Web. Over 98% of websites use JavaScript as the dominant client-side programming language to control the behavior of web pages. Given its features and capabilities, JavaScript is one of web development’s most popular programming languages.

Any JavaScript interview can go from a preliminary evaluation of your fundamental skills to a comprehensive, in-depth benchmark of your programming skills.

This article includes the ultimate cheat sheet for JavaScript interviews and some commonly required quick, tested, and ready-to-use code snippets.

1. Explore the “this” keyword 

In JavaScript, the “this” is a reserved keyword we cannot use as an identifier. This keyword changes its behavior according to the use case. While the strict mode is set “this” as undefined, you can change its context by using call, apply, and bind functions.

With the call, apply, and bind functions, you can change the behavior of “this” to create a more generic function. Here is an example:

const name = “Hey”function foo() {

   ‘use strict’

  console.log(this.name)

}const context = {

   name: “Hello World!”

}foo.call(context) // Hello World!

foo.apply(context) // Hello World!

foo() // Cannot read properties of undefined (reading ‘name’)

Closely look at the call and apply. While they might seem similar, the former accepts the parameters as individual arguments while the latter expects them as an array. The bind changes the context of “this” and returns a new function.

2. Prototypes

A JavaScript prototype is an object associated with every function and object by default. However, a function’s prototype property is accessible and adaptable in the code, but the object’s prototype property is not visible.

An essential use of the prototype object is to create an ienumerable object to which additional properties can be attached, and it can be shared across all the instances of its constructor function.

Here’s an example code:

// constructor function

function Person () {

   this.name = ‘John’,

   this.age = 23

}

// creating objects

const person1 = new Person();

const person2 = new Person();

// adding property to constructor function

Person.prototype.gender = ‘male’;

// prototype value of Person

console.log(Person.prototype);

// inheriting the property from prototype

console.log(person1.gender);

console.log(person2.gender);

Output:

{ gender: “male” }

male

male

3. Function currying and callbacks

Currying and callbacks are essential processes in JavaScript. We use currying to transform a function with multiple arguments into a sequence of nesting function calls. The outcome of currying is a new function that expects the following statement inline.

A callback is a function that is passed into another function as an argument. Callbacks are first-class action features invoked inside the outer function to complete a particular task.

Code example:

function simpleFunction(param1, param2, param3, …..) => function curriedFunction(param1)(param2)(param3)(….)function calculateVolume(length) {

   return function (breadth) {

     return function (height) {

       return length * breadth * height;

     }

   }

}

console.log(calculateVolume(4)(5)(6)); // 120

4. Higher-order function

JavaScript allows you to pass a series of functions as an argument to another function and return a function. It is achieved through higher-order functions. They are usually used in complex applications where the returned function can consist of multiple properties or constants for further computations.

The higher-order function can be of multiple types, such as:

//Assign a function to a variable originalFunc

const originalFunc = (num) => { return num + 2 };

//Return the function’s body as a string

newFunc.toString(); //'(num) => { return num + 2 }’

//Add our own isMathFunction property to the function

newFunc.isMathFunction = true;

//Re-assign the function to a new variable newFunc

const newFunc = originalFunc;

//access the function’s name property

newFunc.name; //’originalFunc’

//Pass the function as an argument

const functionNameLength = (func) => { return func.name.length };

functionNameLength(originalFunc); //12

//Return the function

const returnFunc = () => { return newFunc };

returnFunc(); //[Function: originalFunc]

5. Patterns

For any JavaScript developer, it is essential to master patterns to optimize their code. JavaScript offers many kinds of patterns, but the most important ones are:

Mixin: this script pattern is used to extend the functionality of an object using list methods.

Factory: a class type that can create one or many different objects. It is dominantly used in unit testing to generate mock data.

Facade: it is used for the abstraction of a complex logic by wrapping it in the class. An example of a facade is the service that stays between the component and API layer.

Singleton: it is a class that can call the method directly without creating any object.

MVC, MVVM: JavaScript also allows the two most commonly used architectural patterns, Model View Controller and Model View ViewModel.

Conclusion 

Given the versatility and scope of JavaScript, it is beneficial to have access to cheat sheets that can help you quickly familiarize yourself with some crucial programming language features. This JavaScript cheat sheet for interviews is just the beginning; many more JavaScript resources exist to explore.

Talent 500 is the platform for JavaScript developers to explore career redefining opportunities with fast-growing start-ups and Fortune 500 companies. Sign up here to know more.