JavaScript provides ways to combine two or more strings into a single string, and

it's something you'll likely do a lot and programming.

For example, you might collect the user's first name as one string and

their last name as a separate string.

To display the user's full name on the page, you need to combine the two strings.

And what if you want to display their full name within a message?

You'd have to combine the first and last name strings with the message string.

There are different techniques for combining strings in JavaScript.

First, I'll teach you how to add strings together using a process

called concatenation.

String concatenation is the process of combining or

adding two or more strings together to create a bigger string.

One way to concatenate strings in JavaScript is with the + operator.

For example, by adding the string my favorite to the string movies,

we end up with one longer string.

In JavaScript, you'll often need a string to hold a value

that you can't predict until your program runs.

For example, if you want your program to greet someone by name,

you might store the greeting Hello in a variable.

Well, you cannot know the person's name ahead of the time.

So your program need to combine the stored Hello with the person's name at the time

the program collects that information like when they login for example.

Now, that you've learned the method for collecting information from a user,

I will teach you how to use that input to create different messages.

We'll do this by combining the string returned

by the prompt method with another screen.

Open the file named combine.js inside your js folder and

update the script tag in index.html to point to combine.js.

Let's start by declaring two variables, name and message.

Name will store the value returned by a prompt dialog that asks,

What is your name?

Then assign the message variable, a string that holds the word Hello.

Now, let's add the name the visitor typed into the prompt dialog

to this string to create a message like Hello Gil or Hello Anwar.

Again, one way to combine or concatenate strings is with the + operator like this.

Name holds the string returned by the prompt method.

So notice how we're literally joining the two strings together with the + symbol.

Let's log the value of message to the console with console.log message.

If I save the file, and refresh the browser, the prompt dialog appears.

I'll type my name, click OK and see the message in the console.

But notice that there's no space between Hello and my name.

When you combine strings, you're literally placing them next to each other.

So if you need a space, you have to add it.

I'll go back to my JavaScript file and add a space at the end of the string Hello,

I'll save the file, refresh the page and that looks good.

When a variable like name contains a string, adding that variable to

another string is exactly the same as combining the two strings.

In other words, the variable is really a placeholder for

the string value stored inside it.

You can add any number of strings together.

For example, I can add another string to the message value, like so

period space Welcome to my music site, And a period and a space.

I'll save the file, refresh the browser, enter my name and

the console display the longer string.

Hello Guil.

Welcome to my music site.

In programming there might be times when you want to create a long string,

maybe even an entire paragraph of text that includes string

values from several variables.

In that case, you can use the + operator over and over, but

doing that can often make your code hard to read.

For example, I'll concatenate the string, I'm so

happy that you came by to visit, ,.

Then concatenate the string, stored in the name variable.

Then concatenate another string that holds the text period space.

Feel free to come again and listen to more music.

I'll save the file, refresh the browser, enter my name,

and there's the longer string.

Hello Guil.

Welcome to my music site.

I'm so happy that you came by to visit, Guil.

Feel free to come again and listen to more music!

Good, to make your code easier to read,

you can create a longer string using a series of smaller statements.

For example, I can begin to rewrite this code like this.

On the next line, type message = message + I'm so

happy that you came by to visit.

This approach might look familiar,

the variable message appears twice in the statement.

Remember, when putting a value into a variable,

whatever's to the right of the equal sign goes into the variable on the left.

In this case, what's on the right is the current contents of the variable

message added to the string, I'm so happy that you came by to visit.

These two strings are combined, and

then the result is placed back into the variable message.

This works like earlier when we added more points to the current value of the score

variable.

For example, in this case, instead of completely replacing what's inside the box

labeled message with something else, we're adding to the current contents of the box.

And you learned that there's a shorthand for adding to the contents of a variable.

Replace this part with a +=,

or the addition assignment operator.

Feel free to use whichever method you like, but

+= does require a little less typing.

Next, I'll build up the rest of the string like this,

message += the string stored in the name variable.

Then on the next line, message +=.

Feel free to come again and listen to more music.

Let's see how this works.

I'll save the file and refresh the browser,

type my name into the prop dialog then click OK.

In the console, we're not seeing the final message instead there is some sort of

Uncaught TypeError that says, assignment to constant variable.

Can you figure out what's producing this error?

On this line, we are declaring the message variable using the keyword const.

Remember, the value of a variable declared with const cannot be

changed through reassignment.

We're using the addition assignment operator to reassign message,

to a longer and longer string value until we have the final string.

In this case, we need to use the key word let, which as you learned lets

you change or manipulate a variables value through reassignment.

Now, let's try it.

Refresh the page.

I'll type Guil into the prompt dialog, and there's the final message in the console.

Good, you've just learned some really important skills,

how to add strings together using a process called concatenation, and

how to combine strings with variables that contain string values.