How do template literals in JavaScript work under the hood?
Tags: javascript, compilers, ast
Published: 2019-10-05 11:26:57

---
title: How do template literals in JavaScript work under the hood?
published: true
description: Examining the parsing code that makes template literals possible in JavaScript. 
tags: javascript, compilers, ast
---

So, template strings are a pretty neat feature in quite a few languages. If you're unfamiliar, template strings allow you to embed code expressions within string literals. For example, in JavaScript, you can write the following code and a generate the output "Hello, 2 is the answer!"

```
console.log(`Hello, ${1 + 1} is the answer!`);
```

Pretty neat, right? But how does it work under the hood?

I dug around the NodeJS codebase to figure this out and ended up in quite a storm.

I was able to track down the [code where the parsing of template literals happened](https://github.com/nodejs/node/blob/5ff00dbdbce9cf531b511fe146f581eb0fc177ac/deps/v8/src/parsing/parser.cc#L3112) and identified the [TemplateObject](https://github.com/nodejs/node/blob/5ff00dbdbce9cf531b511fe146f581eb0fc177ac/deps/v8/src/objects/template-objects.h) data structure that was used to store the information. I got a little bit lost on what exactly a `cooked_string`, which was referenced quite a few times in the parsing code was. Unfortunately for me, any kind of Googling on this only yielded results for cooked string bean recipes. I was in the realm of linguistic ambiguity, my friends! Maybe I was on the wrong track?

I was finally able to figure this out when I landed in [some code in the Node codebase](https://github.com/nodejs/node/blob/57c70835af07485948bb3690b78adbf52d2205cd/deps/acorn/acorn/dist/acorn.js#L2404) that appeared the parsing the actual template literal string. From this I could discern the following.

1. When the parser encounters a backquote, it invokes the `parseTemplate` method ([code](https://github.com/nodejs/node/blob/57c70835af07485948bb3690b78adbf52d2205cd/deps/acorn/acorn/dist/acorn.js#L2261)). 
2. The `parseTemplate` method iterates through the elements within the template literal. If one of the elements is an expression, meaning that it starts with a $, it first parses that expression the continues parsing the other elements in the template literal ([code](https://github.com/nodejs/node/blob/57c70835af07485948bb3690b78adbf52d2205cd/deps/acorn/acorn/dist/acorn.js#L2427)).
3. There is a `parseTemplateElement` method that parses the non-expression elements within the template literal. This is where the cooked_string business creeps up. Interestingly enough, it appears that a `cooked` string is a reference to a structured object that represents the strings in the abstract syntax tree while `raw` string represents the bytes of the string itself. ([code](https://github.com/nodejs/node/blob/57c70835af07485948bb3690b78adbf52d2205cd/deps/acorn/acorn/dist/acorn.js#L2404))

The most interesting bit of code in step #2 above is the `parseExpression` [method](https://github.com/nodejs/node/blob/57c70835af07485948bb3690b78adbf52d2205cd/deps/acorn/acorn/dist/acorn.js#L4928) which is used to parse the contents of the embedded expression within the template literal. This method is used quite liberally in the parsing codebase. For example, it is used to parse the [initialization code](https://github.com/nodejs/node/blob/57c70835af07485948bb3690b78adbf52d2205cd/deps/acorn/acorn/dist/acorn.js#L966) in a for-loop or [the cases within a switch statement](https://github.com/nodejs/node/blob/57c70835af07485948bb3690b78adbf52d2205cd/deps/acorn/acorn/dist/acorn.js#L1032).

Following this exploration, it appears that the TemplateObject lead from earlier was not exactly the right place to go. Reading the code in JavaScript-based [Acorn parser](https://github.com/nodejs/node/tree/57c70835af07485948bb3690b78adbf52d2205cd/deps/acorn/acorn) offered a lot more clarity than spelunking through C++.

So there you have it, most of that magic with template literals happens at parse time when the abstract-syntax tree for the template literal is generated.