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.

Practice

1. What does the + operator do when used between two strings in JavaScript?

easy

A. Divides the first string by the second

B. Joins the two strings together into one string

C. Multiplies the two strings

D. Subtracts the second string from the first

Solution

1. Step 1: Understand the + operator with strings

   In JavaScript, the + operator combines two strings into one continuous string.

2. Step 2: Recognize string concatenation

   When you write "Hello" + " World", it becomes "Hello World".

3. Final Answer:

   Joins the two strings together into one string -> Option B

4. Quick Check:

   String + String = Concatenation [OK]

Hint: Remember + joins strings like glue [OK]

Common Mistakes:

• Thinking + subtracts or divides strings
• Confusing + with arithmetic on strings
• Forgetting to add spaces inside quotes

2. Which of the following is the correct way to concatenate the strings "Hello" and "World" with a space between them in JavaScript?

easy

A. "Hello" - " " - "World"

B. "Hello" + "World"

C. "Hello" + " " + "World"

D. "Hello" * "World"

Solution

1. Step 1: Identify how to add space between words

   To add a space, include " " (space inside quotes) between the two strings.

2. Step 2: Use + operator to join all parts

   Use + to join "Hello", " ", and "World" to get "Hello World".

3. Final Answer:

   "Hello" + " " + "World" -> Option C

4. Quick Check:

   Use + and " " for spaces [OK]

Hint: Add spaces inside quotes when joining words [OK]

Common Mistakes:

• Forgetting the space string " "
• Using - or * instead of +
• Not putting quotes around the space

3. What will be the output of the following code?

let name = "Anna";
console.log("Hello, " + name + "!");

medium

A. Hello, + name + !

B. Hello, name!

C. Hello Anna

D. Hello, Anna!

Solution

1. Step 1: Understand variable substitution in concatenation

   The variable name holds the string "Anna" and is concatenated with other strings.

2. Step 2: Combine strings and variable value

   "Hello, " + name + "!" becomes "Hello, Anna!" when printed.

3. Final Answer:

   Hello, Anna! -> Option D

4. Quick Check:

   Variable value joins strings correctly [OK]

Hint: Variables inside + join as their values [OK]

Common Mistakes:

• Printing variable name instead of value
• Missing punctuation or spaces
• Using commas instead of + for concatenation

4. Find the error in this code snippet:

let greeting = "Hi";
let name = "Sam";
console.log(greeting + name);

What is missing if the output should be Hi Sam?

medium

A. A space string between greeting and name

B. Quotes around the variable name

C. A comma instead of + operator

D. Semicolon after console.log

Solution

1. Step 1: Check the concatenation result

   Currently, greeting + name joins "Hi" and "Sam" without space, resulting in "HiSam".

2. Step 2: Add a space string between variables

   Insert " " between greeting and name: greeting + " " + name to get "Hi Sam".

3. Final Answer:

   A space string between greeting and name -> Option A

4. Quick Check:

   Add " " to separate words [OK]

Hint: Add " " between words to separate them [OK]

Common Mistakes:

• Forgetting spaces in concatenation
• Using commas instead of +
• Thinking semicolon affects output

5. You want to create a greeting message that says Hello, John Doe! You have 5 new messages. using variables firstName, lastName, and messageCount. Which code correctly concatenates these values with spaces and punctuation?

hard

A. console.log("Hello, " + firstName + " " + lastName + "! You have " + messageCount + " new messages.");

B. console.log("Hello, " + firstName + lastName + "! You have " + messageCount + " new messages.");

C. console.log("Hello, " + firstName + " " + lastName + "! You have " + messageCount + "new messages.");

D. console.log("Hello, " + firstName + " " + lastName + "! You have " + messageCount + " new messages")

Solution

1. Step 1: Check spacing between first and last names

   console.log("Hello, " + firstName + " " + lastName + "! You have " + messageCount + " new messages."); adds a space string " " between firstName and lastName, correctly spacing the full name.

2. Step 2: Verify punctuation and spaces in message

   console.log("Hello, " + firstName + " " + lastName + "! You have " + messageCount + " new messages."); includes "! You have " and " new messages." with correct spaces and punctuation.

3. Final Answer:

   console.log("Hello, " + firstName + " " + lastName + "! You have " + messageCount + " new messages."); -> Option A

4. Quick Check:

   Use " " to separate names and punctuation correctly [OK]

Hint: Add spaces inside quotes between variables [OK]

Common Mistakes:

• Missing space between first and last name
• Missing space before 'new messages'
• Omitting punctuation at the end