Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

APIs Create a Reusable Fetch Function

Christian van Lierop
Christian van Lierop
13,756 Points

What'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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi 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! :sparkles:

Steven Parker
Steven Parker
210,095 Points

You 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.

Christian van Lierop
Christian van Lierop
13,756 Points

Thanks Jennifer and Steven. Will certainly look into those links you have provided. Much appreciated!