In this section, we will learn what the tag function is and how to use it in JavaScript.

What is Tag Function in JavaScript?

A tag function is a function that is designed to be called using a template literal. This means instead of parentheses, we use a pair of backticks to call the function.

Tag Function Syntax:

This is the syntax of a tag function:

function functionName(template, param1, param2, paramN){…}

Before we explain the structure of parameters for a tag-function, first, let’s see how we can call such a function:

functionName `This is the template to pass to the function ${param1}, ${param2}, ${paramN}`;

`template`: when creating a tag function, the first parameter of that function will take the string characters of the target template literal in a form of an array. Now the question is, what are the elements of this array?! Well, it’s the segments of the target template literal that are hardcoded-text, separated using substitutions!

For example, let’s say the template literal is: `My name is ${name} and my last name is: ${lastName}`.

Here, the first parameter of the target tag function will take an array with these elements: [“My name is”, “and my last name is:”].

As you can see, the execution engine uses the substitutions as a way of segmenting the hardcoded-texts of a template literal.

`param1, param2, paramN`: Now the rest of parameters of the target tag-function will take the resolved values of the substitutions that appear in a template literal with the same order as they appear.

Example: using tag function in JavaScript

const one = "One";
const two = "Two";
const three = "Three";
function func(template, val1, val2, val3){
  console.log(template);
  console.log(val1, val2, val3);
}
func`This is template literal with 3 substitution ${one}, ${two}, and ${three}`;

Output:

["This is template literal with 3 substitution ", ", ", ", and ", "", raw: Array(4)]

One Two Three

How Does Tag Function Work in JavaScript?

Here, the `template` parameter contains the array of the literal’s hardcoded text segments. So the `template` parameter is basically an array of 4 segments.

The other parameters also have the substitution values (val1 contains the result of `${one}`, val2 contains the result of `${two}`, and so on).

Note: The evaluated substitution values are not converted to strings; our tag function gets the actual value.

JavaScript Tag Function and Rest Parameter

Unless our function expects a fixed number of substitutions, it’s common to use a rest parameter `…` for the values of the substitutions.

Example: using rest parameter in JavaScript Tag Function

const one = "One";
const two = "Two";
const three = "Three";
function func(template, ...val){
  console.log(template);
  console.log(val);
}
func`This is template literal with 3 substitution ${one}, ${two}, and ${three}`;

Output:

["This is template literal with 3 substitution ", ", ", ", and ", "", raw: Array(4)]

(3)["One", "Two", "Three"]