JavaScript Interview Questions — Functions and Objects
Tags: javascript, webdev, programming, beginners
Published: 2021-01-24 01:57:33

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