Do you know the ++code>(a, b); ++/code> syntax in JS?
You might have seen it if you read minified code - our favorite Sunday activity. I've always wondered about its purpose, and I've finally found a cool use case!
This is called the comma operator. You can find it in many languages, in multiple forms.
Here in our case, ++code>(a, b); ++/code> means "evaluate a, evaluate b, then return b.". The return value of a is discarded.
So, if I do ++code>const croute = (a, b); ++/code>, croute is equal to b, and I would still have computed a (…to no avail, unless there is a side effect in computing a).
Well, we found ourselves wanting to debug a very complex expression where we didn't even know where the calling function was. We didn't know where to put our console.log.
Note: our debugger wasn't working at that moment. Do as your parents told you, use a debugger if you can!
But thanks to this syntax, we can console.log any value in the middle of any expression. It's enough that, in our notation above, a is console.log(b) and b remains b. Thus, ++code>(console.log(b), b) <=> b ++/code>
So, if I have this:
++pre> ++code> const myObject = {
a: 123,
b: 456,
c: {
d: myComplicatedValue,
}
} ++/code>++/pre>
And we transform it into this:
++pre> ++code> const myObject = {
a: 123,
b: 456,
c: {
d: (console.log(myComplicatedValue), myComplicatedValue),
}
} ++/code>++/pre>
Then, everything is equivalent, except that we have a console log in the middle of our expression 🙂
The example above looks straightforward, but you might encounter this kind of craziness on minified code:
++pre> ++code>// imagine an expression full of side effects 🤯
// there's no room for classic statements in-between the elements of our array
// as our value A changes for each element that we add in the array and
// we'd like to know what happens in the middle of it
const arrayFullOfMutations = [
functionThatMutatesA(A),
// <--- what does A look like here???
functionThatMutatesA(A),
];
// well, now you can easily print out anything
// anywhere in the middle of it using the (a, b) syntax
const arrayFullOfMutations = [
functionThatMutatesA(A),
functionThatMutatesA((console.log('A before it changes for the 2nd time', A), A),
];
console.log('A is not the same anymore', A)++/code>++/pre>
I’m sure you can find many other use-cases. However, I would only keep this syntax for debugging and one-shot try-outs. I wouldn’t merge code that contains this as it wouldn’t be very readable, especially since it is not very widespread!
I hope it will become handy. If it doesn’t, at least you might have learned what ++code>(a, b); ++/code> actually does 🙂