Four tricky JavaScript concepts in one line of code
Tags: javascript, webdev
Published: 2021-12-10 14:09:35

My colleague approached me the other day with a line of JavaScript code he had found on [Stack Overflow](https://stackoverflow.com/a/39333479/563926), and asked how it worked. And I thought it was such a good example of four mid to advanced concepts in JavaScript so I decided to write down my explanation here as well.

The line in question is this
```Javascript
const result = (({ a, c }) => 
  ({ a, c }))({ a: 1, b: 2, c: 3, d: 4 });
```

Before reading on, give it a think and see if you can work it out by yourself.

Ready to go on? Let’s go.

## Object destructuring
[Documentation at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

Object destructuring is the concept of picking properties from an object in batch instead of manually accessing each property and assigning them to a variable. Say you have an object coming in as a parameter in some function, and you want to do stuff with only a few of the properties of that object. Object destructuring makes that possible.

Instead of doing
```Javascript
const a = myObject.a;
const b = myObject.b;

doStuff(a, b);
```

we can shorten it to
```Javascript
const { a, b } = myObject;

doStuff(a, b);
```

which does the same thing. This makes the code much smaller, especially when we do stuff to multiple properties of an object. This saves us writing the full property path every time.

The fancy stuff here is that this sort of destructuring works anywhere we have an object. Even when assigning input parameters for a function. So 

```Javascript
const myFunction = (myObject) => {
  console.log(myObject.a);
  console.log(myObject.b);
};
```

can be written as 

```Javascript
const myFunction = ({ a, b }) => {
  console.log(a);
  console.log(b);
};
```

## Object shorthand form
[Documentation at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#new_notations_in_ecmascript_2015)

When composing objects, we often have incoming parameters from somewhere, and transform them and then return a new object. This can often look like this:

```Javascript
const someDescriptiveName = doStuff(a);
const someOtherDescriptiveName = doOtherStuff(b);

const newObject = {
  someDescriptiveName: someDescriptiveName,
  someOtherDescriptiveName: someOtherDescriptiveName,
};
```

As you can see, this feels very repetitive. We're assigning the property with the key of a certain name with the contents of a variable with the *same name*. Luckily there is a shorter way of writing this.

```Javascript
const someDescriptiveName = doStuff(a);
const someOtherDescriptiveName = doOtherStufF(b);

const newObject = {
  someDescriptiveName,
  someOtherDescriptiveName,
};
```

We can just put the variable name once, and JavaScript will understand that we want a property of the same name as the variable whose value we're using.

## Implicit return in arrow functions
[Documentation at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

When an arrow method only has a return statement, it can be shortened to an implicit form. Quite often we write methods that only return a ternary, or a promise, or the result of a simple calculation. In this case, we don't need a full code block around the function content.

Instead of doing

```Javascript
const multiplyByTwo = (inputNumber) => {
  return inputNumber * 2;
};
```

we can remove the `return` keyword and remove the curly braces (or replace them with parentheses if returning an object literal).

```Javascript
const multiplyByTwo = (inputNumber) => inputNumber * 2;
```

_Tip: In Visual Studio Code, you can put the text cursor in the middle of the arrow part of the arrow function and press `cmd + .` to bring up the Quick fix menu, where you can quickly add or remove the braces from the function._

## Calling an anonymous function directly
[Documentation at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#basic_usage)

This is the least used of these four concepts. And possibly also the most confusing. It lets us invoke an arrow function immediately, without assigning it to a variable.

Instead of doing
```Javascript
const myLog = (text) => {
  console.log('Hello ' + text);
};
myLog('world');
```

we can call it directly without assigning it first
```Javascript
((text) => {
  console.log('hello ' + text);
})('world');
```

This is very rarely useful, but can be nice in some situations where you need to call an asynchronous method in a context that isn't marked as `async`.

## Back to our confusing line
With these four parts, we can now start deconstructing the confusing line into something that makes sense. If you've already forgotten, that's alright, here it is again:

```Javascript
const result = (({ a, c }) => 
  ({ a, c }))({ a: 1, b: 2, c: 3, d: 4 });
```

We start from the back, and see that this is an arrow function that's being called immediately. Let's assign the function to a variable and call that instead.

```Javascript
const myFunction = ({ a, c }) => ({ a, c });

const result = myFunction({ a: 1, b: 2, c: 3, d: 4 });
```

Let's also move the input object to a variable to make it a bit cleaner

```Javascript
const myFunction = ({ a, c }) => ({ a, c });
const myObject = { a: 1, b: 2, c: 3, d: 4 };

const result = myFunction(myObject);
```

This is already much more readable. But let's keep going. We now direct our focus to the arrow function, where we see that we can start by adding back the curly braces and return keyword.

```Javascript
const myFunction = ({ a, c }) => {
  return { a, c };
};
const myObject = { a: 1, b: 2, c: 3, d: 4 };

const result = myFunction(myObject);
```

The next step is to remove the destructuring in the function input parameters.

```Javascript
const myFunction = (inputObject) => {
  const a = inputObject.a;
  const c = inputObject.c;

  return { a, c };
};
const myObject = { a: 1, b: 2, c: 3, d: 4 };

const result = myFunction(myObject);
```

And the final step is to remove the shorthand form of the object returned from our function. 

```Javascript
const myFunction = (inputObject) => {
  const a = inputObject.a;
  const c = inputObject.c;

  const newObject = {
    a: a,
    c: c,
  };

  return newObject;
};
const myObject = { a: 1, b: 2, c: 3, d: 4 };

const result = myFunction(myObject);
```

So there we have it. We have now removed the four magic JavaScript concepts and have something that requires only basic knowledge.

## When is complex too complex?
As with most of these kinds of questions, it will vary greatly between different developers and teams. But as a developer your code should always be readable without too much work. But at the same time, we cannot _not_ use the concepts available to us in the language, we just have to know when to use them.

I would write this line as

```Javascript
const pickAC = ({ a, c }) => ({ a, c });
const myObject = { a: 1, b: 2, c: 3, d: 4 };

const result = pickAC(myObject);
```

This makes it much more readable than the one-liner, while at the same time keeping it short and concise. Calling an anonymous function immediately is a concept so rarely used that – in my opinion – it should only be used when absolutely necessary. But, to each their own, just make sure you agree amongst the team.