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
– Bergi, Commented Jul 28, 2019 at 11:31
@Bergi, here the data type of likes is an array. It is not a string. — iamPavan
– iamPavan, Commented Jul 29, 2019 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
– Bergi, Commented Jul 29, 2019 at 14:46

CertainPerformance · Accepted Answer · 2019-07-28 07:45:05Z

4

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.

answered Jul 28, 2019 at 7:45

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonas Wilms Over a year ago

... or in any way the console wants to log it.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related