CodeBlanks Logo Icon CodeBlanks
Login Register

String concatenation

Learn to concatenate strings with + and the common mistakes around it.

Joining strings with +

You use the + operator to glue two strings together. This is called concatenation.

For example "Alex" + " " + "Smith" gives "Alex Smith". Without a space the strings stick directly: "Alex" + "Smith" becomes "AlexSmith".

You can chain many pieces with + in a row. The operation runs left to right; parentheses change the order.

Adding a string and a number

The + operator joins two strings; but if one side is a number JavaScript checks a rule. When either side is a string, + performs concatenation and the number is turned into a string.

For example "Result: " + 5 gives "Result: 5". The number is first converted to a string and then joined.

When both sides are numbers normal addition happens: 3 + 5 → 8. Use typeof to see which type you are dealing with.

Practice Concatenate the full name

Declare firstName as "Alex" and lastName as "Smith". Build fullName as firstName + " " + lastName. Log fullName with console.log.

Starter code

script.js
// Combine first, last and full name and log it

Sample solution

script.js
const firstName = "Alex";
const lastName = "Smith";
const fullName = firstName + " " + lastName;
console.log(fullName);

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What does "Alex" + " " + "Smith" give?

script.js
console.log("Ayşe" + " " + "Yılmaz");
  • "Alex Smith" Correct answer
  • "AlexSmith"
  • "Alex+Smith"
  • "Alex" "Smith"

Explanation: + pastes each piece in order; the middle " " space ends up in the result.

2 Concatenate the score

Question 
const score = 90; const message = "Skor: " + ____;
Answer 
const score = 90; const message = "Skor: " + score;

Explanation: You can add the number variable directly with +; JavaScript converts it to a string.

3 Match each expression to its result

Term Meaning
"a" + "b" "ab"
"x" + 5 "x5"
3 + 5 8
"3" + "5" "35"

4 What does "Value: " + 5 give?

script.js
console.log("Değer: " + 5);
  • 10
  • "Value: 5" Correct answer
  • "Value: " + 5
  • "Value: "

Explanation: With a string on one side, + concatenates; 5 is turned into a string and appended.

All lessons in Beginner

1 Variables and data types

  1. Declaring variables
  2. Difference between const and let
  3. First data types
  4. Difference between null and undefined
  5. The typeof operator
  6. Summary - Variables and types

2 Operators

  1. Arithmetic operators
  2. Assignment operators
  3. Comparison operators
  4. Logical operators
  5. Operator precedence
  6. Summary - Operators

3 Conditionals

  1. The if statement
  2. else and else if
  3. The switch statement
  4. The ternary operator
  5. Comparison pitfalls
  6. Summary - Conditionals

4 Numbers and Math

  1. Integers and decimals
  2. The Math object
  3. Math.random and Math.min/max
  4. NaN and Infinity
  5. Converting to numbers
  6. Summary - Numbers and Math

5 Project: Calculator

  1. Project: Calculator
  2. Number input and operator selection
  3. Computing the operation
  4. Handling error cases
  5. Project final - Calculator

6 String basics

  1. Creating strings
  2. length and character access
  3. String concatenation
  4. Template literals
  5. Escape sequences
  6. Summary - String basics

7 Loops

  1. The for loop
  2. The while loop
  3. The do...while loop
  4. break and continue
  5. Nested loops
  6. Summary - Loops

8 Array basics

  1. Creating and accessing arrays
  2. Adding elements to arrays
  3. Removing elements from arrays
  4. length and index relationship
  5. Multidimensional arrays
  6. Summary - Array basics

9 Functions

  1. Defining and calling functions
  2. The return statement
  3. Parameters and arguments
  4. Function expressions
  5. Scope basics
  6. Summary - Functions

10 Project: Shopping cart

  1. Project: Shopping cart
  2. Defining the product list
  3. Adding products to the cart
  4. Computing the total
  5. Project final - Shopping cart

11 Array iteration

  1. Looping with forEach
  2. The for...of loop
  3. Searching with indexOf
  4. Checking with includes
  5. findIndex and some
  6. Summary - Array iteration

12 Array transformations

  1. Transforming with map
  2. Filtering with filter
  3. Finding with find
  4. some and every
  5. Reducing with reduce
  6. Summary - Array transformations

13 Objects

  1. Creating objects
  2. Property access
  3. Adding and changing properties
  4. Defining methods
  5. The this keyword
  6. Summary - Objects

14 Project: Quiz app

  1. Project: Quiz app
  2. Defining question objects
  3. Showing questions and getting answers
  4. Computing the score
  5. Project final - Quiz

15 Parameters

  1. Default parameters
  2. The rest parameter
  3. The arguments object
  4. Return value types
  5. Helper functions
  6. Summary - Parameters

16 Boolean logic

  1. Boolean values
  2. Short-circuit evaluation
  3. Nullish coalescing
  4. Optional chaining
  5. Logical assignment
  6. Summary - Boolean logic

17 Type conversion

  1. Explicit type conversion
  2. Implicit type coercion
  3. Difference between == and ===
  4. Truthy and falsy values
  5. Common conversion pitfalls
  6. Summary - Type conversion

18 Project: To-do list

  1. Project: To-do list
  2. Designing the task object
  3. Adding and listing tasks
  4. Completing and deleting tasks
  5. Project final - To-do list

19 Advanced string methods

  1. slice and substring
  2. replace and replaceAll
  3. split and join
  4. trim, padStart, padEnd
  5. Case and includes
  6. Summary - Advanced string methods

20 Console methods

  1. console.log basics
  2. console.warn and console.error
  3. Tables with console.table
  4. console.group and groupEnd
  5. Timing with console.time
  6. Summary - Console methods

21 Errors

  1. try...catch basics
  2. Throwing errors with throw
  3. The Error object
  4. The finally block
  5. Common error types
  6. Summary - Errors

22 Debugging

  1. What is debugging?
  2. Call traces with console.trace
  3. The debugger statement
  4. Checking with console.assert
  5. Common bug patterns
  6. Summary - Debugging

23 Beginner final

  1. Challenge - Calculator
  2. Challenge - Array operations
  3. Challenge - Object management
  4. Challenge - String operations
  5. Challenge - Error handling