Why This Question Matters

If you're just starting out with JavaScript, template literals feel like magic. You wrap some text in backticks, throw in a ${variable}, and boom—dynamic strings. But there is a fundamental concept here that trips up almost every junior dev: the difference between assignment and reference.

The question boils down to: "Does the string update itself when the variable inside it changes?"

Understanding this is crucial because if you assume JavaScript variables act like "live links" to data, you'll run into some nightmare bugs in your state management or UI rendering. This isn't just about a simple console.log; it's about how memory and values work in JS.

Understanding the Code

Let's look at the snippet:

let name = "Alice"
let greeting = Hello, ${name}!
name = "Bob"
console.log(greeting)

At first glance, it seems logical. We have a name, we create a greeting using that name, and then we change the name. You might think, "Well, the greeting depends on the name, so if the name changes to Bob, the greeting should be 'Hello, Bob!'."

Here is what is actually happening under the hood:

1. let name = "Alice": JavaScript allocates a spot in memory for the variable name and stores the string "Alice" there.
2. let greeting = Hello, ${name}!: This is where the "magic" happens. JavaScript performs string interpolation. It looks at the current value of name ("Alice"), plugs it into the string, and creates a *brand new* string: "Hello, Alice!". This new string is then assigned to the variable greeting.
3. name = "Bob": We change the value of name. The memory slot for name now holds "Bob". However, this has zero effect on the greeting variable.
4. console.log(greeting): We print the value stored in greeting, which is still "Hello, Alice!".

The key takeaway here is that template literals are evaluated immediately. They aren't "live" formulas. Once the string is created, it's just a static piece of text.

Finding the Correct Answer

The correct answer is Option B: "Hello, Alice!".

Why not "Hello, Bob!"? Because the variable greeting doesn't hold a reference to the variable name. It holds the *result* of the expression that was executed at the moment of assignment.

If you wanted the output to be "Hello, Bob!", you would have to re-assign the greeting variable *after* changing the name:

let name = "Alice"
let greeting = Hello, ${name}!
name = "Bob"
greeting = Hello, ${name}! // Now we update the greeting
console.log(greeting) // "Hello, Bob!"

Common Mistakes Developers Make

The biggest mistake is confusing primitive values with references.

In JavaScript, strings are primitives. When you assign a string to a new variable, you are copying the value, not creating a pointer to the original source.

Beginners often confuse this with how objects work. If greeting had been an object and name was a property of that object, the behavior would feel different. For example:

let user = { name: "Alice" };
let greeting = Hello, ${user.name}!; 
user.name = "Bob"; 
console.log(greeting); // Still "Hello, Alice!"

Even with objects, the template literal still evaluates the value at that specific moment in time. The string itself doesn't "watch" the object for changes.

Another common trap is thinking that let or const changes this behavior. Whether you use let, var, or const, the evaluation of the template literal happens exactly once: when the line of code is executed.

Real-World Usage

In a real production environment, you'll see this logic everywhere—especially when dealing with UI frameworks like React or Vue.

Imagine you're building a profile page. You fetch a user's name and set a "Welcome" message. If you just set that message in a local variable when the component first loads, and then the user updates their name in a settings form, the "Welcome" message won't change automatically.

This is why we use state. In React, for instance, you wouldn't store a greeting in a plain string variable. You'd derive the greeting directly in the render method:

// This is "live" because it's evaluated every time the component renders
return 
Hello, {userName}!
;

By putting the logic inside the render loop (or using a computed property in Vue), you ensure that the output always reflects the current state of the data, rather than a snapshot from five minutes ago.

Key Takeaways

- Template literals are not reactive. They evaluate the expression immediately and store the resulting string.
- Strings are primitives. Once a string is created, it cannot be changed; you can only replace it with a new string.
- Assignment $\neq$ Linking. Assigning a variable's value to another variable doesn't create a permanent link between them.
- If you need a value to update dynamically, you need to re-evaluate the expression or use a function/getter.