Benchmarking String Literal ("") vs Template Literal (``) - using Performance.now()
Tags: javascript, node, frontend, backend
Published: 2023-07-27 12:25:47

Let's talk about String in JavaScript. There are 2 ways developers can define a string:

a. Using [String Literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#string_type)

```javascript
const str = "Hello " + "world!";
```

b. Using [Template Literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

```javascript
const worldText = "world!"
const str = `Hello ${worldText}`;
```

So, have you ever wondered what the difference between the tow? Which one do you usually use? Is the one you're using better?

Let's find out by doing performance test.

## Benchmarking

Here are the test case and `String Literal and Template Literal` used for benchmarking.

**Test Case**
```javascript
const iterations = ITERATION_TOTAL // 10, 100, 10000, 1000000
const stringText = 'string'
let text = ''

const start = performance.now()

for (let i = 0; i < iterations; i++) {
  // String or Template literal test case here
}

const end = performance.now()

console.log(`It took ${end - start} ms.`);
```

**String Literal**

```javascript
text = "text"
```

**Template Literal**

```javascript
text = `text`
```

**String Literal concatenating a String**

```javascript
text = "text " + stringText
```

**Template Literal concatenating a String**

```javascript
text = `text ${stringText}`
```

**String Literal concatenating Two Strings**

```javascript
text = stringText + " text " + stringText
```

**Template Literal concatenating Two Strings**

```javascript
text = `${stringText} text ${stringText}`
```

I ran the tests on Node Js v18.17.0 with different loop iterations: 10, 100, 10,000, 100,000, and 1,000,000. I measured the average times for each iteration.

## Result

Here are the results for each iteration (**the lower is better**):

**10 Iterations**

![String literal & Template literal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nnevey2ek6w6cyol9cu.jpg)

**100 Iterations**

![String literal & Template literal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47v5kosgydxxmupuv5j0.jpg)

**1,000 Iterations**

![String literal & Template literal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdge8a75mej7k0vg1tdo.jpg)

**100,000 Iterations**

![String literal & Template literal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ykl4u8pyg3mxn2heyir.jpg)

**1,000,000 Iterations**

![String literal & Template literal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9mgikeih2msr6e2xo99.jpg)

## Conclusion

It's still good to use both `String Literal` & `Template Literal` in simple iteration, displaying a limited items. The results showed a slightly different between the two which is still acceptable.

When dealing with processing large datasets, complex algorithm, generating long strings, using React components that frequently re-render that require a large number of iterations, `String Literal` is the only one to go.

It's important to understand that not every method is the best fit for every case and project. There might be some trade-offs to consider.