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!

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 Express Basics Using Templates with Express Expressโ€™s Response.render Method

Vitaly Khe
Vitaly Khe
7,160 Points

Why do we use different syntax using "prompt" and "hint" variables in .pug?

h1= prompt
i: #{hint}

Can we set h1 value like this?

h1: #{prompt}
Rochelle Burrows
Rochelle Burrows
8,528 Points

I had this question myself and tested it. Looks like they are just two different ways to insert data dynamically into a pug template. The ":" was just part of the sentence. When you look at the result in the browser, the paragraph section reads like this:

Hint: Think about whose tomb it is

The "i" stands for italics, by the way. So the HTML stynax next to the pug syntax would look like this:


<i>Hint: Think about whose tomb it is</i>


i Hint: #{hint}

The "hint" variable is equal to the string: "Think about whose tomb it is", and "Hint:" is part of the sentence.

1 Answer

Samuel Piedra
Samuel Piedra
Full Stack JavaScript Techdegree Student 9,897 Points

Hi Treehouse Fam,

I was also wondering what the difference was between the two different types of syntax for using local variables in Pug. It really helped as soon as Chalkers said evaluating the local variable into the text is similar to JavaScript's String Interpolation.

In JavaScript, when we want to return a single variable from a function or log the variable to the console we could do something like this:

// returing a value from a function:
function secretMessage(){
    const secret = "Hello";
    return secret; // returns "Hello"

// or logging to the console:
var myMessage = "Goodbye";
console.log(myMessage); // logs "Goodbye"

In the examples above you will notice that we simply want to evalute the contents of our variable, whether that be retrieving it from a function or logging it to the console, we simply only care for the variable and nothing else. But, if we want to return a more complex string or expression from our function or log a more complex message to the console we need some way to combine our variable with our additional content. This is where the wonderful ES6 template literal string interpolation comes in handy. Now we can evalute our variables within more complex expressions, such as:

// returing a more complex expression from a function:
function sayHelloToPerson(person){
    // notice the template literal syntax.. the value of the person variable will be evaluated and interpolated into the string!
    return `Hello, ${person}!` // if you execute sayHelloToPerson("John") the function returns "Hello, John!"

// or logging to the console:
var player1Score = 95;
console.log(`Player 1's score is ${player1Score}.`); // logs "Player 1's score is 95."

The same principles for string interpolation from JavaScript apply in Pug!

h1= prompt

We are asking Pug to set the contents of our Pug h1 tag only to the contents of the "prompt" variable. If we were to include additional text to our h1 tag without changing the syntax, Pug would evalute the contents as a literal string:

// Pug would treat this as "Question: prompt" instead of actually evaluting the contents of our "prompt" variable.
h1= Question: prompt

If we want to evaluate more complex string statements where we can evaluate a Pug local variable within a string, we need to use Pug's version of template literal string interpolation:

By wrapping our local variable around the "#{}" we are now asking Pug to first evaluate the value of the "prompt" variable and then interpolate that value into our string

// if our prompt variable value is: "Who is in Grant's Tomb?"
// Pug would evalute our h1 tag contents to be "Question: Who is in Grant's Tomb?"
h1= Question: #{prompt}

I really hope this helps! The syntax differences are just Pug's way of managing string interpolation. Please see this Pug resource for further clarification! Also, correct this comment if you notice I misspoke or if I might have left additional benefical content out!