This content originally appeared on DEV Community and was authored by Per Enström
My colleague approached me the other day with a line of JavaScript code he had found on Stack Overflow, 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
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
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
const a = myObject.a;
const b = myObject.b;
doStuff(a, b);
we can shorten it to
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
const myFunction = (myObject) => {
console.log(myObject.a);
console.log(myObject.b);
};
can be written as
const myFunction = ({ a, b }) => {
console.log(a);
console.log(b);
};
Object shorthand form
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:
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.
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
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
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).
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
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
const myLog = (text) => {
console.log('Hello ' + text);
};
myLog('world');
we can call it directly without assigning it first
((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:
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.
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
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.
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.
const myFunction = (inputObject) => {
const a = inputObject.a;
const b = 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.
const myFunction = (inputObject) => {
const a = inputObject.a;
const b = 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
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.
This content originally appeared on DEV Community and was authored by Per Enström
Per Enström | Sciencx (2021-12-10T14:09:35+00:00) Four tricky JavaScript concepts in one line of code. Retrieved from https://www.scien.cx/2021/12/10/four-tricky-javascript-concepts-in-one-line-of-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.