Combine Strings

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