JavaScript Operator Precedence and Template Strings: Avoiding Bugs and Clarifying Code
Tags: javascript, beginners
Published: 2023-08-02 10:36:49





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.

```jsx
<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:


```jsx
<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!