javascript Javascript: This syntax is black magic

[camjocotem]

var person = 'Mike';
var age = 28;

function myTag(strings, expA, expB) {
  var str0 = strings[0];
  var str1 = strings[1];

  var ageStr;
  if (expB > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  return `${str0}${expA}${str1}${ageStr}`;
}

var output = myTag`That ${ person } is a ${ age }`;

So I was shown this example, and my first thought was "Oh, you're not actually calling the function, you're  just assigning it to output and then theres just a string template there"

No myTag is actually run using the string on the right and is called 'Tagged Templates'

 

This is magic and confusing and am not sure if I like it or not.

Will probably love it once I become more familiar with it haha

[rEkmAInc1csBnlM6C85H]

35 minutes ago, camjocotem said:

Will probably love it once I become more familiar with it haha

Stolkhomes syndrome setting in already?

[camjocotem]

2 minutes ago, Andrew 1337 said:

Stolkhomes syndrome setting in already?

Like all code I don't understand/don't like but come to love :')

[vorticalbox]

On 9/21/2019 at 3:51 PM, camjocotem said:

Like all code I don't understand/don't like but come to love :')

Javascript will call the function when next to a template string.

 

I read an article on this once but cant remember where I read it.

 

I

[camjocotem]

2 minutes ago, vorticalbox said:

Javascript will call the function when next to a template string.

 

I read an article on this once but cant remember where I read it.

 

I

Ahah thanks I do get it, it's just compared to the rest of the syntax that I'm used to it just 'feels' like it shouldn't work

I'm just wondering why they would have a type of function you can execute without the need for brackets? xP

 

I suppose what I really don't know is the reason for choosing this syntax x]

[vorticalbox]

8 minutes ago, camjocotem said:

Ahah thanks I do get it, it's just compared to the rest of the syntax that I'm used to it just 'feels' like it shouldn't work

I'm just wondering why they would have a type of function you can execute without the need for brackets? xP

 

I suppose what I really don't know is the reason for choosing this syntax x]

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.

 

 

Basically rather than evaluating the template and passing that to the function the parts of the template are passed as arguments.

 

https://stackoverflow.com/questions/36167849/es6-calling-function-with-template-literal-but-no-parentheses

[wasab]

Thats a new feature from ES6. If you are looking at legacy JavaScript code, it is probably still done with the string concatenation using the plus sign.