JavaScript Best Practices — Arrow Functions and Constructors

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at arrow functions signatures, spacing, and remembering to call super in a child class constructor.

Arrow Function Arguments

When we define arrow functions, we don’t need parentheses if our function only takes one parameter.

For instance, we can write the following to return something multiplied by 2:

const double = x => x * 2;

In the code above, our double function has a parameter x and return x multiplied by 2.

As we can see, we didn’t have parentheses wrapped around the signature, since it isn’t needed if the arrow function only has one parameter.

The parentheses for an arrow function with only one parameter is optional. We can put it in if we think it makes reading the function clearer. For instance, we can write the following:

const double = (x) => x * 2;

Which is the same as what we have in the previous example.

If our arrow function doesn’t have one parameter, then parentheses are required. For instance, we can write the following functions:

const foo = () => {};
const add = (a, b) => a + b;

In the code above, we have the foo function that has no parameters, so the function signature has to have parentheses wrapped around nothing to indicate that it takes no parameters.

Another example is the add function, which has 2 parameters, so we need parentheses to wrap around the a and b parameters.

Space Before or After an Arrow Function’s Arrow

An arrow function has a fat arrow as part of its function definition. Usually, we have a space character before and after the fat arrow.

For instance, we usually define arrow functions as follows:

const foo = () => {};

In the code above, we have the foo function, which has a space character both before and after the => fat arrow.

This spacing makes our function definition more clear and text that’s spaced out is easier to read than text that has no spaces between them.

Remember to Call super() in Constructors

If we have a class that extends another class in JavaScript, then we’ve to remember to call super so that we won’t get an error when we run our code.

For instance, if we have the following code:

class Animal {
  constructor(type) {
    this.type = type;
  }
}

class Cat extends Animal {
  constructor() {}
}

const cat = new Cat();

Then when we run the code above, we’ll get an error telling us to call the super constructor, something like ‘Uncaught ReferenceError: Must call super constructor in derived class before accessing ‘this’ or returning from derived constructor’.

This is good because we won’t forget to call super in Cat since the code won’t run.

Therefore, we should correct this mistake by writing the following code instead:

class Animal {
  constructor(type) {
    this.type = type;
  }
}

class Cat extends Animal {
  constructor(type) {
    super(type);
  }
}

const cat = new Cat();

In the code above, we called super in the Cat class’s constructor.

Even though JavaScript classes are just syntactic sugar for constructor functions, it does prevent us from making mistakes that are easy to make before we have the class syntax.

We have the extends keyword and the super function instead of calling the call method on the parent constructor to calling the parent constructor in the child constructor using the call method.

As we can see, there’s error checking to stop us from going in the wrong direction by making sure that we call super . Otherwise, the code won’t run.

With the old constructor function syntax, there’s no way to tell if we did anything wrong. Forgetting to call the parent constructor won’t give us any errors with the old syntax. We’ll just get unexpected behavior.

Conclusion

Arrow function signatures may not need parentheses if our arrow function only has one parameter.

Otherwise, if our arrow function has more than one parameter or no parameters, then we need the parentheses.

If we forgot to call super in the constructor in a child class, we’ll get an error, so that we won’t forget to call it since the code won’t run.

This is a great benefit of the class syntax since it has error checking built-in.

The post JavaScript Best Practices — Arrow Functions and Constructors appeared first on The Web Dev.