String concatenation in output in Javascript - Step-by-Step Execution

Concept Flow - String concatenation in output

Start

↓

Define strings

↓

Concatenate strings

↓

Output result

↓

End

The program starts by defining strings, then joins them together, and finally shows the combined result.

Execution Sample

Javascript

let greeting = "Hello";
let name = "Alice";
let message = greeting + ", " + name + "!";
console.log(message);

This code joins several strings to create a greeting message and prints it.

Execution Table

Step	Action	Expression	Result	Output
1	Define greeting	greeting = "Hello"	Hello
2	Define name	name = "Alice"	Alice
3	Concatenate greeting + ", "	"Hello" + ", "	Hello,
4	Concatenate previous + name	"Hello, " + "Alice"	Hello, Alice
5	Concatenate previous + "!"	"Hello, Alice" + "!"	Hello, Alice!
6	Assign to message	message = "Hello, Alice!"	Hello, Alice!
7	Output message	console.log(message)		Hello, Alice!

💡 All strings concatenated and output displayed.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 6	Final
greeting	undefined	Hello	Hello	Hello	Hello
name	undefined	undefined	Alice	Alice	Alice
message	undefined	undefined	undefined	Hello, Alice!	Hello, Alice!

Key Moments - 2 Insights

Why do we add ", " between greeting and name?

We add ", " to include a comma and space between the words, so the output reads naturally as "Hello, Alice!" (see execution_table steps 3 and 4).

Why is message assigned after all concatenations?

Because we build the full string step-by-step and then store it in message at step 6, so message holds the complete greeting before output (see execution_table step 6).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of message after step 6?

A "Hello Alice"

B "Hello, Alice!"

C "Hello, Alice"

D "Hello!"

💡 Hint

Check the 'Result' column at step 6 in the execution_table.

At which step is the comma and space added to the greeting?

A Step 5

B Step 2

C Step 3

D Step 7

💡 Hint

Look at the 'Expression' column where ", " is concatenated.

If we remove ", " from the code, what would the output be?

A "HelloAlice!"

B "Hello, Alice!"

C "Hello Alice!"

D "Hello!Alice"

💡 Hint

Think about what happens if no space or comma is added between greeting and name.

Concept Snapshot

String concatenation joins strings using + operator.
Add spaces or punctuation as separate strings.
Store result in a variable.
Use console.log() to output.
Example: "Hello" + ", " + "Alice" + "!" => "Hello, Alice!"

Full Transcript

This example shows how JavaScript joins strings using the plus sign. First, it sets greeting to "Hello" and name to "Alice". Then it adds a comma and space between them. Next, it combines all parts into message. Finally, it prints message, showing "Hello, Alice!" on the screen.