Why is an array inside a template string displayed as a normal string?

Question

Let's assume we have an object:

var pet = {
      "name": "Barky",
      "species" : "dog",
      "foods": {
        "likes": ["bones", "carrots"],
        "dislikes": ["tuna"]
      }
    };

console.log(pet.foods.likes);        //returns [ 'bones', 'carrots' ]
console.log(`${pet.foods.likes}`)    //returns "bones,carrots"

If I use template string, it is displaying as a normal string, why?

Because you're building a string? Why would you expect the template string to be displayed as something else? — Bergi, Jul 28 '19 at 11:31
@Bergi, here the data type of likes is an array. It is not a string. — iamPavan, Jul 29 '19 at 13:59
@iamPavan `likes` might an array, but the data type of the result of the template literal evaluation is a string. Don't wrap the array in a string if you want to keep it as an array. — Bergi, Jul 29 '19 at 14:46

score 4 · Accepted Answer · answered Jul 28 '19 at 07:45

Inside the template literal, the expression inside gets implicitly coerced to a string (because template literals always evaluate to strings). So, the array gets .joined by commas as part of the interpolation process, and becomes a string (without []s, and without string delimiters between items).

console.log(`${pet.foods.likes}`)    //returns bones,carrots

is equivalent to

console.log(pet.foods.likes.join(','))

or

console.log(pet.foods.likes.toString())

In contrast, the plain pet.foods.likes is an array, and so gets logged as an array with array delimiters.

... or in any way the console wants to log it. – Jonas Wilms Jul 28 '19 at 09:17 — Jonas Wilms, Jul 28 '19 at 09:17

Why is an array inside a template string displayed as a normal string?

1 Answers1