JavaScript Operator Precedence and Template Strings: Avoiding Bugs and Clarifying Code

JavaScript is a highly convenient language, but its flexibility can sometimes lead to confusion. In particular, a lack of understanding about operator precedence can lead to unexpected bugs.

In this article, we will discuss a common issue that arises when using the Nullish Coalescing operator (??) and the string concatenation operator (+). We will propose two solutions: using parentheses and using template strings.

---

The Problem

Consider the following React component. This component retrieves the family name (familyName) and given name (givenName) from a profile and combines them for display.

<DisplayProfileData
    label="Name"
    value={
        profile?.familyName ?? '' + profile?.givenName ?? ''
    }
/>

However, it may not always work as expected. Specifically, only familyName may be displayed and givenName may not be displayed.

---

Understanding the Problem

The cause of this problem lies in the precedence of JavaScript operators. In JavaScript, the ?? (Nullish coalescing operator) has a lower precedence than the + (addition/string concatenation operator). Therefore, the expression profile?.familyName ?? '' + profile?.givenName ?? '' returns '' (an empty string) if the result of profile?.familyName and '' + profile?.givenName is null or undefined.

As a result, if profile?.familyName is not null or undefined, value will display only profile?.familyName. Then, + profile?.givenName ?? '' is evaluated. If + profile?.givenName is null or undefined, the result is '', otherwise it is NaN (JavaScript's "Not a Number").

---

Solution 1: Using Parentheses

To solve this problem, you need to explicitly specify the precedence of operators using parentheses so that the + operator is evaluated before the ?? operator.

Try modifying it as follows:

<DisplayProfileData
    label="Name"
    value={
        (profile?.familyName ?? '') + (profile?.givenName ?? '')
    }
/>

With this modification, both familyName and givenName will be displayed.

---

Solution 2: Using Template Strings

Another solution is to use JavaScript's template strings. Template strings are string literals that can embed variables and expressions. They are surrounded by backticks (`), and variables and expressions are embedded by surrounding them with ${ }.

Try modifying it as follows:

jsx
<DisplayProfileData
label="Name"
value={
${profile?.familyName ?? ''}${profile?.givenName ?? ''}
}
/>


When using template strings, you don't have to worry about operator precedence. Template strings treat literal values as strings, so you don't need to consider the behavior of the + operator or the ?? operator.

---

Conclusion

The precedence of JavaScript operators can cause code to behave unexpectedly. Especially when using ?? and + in combination, you need to be aware of their precedence. However, you can specify the precedence explicitly by using parentheses or avoid the problem by using template strings.

This concludes our discussion of a common problem that arises when mixing Nullish coalescing and string concatenation, along with its solutions. We hope this article will be of some help in your JavaScript programming.

---

Happy coding!