Function without parentheses returns a weird output [duplicate]

Question

Just asking to understand how it works:

function say(something) {
  return something;
}
let name = `Reza`;

console.log(say `My name is`, name, '!');

It returns a very weird output. I think that My name is is a string within an array and everything else is just a string (correct me if I am wrong).

My Question is, what is the point of that and when would it make sense to use a function like that?

Also I would be glad if someone could tell me why My name is ${name} is not working (name returns as an empty string).

PS: I know that could use the function with parentheses and it would work but that's not my question.

Answer 1

why My name is ${name} is not working (name returns as an empty string).

This is because you have to pull out the value of My name is from the array of string values and return it

Try this:

function say(something) {
   var str0 = something[0]
   return str0;
}
let name = `Reza`;
console.log(say`My name is${name}`, name, '!');  // My name is Reza !

We will receive thing like this:

I would like to point out that the ${name} does not mean anything at all, because inside the tag function, we didn't do anything with it.

This is the result after running your codes on the Chrome devtools:

Let's see how we can explain what is actually going on. Well then, what you're using is called Tagged templates:

A more advanced form of template literals are tagged templates. Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values.

That's why we see an array in the result:

For instance, if we run this codes on Chrome devtools:

function say(something) {
    return something;
}
console.log(say`anything`);

On the console tab, we will receive this result:

For more information, you could read it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates

As we can see, the weird raw property, according to MDN - Raw strings, it is:

The special raw property, available on the first function argument of tagged templates, allows you to access the raw strings as they were entered, without processing escape sequences.

For example:

function tag(strings) {
  console.log(strings.raw[0]);
}

tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" ,
// including the two characters '\' and 'n'

And you are using the console.log() method, according to MDN-Console.log() we have its signature:

Syntax: Console.log()

console.log(obj1 [, obj2, ..., objN]);

console.log(msg [, subst1, ..., substN]);

Parameters

obj1 ... objN

A list of JavaScript objects to output. The string representations of each of these objects are appended together in the order listed and output.

msg

A JavaScript string containing zero or more substitution strings.

subst1 ... substN

JavaScript objects with which to replace substitution strings within msg. This gives you additional control over the format of the output.

In your case, you're passing multiple arguments into the Console.log() method, hence it will work as the document said here: Outputting multiple objects

Answer 2

Doing My name is ${name} should work. Its because your passing My name is to the say function as a tagged template literal, which by default passes the arguments as an array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals