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

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!

Thanks