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
Christian van Lierop
13,758 PointsWhat's happening when you replace /hound in the url with ${breed}
I'm following the Front End Web Development track and came to the sidetrack about the Fetch API. In the first few lessons however I had to follow the sidetracks about 'promises' and 'http' in order to follow waht was going on.
In the sidetracks however, methods and practises where used that were not explained in previous lessons, making it hard, if not impossible, to comprehend what was being taught.
Now in this lesson, the teacher, nonchalantly replaces part of an url (/hound) with ${breed} (referring to a part of the JavaScript data. I can't seem to understand why he does this, and what the effect is. This syntax was not explained in previuos lessons that I can recall.
(In general it seems that how further I progress in the track, the more references to parts of other tracks are implemented. Leaving me guessing, more and more, where all these exotic terms and syntaxes come from...)
2 Answers
Jennifer Nordell
Treehouse TeacherHi there, Christian van Lierop! This might be a new syntax to you. In the ever-changing landscape of JavaScript, this is one of the newer features which is roughly equivalent to what other languages call "interpolation". The syntax here is called a JavaScript Template Literal. It's a bit on the newish side, but I absolutely love it. If you take a closer look at that string inside of the parentheses, you'll notice that the first and last marks aren't actually single quotes ', but backticks. The difference might look subtle. Among other things, it cleans up the amount of concatenation you have to do and you will have to do less escaping of characters. Let's take a look at a simple example:
var name = "Christian";
console.log("Hi there, " + name);
console.log(`Hi there, ${name}`);
// Both output: Hi there, Christian
So in the example in the video, it is inserting the value stored in breed into that spot in the URL. I can highly recommend this 9-minute workshop on JavaScript Template Literals. That should clear up the whole thing in a jiffy!
Christian van Lierop
13,758 PointsThanks Jennifer and Steven. Will certainly look into those links you have provided. Much appreciated!
Steven Parker
231,248 PointsSteven Parker
231,248 PointsYou can find a tutorial in the Introducing Template Literals video, which is part of the Getting Started With ES2015 course. There's also a Practice Template Literals workshop.