String concatenation in output in Javascript - Mini Project: Build & Apply

String concatenation in output

📖 Scenario: You are creating a simple program that greets users by combining their first and last names into a full greeting message.

🎯 Goal: Build a program that concatenates strings to create a personalized greeting message and displays it.

📋 What You'll Learn

Create variables to store first and last names

Create a variable to store a greeting prefix

Concatenate the greeting prefix with the full name

Print the final greeting message

💡 Why This Matters

🌍 Real World

Combining strings is useful for creating messages, labels, and user interface text dynamically.

💼 Career

String concatenation is a basic skill needed for web development, scripting, and many programming tasks.

1

Create variables for first and last names

Create two variables called firstName and lastName and assign them the exact string values "John" and "Doe" respectively.

Javascript

// Your code here

Hint

Use const to create variables and assign string values with double quotes.

2

Create a greeting prefix variable

Create a variable called greeting and assign it the exact string value "Hello".

Javascript

const firstName = "John";
const lastName = "Doe";
// Your code here

Hint

Use const greeting = "Hello"; to create the greeting prefix.

3

Concatenate greeting with full name

Create a variable called fullGreeting that concatenates greeting, a space, firstName, a space, and lastName using the + operator.

Javascript

const firstName = "John";
const lastName = "Doe";
const greeting = "Hello";
// Your code here

Hint

Use the + operator to join strings with spaces in between.

4

Print the full greeting message

Use console.log to print the variable fullGreeting.

Javascript

const firstName = "John";
const lastName = "Doe";
const greeting = "Hello";
const fullGreeting = greeting + " " + firstName + " " + lastName;
// Your code here

Hint

Use console.log(fullGreeting); to display the message.

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