String concatenation in output in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of concatenated strings with numbers

What is the output of this JavaScript code?

console.log('5' + 3 + 2);

Javascript

console.log('5' + 3 + 2);

A '7'

B '55'

C '10'

D '532'

💡 Hint

Remember that + with a string converts numbers to strings and concatenates.

The + operator with a string converts numbers to strings and concatenates from left to right. '5' + 3 is '53', then '53' + 2 is '532'.

❓ Predict Output

intermediate

Concatenation with template literals

What will this code output?

const a = 4;
const b = 5;
console.log(`${a} + ${b} = ${a + b}`);

Javascript

const a = 4;
const b = 5;
console.log(`${a} + ${b} = ${a + b}`);

A a + b = 9

B 4 + 5 = 45

C 4 + 5 = 9

D 4 + 5 = a + b

💡 Hint

Template literals evaluate expressions inside ${}.

The template literal replaces ${a} with 4, ${b} with 5, and ${a + b} with 9, so the output is '4 + 5 = 9'.

❓ Predict Output

advanced

Output of mixed concatenation and addition

What is the output of this code?

console.log('3' + 2 * 2);

Javascript

console.log('3' + 2 * 2);

A '7'

B '34'

C '32'

D 7

💡 Hint

Remember operator precedence: * before +.

2 * 2 is 4, then '3' + 4 converts 4 to string and concatenates, resulting in '34'.

❓ Predict Output

advanced

Concatenation with null and undefined

What will this code print?

console.log('Value: ' + null + undefined);

Javascript

console.log('Value: ' + null + undefined);

A 'Value: nullundefined'

B 'Value: nullundefinedundefined'

C 'Value: nullundefinednull'

D TypeError

💡 Hint

null and undefined convert to strings when concatenated.

null converts to 'null', undefined converts to 'undefined', so concatenation results in 'Value: nullundefined'.

🧠 Conceptual

expert

Why does this concatenation produce unexpected output?

Consider this code:

console.log(1 + 2 + '3' + 4 + 5);

Why does it output '3345' instead of '12345' or a number?

A Because + is left to right, 1+2=3, then '3' + '3' = '33', then '33' + 4 + 5 = '3345'

B Because JavaScript converts all numbers to strings before adding

C Because the + operator always performs string concatenation

D Because the expression is evaluated right to left

💡 Hint

Think about how + works left to right and when it switches from addition to concatenation.

The + operator is left to right: 1+2=3 (number), then 3 + '3' converts 3 to string and concatenates to '33', then '33' + 4 = '334', then '334' + 5 = '3345'.

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