Template literals in Javascript - Step-by-Step Execution

Concept Flow - Template literals

Start

↓

Define variables

↓

Use backticks ` ` to create template literal

↓

Insert variables with ${}

↓

Evaluate expressions inside ${}

↓

Combine text and values

↓

Output final string

↓

End

Template literals use backticks and ${} to insert variables or expressions inside strings, producing a combined output.

Execution Sample

Javascript

const name = "Alice";
const age = 30;
const message = `Name: ${name}, Age: ${age}`;
console.log(message);

This code creates a message string using template literals to insert variables name and age.

Execution Table

Step	Action	Evaluation	Result
1	Define variable name	name = "Alice"	name = "Alice"
2	Define variable age	age = 30	age = 30
3	Create template literal	`Name: ${name}, Age: ${age}`	"Name: Alice, Age: 30"
4	Output message	console.log(message)	Prints: Name: Alice, Age: 30

💡 All variables inserted and output printed, execution ends.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
name	undefined	"Alice"	"Alice"	"Alice"	"Alice"
age	undefined	undefined	30	30	30
message	undefined	undefined	undefined	"Name: Alice, Age: 30"	"Name: Alice, Age: 30"

Key Moments - 2 Insights

Why do we use backticks (`) instead of quotes for template literals?

Backticks allow embedding variables and expressions inside ${}, which normal quotes do not support, as shown in step 3 of the execution_table.

What happens inside the ${} in a template literal?

The expression inside ${} is evaluated and converted to a string, then inserted into the final string, as seen in step 3 where ${name} becomes "Alice".

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of message after step 3?

A "Name: ${name}, Age: ${age}"

B "Name: Alice, Age: 30"

C "Name: name, Age: age"

D undefined

💡 Hint

Check the 'Result' column in row for step 3 in execution_table.

At which step is the variable age assigned a value?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Action' and 'Evaluation' columns in execution_table for when age is defined.

If we change name to "Bob", how would the message change at step 3?

A "Name: Bob, Age: 30"

B "Name: Alice, Age: 30"

C "Name: ${name}, Age: ${age}"

D "Name: , Age: 30"

💡 Hint

Refer to variable_tracker to see how changing name affects message in step 3.

Concept Snapshot

Template literals use backticks (`) to create strings.
Insert variables or expressions inside ${}.
Expressions inside ${} are evaluated and included.
Allows easy multi-line and readable strings.
Example: `Hello, ${name}!` outputs 'Hello, Alice!'.

Full Transcript

This example shows how template literals work in JavaScript. We start by defining variables name and age. Then we create a string using backticks and insert these variables inside ${}. The expressions inside ${} are evaluated and combined with the text to form the final string. Finally, we print the message. This method is easier and cleaner than using string concatenation.