Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript: Challenge Building Constructor Methods and Generating Objects Board and Space Class Constructor Methods Solution

Posted by Ashish S
.a{fill-rule:evenodd;}techdegree
Ashish S
Python Web Development Techdegree Student 938 Points

this.id = `space-${x}-${y}`;

How does this works? What does this do?

3 Answers

Steven Parker
Steven Parker
240,449 Points
Steven Parker
Steven Parker
240,449 Points

This is a "template literal". Where the tokens made by braces with $ in front are found, the system will replace them with the result of evaluating what is between the braces.

For the example above, if "x" contained 12 and "y" contained 33, then "this.id" would get "space-12-33".

Hamzah Iqbal
.a{fill-rule:evenodd;}techdegree
Hamzah Iqbal
Full Stack JavaScript Techdegree Student 11,145 Points

Sorry to hijack this old post, but what is "space" in this particular case, is it referring to the class object, the constructor or what?

Joe Elliot
Joe Elliot
5,330 Points

Answering Hamzah if anyone else needs to know - space in this particular case is just a string. It doesn't 'refer' to anything and is merely there to inform us what the numbers afterwards indicate.

Heidi Vasterling-Ford
Heidi Vasterling-Ford
7,806 Points
Heidi Vasterling-Ford
Heidi Vasterling-Ford
7,806 Points

Ashish,

The example Ashley provided in her teachers notes gave me a bit of clarity on the syntax and what we can do with it. Posting below, I hope it's helpful for you too. Essentially Template Literals are 'embedded expressions' or an alternative to concatenating strings.

const name = "Ashley"
const newString = "Hello my name is " + name;

const name = "Ashley"
const newString = `Hello my name is ${name}`;
Kylie Soderblom
Kylie Soderblom
3,890 Points
Kylie Soderblom
Kylie Soderblom
3,890 Points

"space" is just a string using concatenation: this.id = "string-"+ x +"-"+ y; or using template literals: this.id = string-${x}-${y};