ES6 calling function with template literal but no parentheses [duplicate]

Question

According to MDN, Tagged template literals can be used as follows:

var a = 5;
var b = 10;
function tag(strings, ...values) {
  alert(strings[0]); // "Hello "
  alert(strings[1]); // " world "
  alert(values[0]); // 15
  alert(values[1]); // 50
  return "Bazinga!";
}
tag `Hello ${ a + b } world ${ a * b }`; // "Bazinga!"

In the example above, the function tag is called without using parentheses.

I expected it should be called like tag(`Hello`), but that passes the string resulting from the template literal as the argument for the strings parameter of the function.

What's this special feature of calling functions without parentheses but with parameter?

Pithy

Can you add a link to that example source? – Cloudberry

Tagged templates: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . That's just how the syntax is. It is special in itself. – Senaidasenalda

This was the first time i saw a function being called without (). Initially thought it's some shorthand notation but a quick check said otherwise – Pithy

can someone care to explain why the -ve votes – Pithy

@aWebDeveloper: There are many ways to call functions, and not all of them involve parenthesis. Think of setters/getters as a trivial example. – Rolo

@Rolo sorry i dont know of any. care to give some links / more pointers i can read more on – Pithy

The new operator for example: new Foo. And of course there is call and apply (which are of course functions too, but you are not "using parenthesis" to call the function itself). – Senaidasenalda

I edited the question because it wasn't much clear for me. I think this is what you meant. – Larimore

Tagged template strings are explained right on the (MDN page about template strings)[developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…, and are discussed in any tutorial/post on the subject. – Equinox

@Pithy There are a lot of documented examples of how to call functions without parenthesis at this SO link: Invoking a function without parentheses: #35950054 – Detoxify

Answer 1

What's this special feature of calling functions without parentheses?

This syntax for tagged templates is simply allowed by the the grammar:

MemberExpression : MemberExpression TemplateLiteral
CallExpression : CallExpression TemplateLiteral

These rules means that a MemberExpression or CallExpression followed by a TemplateLiteral is considered to be a function call. Additional note from the spec:

A tagged template is a function call where the arguments of the call are derived from a TemplateLiteral (12.2.9). The actual arguments include a template object (12.2.9.3) and the values produced by evaluating the expressions embedded within the TemplateLiteral.

If you are asking for why it was done this way, I cannot give you an answer.

However, if you think about it, the couldn't have just used "ordinary" function call syntax. tag(`...`) means that tag is passed a single argument, the result of evaluating the template literal. But as you can see in the example from MDN, tagged template functions actually get passed multiple arguments. It would certainly be more surprising if functions were called differently (internally) if they were passed a template literal vs if they were called with a different value. And then, how would call a function if you really wanted to pass a template literal to it?

Hence introducing a new syntax seems to make sense.

---

FWIW, this is the grammar for "ordinary" function calls:

CallExpression : MemberExpression Arguments
CallExpression : CallExpression Arguments

Senaidasenalda

It'd be great to also add explanation how the parameters going into the functions. – Disreputable

So you mean how the template literal is "exploded" into multiple arguments? – Senaidasenalda

Yeah, like as in question. How strings has {"Hello", "world"} and values has {a + b, a * b} despite of its passed by Hello ${a+b} world ${a*b}. – Disreputable

If you are asking for why it was done this way, I cannot give you an answer. It was done this way to allow people to easily define mini-languages (DSLs) for use cases ranging from localization to DOM templating. – Equinox

@torazaburo: I'm not talking about tagged templates itself, just the syntax decision. – Senaidasenalda