Start learning free

LESSON 60 OF 348 · STRINGS I

String Concatenation in TypeScript: The += Operator

Lesson Read the full explanation

Remember that string concatenation is used to dynamically generate messages that can be different depending on context.

We most often use it with variables, let's check an example:

let adjective = "awesome";
let message = "AlgoCademy is ";

// String concatenation & assignment:
message = message + adjective;

console.log(message); // Output: AlgoCademy is awesome

We first concatenate message and favoriteAnimal and then we assign the result to message.

Concatenating with +=

Since this is such a common pattern, there is the += operator which does both the concatenation and assignment in one step.

let adjective = "awesome";
let message = "AlgoCademy is ";

// With += operator:
message += adjective;

console.log(message); // Output: AlgoCademy is awesome

Concatenating multiple strings:

We can append as many strings as we want using the += operator:

let name = "Andy";
let pet = "dog";
let message = "Hey, ";

message += name;
message += "! Nice "; 
message += pet;
message += "!" ;

console.log(message); // Output: Hey, Andy! Nice dog!

Assignment
Follow the Coding Tutorial and let's practice with string concatenation!

Hint
Look at the examples above if you get stuck.

STEP 1 OF 3
    Ctrl + Enter to check

    TYPESCRIPT · STRINGS I

    String Concatenation Ii in TypeScript, explained

    Building messages from variables

    Concatenation joins strings end to end with the + operator. It is most useful with variables, where the final text depends on values that can change while the program runs.

    let adjective = "awesome";
let message = "AlgoCademy is ";
message = message + adjective;
console.log(message);

    AlgoCademy is awesome

    The right side is evaluated first: message + adjective produces a new string. Then the assignment stores that string in message. The variable is overwritten with the longer text, and the old string is no longer referenced.

    The += operator

    Appending to a variable is so common that TypeScript has a shortcut. message += adjective means exactly message = message + adjective:

    let adjective = "awesome";
let message = "AlgoCademy is ";
message += adjective;
console.log(message);

    AlgoCademy is awesome

    You can use += as many times as you like, appending a variable, a literal or an expression each time:

    let who = "Andy";
let pet = "dog";
let greeting = "Hey, ";
greeting += who;
greeting += "! Nice ";
greeting += pet;
greeting += "!";
console.log(greeting);

    Hey, Andy! Nice dog!

    The same pattern works in a loop to build a string piece by piece:

    let parts = "";
for (let i = 0; i < 3; i++) {
    parts += i + ",";
}
console.log(parts);

    0,1,2,

    Strings are not changed, variables are

    A string value never changes after it is created, so += does not extend the old string in place. It builds a new one and points the variable at it. For the lesson this makes no practical difference. The consequence to remember is that the variable must be declared with let. A const variable can't be reassigned, so += on it is rejected.

    Mixing strings and numbers

    When one side of + is a string, the other side is converted to text and the two are joined. It's a common source of surprises, because the result depends on evaluation order, which goes from left to right:

    let count = 3;
let label = "Items: ";
label += count;
console.log(label);
console.log("5" + 3);
console.log(5 + 3);
console.log("5" + 3 + 2);
console.log(5 + 3 + "2");

    Items: 3
53
8
532
82

    The last line shows the order effect: 5 + 3 is added as numbers first, and only then is the 8 joined to "2". TypeScript's type checker rejects some mixes at compile time, such as assigning a string-and-number result to a variable typed number. Appending a number to a string with += is allowed, as the first line above shows.

    What the type checker catches

    Because the variable in the lesson is typed string, the compiler knows what += may do with it. Appending a number to a string variable is accepted, since the result is still a string. The reverse is reported as an error: with let total: number = 5;, the statement total += "x"; fails with "Type 'string' is not assignable to type 'number'", and so does let r: number = "5" + 3;. The compiler still writes the JavaScript and the program runs, so total ends up holding the string 5x. Read compiler errors as real mistakes even when the program appears to work.

    A reassigned const behaves the same way. The compiler reports "Cannot assign to 'c' because it is a constant", and if the program runs anyway, the line throws TypeError: Assignment to constant variable.

    The exercise

    The starter code declares two variables:

    let message: string = "Coding is ";
let adjective: string = "worthwhile";
    1. Append adjective to message with +=. The message becomes Coding is worthwhile.
    2. Append ", isn't it?" with a second +=. The string literal is wrapped in double quotes because it contains an apostrophe.
    3. Print message with console.log.
    let message: string = "Coding is ";
let adjective: string = "worthwhile";
message += adjective;
message += ", isn't it?";
console.log(message);

    The output is:

    Coding is worthwhile, isn't it?

    Gotchas

    These are the mistakes that most often turn a correct idea into wrong output.

    • Spaces are your job. Concatenation adds nothing between the pieces. The space in "Coding is " is what separates is from worthwhile.
    • Order matters. message += adjective puts the adjective at the end. To add text at the start, write message = adjective + message.
    • Print after you finish appending. A console.log placed before the last += shows the unfinished text.
    • Don't append with = by mistake. message = adjective throws the old text away and keeps only the new value.

    Key takeaways

    • + joins strings, and a += b is the short form of a = a + b.
    • Each concatenation produces a new string; the variable is reassigned.
    • Use let, not const, for a variable you append to.
    • With mixed strings and numbers, + evaluates left to right.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free