Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

To get a job as a front end developer, we need to nail the coding interview.

In this article, we’ll look at some functions and object questions.

What are Arrow Functions?

Arrow functions are a new way to define functions in JavaScript. It’s available since ES2015.

It takes away the confusion with this since it doesn't bind to this and so they can’t be used as constructor functions.

They also can’t be hoisted, so they can only be used after they’re defined.

Also, they don’t bind to the arguments object, so we can’t get the arguments that are passed into arrow functions with it like in function declarations.

To get arguments from an arrow function, we use the rest syntax as follows:

const getArgs = (...rest) => rest

For example, we can define an arrow function as follows:

const currentDate = () => new Date();

In the code above, we defined the arrow function with => and returns new Date() to return the current date.

If we want to return something in a multi-line arrow function, we have to write return explicitly like any other function.

For example, we can write:

const currentDate = () => {
  return new Date();
}

to return new Date() explicitly in a multi-line arrow function.

We can pass in parameters like any other function as follows:

const identity = (obj) => {
  return obj;
}

What are Classes?

In JavaScript, classes are syntactic sugar for constructor functions. It’s used to create instances of a class but hides the prototype manipulations from our view.

Underneath, it still uses the prototype inheritance model that it has always been using.

For example, if we have the following chain of classes:

class Person {
  constructor(firstName, lastName) {
    this.lastName = lastName;
    this.firstName = firstName;
  }

  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

class Employee extends Person {
  constructor(firstName, lastName, title) {
    super(firstName, lastName);
    this.title = title;
  }

  getTitle() {
    return this.title;
  }
}

In the code above we have the Person class with a constructor and a method to get the full name.

Then we have the Employee class that extends the Person class as we indicated with the extends keyword.

In the constructor, we call the Person class’s constructor and also set the title field, which is exclusive to Employee.

We also added a getTitle method.

The JavaScript interpreter will give us an error if we forgot to call the super function.

This is the same as the following code, written with constructor functions:

function Person(firstName, lastName) {
  this.lastName = lastName;
  this.firstName = firstName;
}

Person.prototype.fullName = function() {
  return `${this.firstName} ${this.lastName}`;
}

function Employee(firstName, lastName, title) {
  Person.call(this, firstName, lastName);
  this.title = title;
}

Employee.prototype = Object.create(Person.prototype);

Employee.prototype.getTitle = function() {
  return this.title;
}

The code above is the same as what we had with the classes, except that we get no errors if Person.call or Object.create was missing.

We also have to add things to the prototype of each constructor function outside the function.

Even though we don’t use the constructor function syntax, we have to know that the class syntax is just syntactic sugar for constructor functions.

What is Object Destructuring?

Object destructuring is a clean way to assign array entries or object properties into their own variables.

For example, we can use it to decompose array entries to individual variables as follows:

const [one, two] = [1, 2];

Then one is 1 and two is 2.

The code above is the same as:

const arr = [1, 2];
const one = arr[0];
const two = arr[1];

Likewise, we can do the same with an object as follows:

const {
  one,
  two
} = {
  one: 1,
  two: 2
}

Then the one property’s value is assigned to one , and two ‘s value is assigned to two .

The code above is the same as:

const obj = {
  one: 1,
  two: 2
}
const one = obj.one;
const two = obj.two;

As we can see, object and array destructuring is much cleaner than the old way.

We can also set variables to default values by writing:

const [one, two, three = 3] = [1, 2];

Then since three has not array entry assigned to it, three has a value of 3.

Conclusion

Arrow functions are useful for creating functions that aren’t constructor functions. They don’t bind to this. Also, it’s shorter since we don’t have to write return to return something if it’s one line.

Classes in JavaScript are syntactic sugar for constructor functions. It lets us do inheritance and create instance methods easier since we don’t have to manipulate prototypes directly and the JavaScript interpreter will give us errors if we missed anything.

Object and array destructuring let us assign object or array entries into variables in a clean way.