Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Basics

Well done!

You have completed JavaScript Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Combine Strings

8:28 with Guil Hernandez

JavaScript provides ways to combine two or more strings into a single string, and it's something you'll likely do a lot in programming. There are different techniques for combining strings in JavaScript. First, learn how to add strings together using a process called "concatenation."

JavaScript provides ways to combine two or more strings into a single string, and 0:00
it's something you'll likely do a lot and programming. 0:05
For example, you might collect the user's first name as one string and 0:08
their last name as a separate string. 0:11
To display the user's full name on the page, you need to combine the two strings. 0:13
And what if you want to display their full name within a message? 0:18
You'd have to combine the first and last name strings with the message string. 0:21
There are different techniques for combining strings in JavaScript. 0:26
First, I'll teach you how to add strings together using a process 0:29
called concatenation. 0:32
String concatenation is the process of combining or 0:34
adding two or more strings together to create a bigger string. 0:37
One way to concatenate strings in JavaScript is with the + operator. 0:41
For example, by adding the string my favorite to the string movies, 0:45
we end up with one longer string. 0:49
In JavaScript, you'll often need a string to hold a value 0:52
that you can't predict until your program runs. 0:54
For example, if you want your program to greet someone by name, 0:57
you might store the greeting Hello in a variable. 1:00
Well, you cannot know the person's name ahead of the time. 1:02
So your program need to combine the stored Hello with the person's name at the time 1:05
the program collects that information like when they login for example. 1:10
Now, that you've learned the method for collecting information from a user, 1:14
I will teach you how to use that input to create different messages. 1:17
We'll do this by combining the string returned 1:20
by the prompt method with another screen. 1:23
Open the file named combine.js inside your js folder and 1:25
update the script tag in index.html to point to combine.js. 1:32
Let's start by declaring two variables, name and message. 1:43
Name will store the value returned by a prompt dialog that asks, 1:52
What is your name? 1:57
Then assign the message variable, a string that holds the word Hello. 2:02
Now, let's add the name the visitor typed into the prompt dialog 2:09
to this string to create a message like Hello Gil or Hello Anwar. 2:13
Again, one way to combine or concatenate strings is with the + operator like this. 2:18
Name holds the string returned by the prompt method. 2:24
So notice how we're literally joining the two strings together with the + symbol. 2:29
Let's log the value of message to the console with console.log message. 2:35
If I save the file, and refresh the browser, the prompt dialog appears. 2:42
I'll type my name, click OK and see the message in the console. 2:48
But notice that there's no space between Hello and my name. 2:54
When you combine strings, you're literally placing them next to each other. 2:58
So if you need a space, you have to add it. 3:02
I'll go back to my JavaScript file and add a space at the end of the string Hello, 3:05
I'll save the file, refresh the page and that looks good. 3:12
When a variable like name contains a string, adding that variable to 3:18
another string is exactly the same as combining the two strings. 3:23
In other words, the variable is really a placeholder for 3:28
the string value stored inside it. 3:32
You can add any number of strings together. 3:34
For example, I can add another string to the message value, like so 3:36
period space Welcome to my music site, And a period and a space. 3:41
I'll save the file, refresh the browser, enter my name and 3:49
the console display the longer string. 3:54
Hello Guil. 3:57
Welcome to my music site. 3:57
In programming there might be times when you want to create a long string, 3:59
maybe even an entire paragraph of text that includes string 4:03
values from several variables. 4:06
In that case, you can use the + operator over and over, but 4:08
doing that can often make your code hard to read. 4:12
For example, I'll concatenate the string, I'm so 4:15
happy that you came by to visit, ,. 4:20
Then concatenate the string stored in the name variable. 4:29
Then concatenate another string that holds the text period space. 4:35
Feel free to come again and listen to more music. 4:41
I'll save the file, refresh the browser, enter my name, 4:53
and there's the longer string. 4:58
Hello Guil. 5:00
Welcome to my music site. 5:01
I'm so happy that you came by to visit, Guil. 5:03
Feel free to come again and listen to more music! 5:05
Good, to make your code easier to read, 5:08
you can create a longer string using a series of smaller statements. 5:10
For example, I can begin to rewrite this code like this. 5:15
On the next line, type message = message + I'm so 5:21
happy that you came by to visit. 5:27
This approach might look familiar, 5:42
the variable message appears twice in the statement. 5:44
Remember, when putting a value into a variable, 5:47
whatever's to the right of the equal sign goes into the variable on the left. 5:51
In this case, what's on the right is the current contents of the variable 5:56
message added to the string, I'm so happy that you came by to visit. 6:00
These two strings are combined, and 6:04
then the result is placed back into the variable message. 6:06
This works like earlier when we added more points to the current value of the score 6:10
variable. 6:13
For example, in this case, instead of completely replacing what's inside the box 6:14
labeled message with something else, we're adding to the current contents of the box. 6:19
And you learned that there's a shorthand for adding to the contents of a variable. 6:24
Replace this part with a +=, 6:28
or the addition assignment operator. 6:32
Feel free to use whichever method you like, but 6:36
+= does require a little less typing. 6:39
Next, I'll build up the rest of the string like this, 6:42
message += the string stored in the name variable. 6:47
Then on the next line, message +=. 6:51
Feel free to come again and listen to more music. 7:00
Let's see how this works. 7:10
I'll save the file and refresh the browser, 7:12
type my name into the prop dialog then click OK. 7:16
In the console, we're not seeing the final message instead there is some sort of 7:21
Uncaught TypeError that says, assignment to constant variable. 7:26
Can you figure out what's producing this error? 7:30
On this line, we are declaring the message variable using the keyword const. 7:33
Remember, the value of a variable declared with const cannot be 7:39
changed through reassignment. 7:43
We're using the addition assignment operator to reassign message, 7:46
to a longer and longer string value until we have the final string. 7:49
In this case, we need to use the key word let, which as you learned lets 7:53
you change or manipulate a variables value through reassignment. 7:58
Now, let's try it. 8:02
Refresh the page. 8:05
I'll type Guil into the prompt dialog, and there's the final message in the console. 8:08
Good, you've just learned some really important skills, 8:13
how to add strings together using a process called concatenation, and 8:17
how to combine strings with variables that contain string values. 8:21