Template Literal js

Question

I cannot understand this code what is the meaning of values[0] and values[1]

var a = 5;
var b = 10;

function foo(strings, ...values) {
  let a = values[0];
  let b = values[1];
  return `Sum ${a + b}
    Product ${a * b} 
    Division ${b / a}`;
}

console.log(foo`Num1 ${a + 10}
    Num2 ${b * 2} 
    Num3 ${b / a}`);

@epascarello No, ``foo`a template literal` `` is valid syntax. — JLRishe, Oct 02 '18 at 14:53

score 2 · Answer 1 · answered Oct 02 '18 at 14:12

2

The spread operator (...) used like that will take a bunch of arguments and convert them into an array.

if I said:

function foo(...args) {
  //do something
}

and then called it by saying:

foo(1, 2, 3, 4, 5)

args (inside the actual function) would be equal to [1, 2, 3, 4, 5]. In your example, values is an array, and it's obtaining the first value (values[0]) and the second value (values[1]) from that array.

answered Oct 02 '18 at 14:12

markb

281
2
8

3

Note: `...` isn't, and can't be, an operator, neither when used for spread nor rest. It does things operators cannot do. [Details](https://stackoverflow.com/questions/44934828/is-foo-an-operator-or-syntax/44934830#44934830). – T.J. Crowder Oct 02 '18 at 14:14

score 2 · Answer 2 · answered Oct 02 '18 at 14:14

2

A tag function is called with an array of the strings in the template as its first argument, and then discrete arguments with the value of each placeholder. The rest parameter (...values) gathers up all values passed from the second (in your case) argument onward into an array. So values[0] is the value of the first placeholder in the call to foo, and values[1] is the value of the second placeholder.

There's no good reason for using ...values in foo just to then get a and b from values, it would be simpler and perhaps clearer to just declare a and b as named parameters:

function foo(strings, a, b) {
  return `Sum ${a + b}
    Product ${a * b} 
    Division ${b / a}`;
}

var a = 5;
var b = 10;

function foo(strings, a, b) {
  return `Sum ${a + b}
    Product ${a * b} 
    Division ${b / a}`;
}

console.log(foo`Num1 ${a + 10}
    Num2 ${b * 2} 
    Num3 ${b / a}`);

answered Oct 02 '18 at 14:14

T.J. Crowder

1,031,962
187
1,923
1,875

I can understand what do you mean but i cannot understand the result of this code – Mostafa Hamed Oct 02 '18 at 14:25
How can sum result to be 35 not 15 and product to be 300 not 50?? – Mostafa Hamed Oct 02 '18 at 14:26
@MostafaHamed - In general, the best way to understand these sorts of things is to step through them statement-by-statement in the debugger. The code is using `a` and `b` locally within `foo`, *shadowing* (hiding) the outer `a` and `b`. `foo` gets called with the value of `${a + 10}`, which is 15 (the outer `a` is 5), and `${b * 2}`, which is 20 (the outer `b` is 10). So the sum is 35, the product is 300, and `b / a` (`20 / 15`) is `1.3333333333333333`. – T.J. Crowder Oct 02 '18 at 14:28
Thanks i understand what is the problem – Mostafa Hamed Oct 02 '18 at 14:31

score 1 · Answer 3 · edited Dec 11 '18 at 09:29

The three dots (...) is called the spread syntax. It's a neater way (especially arrays) to pass arguments to a function.

In your caseL

console.log(foo`Num1 ${a + 10}
    Num2 ${b * 2} 
    Num3 ${b / a}`);

You're calling the foo function here with 3 values 15, 10 and 2 which is passed to the function as [15, 10, 2], so values[0] would be 15 and values[1] would be 10 and values[3] would be 2.

score 0 · Answer 4 · answered Oct 02 '18 at 14:26

This an example of tagged templates. You can use a function to parse a template.

var a = 5;
var b = 10;

function foo(strings, ...values) {
  let a = values[0];
  let b = values[1];
  console.log(a , b); 
}

foo`x dwqdwq ${a} qwdqwdy ${b}`;
// prints 5, 10


function foo2(strings, a, b, c) {
  console.log(a , b, c);
}

foo2`x dwqdwq ${1} qwdqwdy ${2} mmdwldw ${3}`;  
// prints 1, 2, 3

strings will be an array of the string parts in the template.

Template Literal js

4 Answers4