JavaScript Best Practices — Function Signature and Arrow Functions
Tags: javascript, codenewbie, codequality, webdev
Published: 2020-07-18 21:10:21

---
title: JavaScript Best Practices — Function Signature and Arrow Functions
published: true
date: 2020-07-18 20:35:10 UTC
tags: javascript,codenewbie,codequality,webdev
canonical_url: https://thewebdev.info/2020/07/18/javascript-best-practices%e2%80%8a-%e2%80%8afunction-signature-and-arrow-functions/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-best-practices%25e2%2580%258a-%25e2%2580%258afunction-signature-and-arrow-functions
---

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 how to format long function signatures and the best use of arrow functions.

### Format Long Signatures by Putting Each Parameter in a New Line

If our function signature is long, then we should separate our arguments into a new line. For instance, we can write the following code to separate our arguments into their own line:

```
function foo(
  bar,
  baz,
  qux
) {}

```

In the code above, we have a `foo` function with 3 arguments `bar` , `baz` , and `qux` .

We separated each parameter into their own line, with `,` and a new line separating the parameters.

Likewise, we can do the same thing with a long list of arguments. For example, we can write the following code to put arguments into their own line for function calls:

```
foo(
  bar,
  baz,
  qux
)

```

In the code above, we have `bar` , `baz` and `qux` all in their own line. The comma and newline separate the arguments instead of just a comma.

### When We Use an Anonymous Function, We Should Use Arrow Function Notation

Arrow functions are a great feature of JavaScript. It lets us define functions in a shorter way, and it doesn’t bind to its own value of `this` or `arguments` .

Also, we can return the last expression of the function as its return value if the expression that’s to be returned is in the same line as the function signature.

This is great for callbacks and other kinds of anonymous functions since we don’t have to deal with `this` and `arguments` with them most of the time.

For instance, if we call the array instance’s `map` method, then we need to pass in a callback.

Most of the time, we don’t need to manipulate `this` in our code, so we can just use arrow functions as callbacks.

For instance, we can write the following code to map our array entries into new values as follows:

```
const arr = [1, 2, 3].map(a => a ** 2);

```

In the code above, we called `map` on the array `[1, 2, 3]` . To do that, we passed in a function which maps the entry to a new value that’s squared of the value of the original entry.

Since the expression we’re returning is in the same line as the function signature and the arrow, it’ll return it without adding the `return` keyword explicitly.

If we want to return expressions that are more than one line long, then we need to wrap it around parentheses.

For instance, we can write a function to do the following:

```
const foo = () => ({
  a: 1
})

```

Then when we call `foo` , we get that its’ return value is:

```
{
  a: 1
}

```

In the function above, we wrapped the object around parentheses so that we return the object.

Arrow functions are much shorter than traditional functions since we don’t need the `function` keyword in all cases and the `return` keyword is omitted if the item we return is in the same line as the signature.

If we call the `map` method with a traditional function, then we have to write the following code:

```
const arr = [1, 2, 3].map(function(a) {
  return a ** 2
});

```

As we can see, our callback function now spans 3 lines instead of 1. And we have to type out the `function` keyword.

With all these benefits that arrow function brings, we should use them whenever we can. As long as we don’t need to reference `this` or use defines a constructor function, we can use it.

![](https://cdn-images-1.medium.com/max/800/0*mtlHduOf5jhT-gWy)Photo by [David Clode](https://unsplash.com/@davidclode?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

### Use Implicit Return for Returning an Expression Without Side Effects

As we can see from the examples in the previous sections, we should skip the braces and the `return` keyword if we have functions that return something on the first line of an arrow function.

We also should make sure that if an arrow function does an implicit return that it doesn’t commit any side effects.

For instance, given the `map` call we have in the example above:

```
const arr = [1, 2, 3].map(a => a ** 2);

```

In the function, we have `a => a ** 2` so that we can return implicitly by skipping the braces and `return` keyword. Also, note that all it does is returning the expression and it’s not modifying anything outside the function.

### Conclusion

Long function signatures and function calls should have parameters and arguments separated onto their own line.

Also, we should use arrow functions so that we can benefit from the features that it brings like conciseness and not having to worry about the value of `this` .

The post [JavaScript Best Practices — Function Signature and Arrow Functions](https://thewebdev.info/2020/07/18/javascript-best-practices%e2%80%8a-%e2%80%8afunction-signature-and-arrow-functions/) appeared first on [The Web Dev](https://thewebdev.info).