Web Tools #543 - JS Grouping, React Tools, Git/CLI, VS Code Tools

The one operator that we rarely think much about in JavaScript is the grouping operator. This is a reference to the use of parentheses, which come in handy in a number of circumstances in JavaScript to make sure code evaluates the way we expect.

Many of you have probably used all the examples I'm going to show below, so there won't be anything too new here unless you're new to JavaScript. But it's nice to review some of the finer details as to why this operator is useful.

Let's start with an easy example. One common thing the grouping operator does is help evaluate mathematical expressions. Note the following code:

Besides the use of the parentheses for the console.log() calls, you'll notice how the use of the grouping operator (i.e. the parentheses around "a + b") changes the result of the expressions on the last two lines. In the first log, the multiplication gets evaluated first, providing a final value of 7. But in the next log, I've grouped the two variables added together, so they get evaluated before the multiplication occurs, which changes the result.

Another useful place where the grouping operator comes in handy is when using an immediately-invoked function expression (or IIFE). An expression statement in JavaScript cannot start with the keyword "function", so the following code is invalid:

The above is interpreted as the start of a function declaration, so it won't work. To get around this, you can use the grouping operator:

Notice the parentheses placed around the section starting with the function keyword up until the end of the curly braces. Again, nothing too groundbreaking here, and you've likely used something similar to this structure before. But maybe you didn't think specifically that this is happening due to the use of parentheses as a grouping operator.

Another use is maybe a little more obscure, but again some of you will likely have seen it before. As you might know, arrow functions can be used without the curly braces and without an explicit return statement, indicating that whatever is evaluated is returned. For example:

As you can see, no curly braces, no return keyword. Yet the evaluated expression is returned automatically. This is a characteristic of arrow functions.

But with that in place, what if you want to return an object literal? Well, it won't work like this:

The above doesn't work as expected because the beginning of the object literal (the opening curly brace) is interpreted as the start of the function body for the arrow function (you can use curly braces for arrow functions).

To get around this, we come back full circle to our grouping operator:

The simple addition of the parentheses helps the code to be parsed correctly and now the object literal is returned as expected.

That's a brief overview of the grouping operator, something you've most definitely used but maybe didn't think too much about.

There are other uses for the grouping operator, one or two that I've discussed before in other tips. You can check out all of those in my newsletter archives or if you want all my tips in an easy-to-read format, you can buy my JavaScript e-books bundle to support this newsletter.

Now on to this week's tools!