1
00:00:00,504 --> 00:00:05,037
JavaScript provides ways to combine two or
more strings into a single string, and

2
00:00:05,037 --> 00:00:08,270
it's something you'll likely do a lot and
programming.

3
00:00:08,270 --> 00:00:11,909
For example, you might collect
the user's first name as one string and

4
00:00:11,909 --> 00:00:13,857
their last name as a separate string.

5
00:00:13,857 --> 00:00:18,453
To display the user's full name on the
page, you need to combine the two strings.

6
00:00:18,453 --> 00:00:21,239
And what if you want to display
their full name within a message?

7
00:00:21,239 --> 00:00:26,112
You'd have to combine the first and
last name strings with the message string.

8
00:00:26,112 --> 00:00:29,052
There are different techniques for
combining strings in JavaScript.

9
00:00:29,052 --> 00:00:32,997
First, I'll teach you how to add
strings together using a process

10
00:00:32,997 --> 00:00:34,487
called concatenation.

11
00:00:34,487 --> 00:00:37,559
String concatenation is
the process of combining or

12
00:00:37,559 --> 00:00:41,273
adding two or more strings together
to create a bigger string.

13
00:00:41,273 --> 00:00:45,259
One way to concatenate strings in
JavaScript is with the + operator.

14
00:00:45,259 --> 00:00:49,869
For example, by adding the string
my favorite to the string movies,

15
00:00:49,869 --> 00:00:52,103
we end up with one longer string.

16
00:00:52,103 --> 00:00:54,922
In JavaScript,
you'll often need a string to hold a value

17
00:00:54,922 --> 00:00:57,349
that you can't predict
until your program runs.

18
00:00:57,349 --> 00:01:00,443
For example, if you want your
program to greet someone by name,

19
00:01:00,443 --> 00:01:02,866
you might store the greeting
Hello in a variable.

20
00:01:02,866 --> 00:01:05,673
Well, you cannot know the person's
name ahead of the time.

21
00:01:05,673 --> 00:01:10,233
So your program need to combine the stored
Hello with the person's name at the time

22
00:01:10,233 --> 00:01:14,349
the program collects that information
like when they login for example.

23
00:01:14,349 --> 00:01:17,815
Now, that you've learned the method for
collecting information from a user,

24
00:01:17,815 --> 00:01:20,777
I will teach you how to use that
input to create different messages.

25
00:01:20,777 --> 00:01:23,476
We'll do this by combining
the string returned

26
00:01:23,476 --> 00:01:25,910
by the prompt method with another screen.

27
00:01:25,910 --> 00:01:32,309
Open the file named combine.js
inside your js folder and

28
00:01:32,309 --> 00:01:39,386
update the script tag in
index.html to point to combine.js.

29
00:01:43,441 --> 00:01:49,200
Let's start by declaring two variables,
name and message.

30
00:01:52,028 --> 00:01:57,213
Name will store the value returned
by a prompt dialog that asks,

31
00:01:57,213 --> 00:01:58,757
What is your name?

32
00:02:02,537 --> 00:02:09,355
Then assign the message variable,
a string that holds the word Hello.

33
00:02:09,355 --> 00:02:13,980
Now, let's add the name the visitor
typed into the prompt dialog

34
00:02:13,980 --> 00:02:18,535
to this string to create a message
like Hello Gil or Hello Anwar.

35
00:02:18,535 --> 00:02:24,850
Again, one way to combine or concatenate
strings is with the + operator like this.

36
00:02:24,850 --> 00:02:29,165
Name holds the string returned
by the prompt method.

37
00:02:29,165 --> 00:02:34,409
So notice how we're literally joining the
two strings together with the + symbol.

38
00:02:35,955 --> 00:02:42,845
Let's log the value of message to
the console with console.log message.

39
00:02:42,845 --> 00:02:48,355
If I save the file, and refresh
the browser, the prompt dialog appears.

40
00:02:48,355 --> 00:02:54,005
I'll type my name, click OK and
see the message in the console.

41
00:02:54,005 --> 00:02:58,421
But notice that there's no space
between Hello and my name.

42
00:02:58,421 --> 00:03:02,589
When you combine strings, you're literally
placing them next to each other.

43
00:03:02,589 --> 00:03:05,203
So if you need a space,
you have to add it.

44
00:03:05,203 --> 00:03:12,574
I'll go back to my JavaScript file and add
a space at the end of the string Hello,

45
00:03:12,574 --> 00:03:18,092
I'll save the file,
refresh the page and that looks good.

46
00:03:18,092 --> 00:03:23,445
When a variable like name contains
a string, adding that variable to

47
00:03:23,445 --> 00:03:28,541
another string is exactly the same
as combining the two strings.

48
00:03:28,541 --> 00:03:32,211
In other words,
the variable is really a placeholder for

49
00:03:32,211 --> 00:03:34,513
the string value stored inside it.

50
00:03:34,513 --> 00:03:36,881
You can add any number
of strings together.

51
00:03:36,881 --> 00:03:41,840
For example, I can add another
string to the message value, like so

52
00:03:41,840 --> 00:03:49,855
period space Welcome to my music site,
And a period and a space.

53
00:03:49,855 --> 00:03:54,177
I'll save the file,
refresh the browser, enter my name and

54
00:03:54,177 --> 00:03:57,073
the console display the longer string.

55
00:03:57,073 --> 00:03:57,830
Hello Guil.

56
00:03:57,830 --> 00:03:59,568
Welcome to my music site.

57
00:03:59,568 --> 00:04:03,675
In programming there might be times
when you want to create a long string,

58
00:04:03,675 --> 00:04:06,988
maybe even an entire paragraph
of text that includes string

59
00:04:06,988 --> 00:04:08,859
values from several variables.

60
00:04:08,859 --> 00:04:12,643
In that case, you can use the +
operator over and over, but

61
00:04:12,643 --> 00:04:15,755
doing that can often make
your code hard to read.

62
00:04:15,755 --> 00:04:20,189
For example,
I'll concatenate the string, I'm so

63
00:04:20,189 --> 00:04:27,736
happy that you came by to visit, ,.

64
00:04:29,426 --> 00:04:35,127
Then concatenate the string
stored in the name variable.

65
00:04:35,127 --> 00:04:41,783
Then concatenate another string
that holds the text period space.

66
00:04:41,783 --> 00:04:45,217
Feel free to come again and
listen to more music.

67
00:04:53,231 --> 00:04:58,166
I'll save the file,
refresh the browser, enter my name,

68
00:04:58,166 --> 00:05:00,941
and there's the longer string.

69
00:05:00,941 --> 00:05:01,837
Hello Guil.

70
00:05:01,837 --> 00:05:03,208
Welcome to my music site.

71
00:05:03,208 --> 00:05:05,751
I'm so
happy that you came by to visit, Guil.

72
00:05:05,751 --> 00:05:08,071
Feel free to come again and
listen to more music!

73
00:05:08,071 --> 00:05:10,808
Good, to make your code easier to read,

74
00:05:10,808 --> 00:05:15,484
you can create a longer string using
a series of smaller statements.

75
00:05:15,484 --> 00:05:21,737
For example, I can begin to
rewrite this code like this.

76
00:05:21,737 --> 00:05:27,481
On the next line,
type message = message + I'm so

77
00:05:27,481 --> 00:05:31,099
happy that you came by to visit.

78
00:05:42,380 --> 00:05:44,596
This approach might look familiar,

79
00:05:44,596 --> 00:05:47,890
the variable message appears
twice in the statement.

80
00:05:47,890 --> 00:05:51,355
Remember, when putting
a value into a variable,

81
00:05:51,355 --> 00:05:56,729
whatever's to the right of the equal
sign goes into the variable on the left.

82
00:05:56,729 --> 00:06:00,888
In this case, what's on the right is
the current contents of the variable

83
00:06:00,888 --> 00:06:04,798
message added to the string, I'm so
happy that you came by to visit.

84
00:06:04,798 --> 00:06:06,876
These two strings are combined, and

85
00:06:06,876 --> 00:06:10,168
then the result is placed back
into the variable message.

86
00:06:10,168 --> 00:06:13,860
This works like earlier when we added more
points to the current value of the score

87
00:06:13,860 --> 00:06:14,413
variable.

88
00:06:14,413 --> 00:06:19,155
For example, in this case, instead of
completely replacing what's inside the box

89
00:06:19,155 --> 00:06:24,187
labeled message with something else, we're
adding to the current contents of the box.

90
00:06:24,187 --> 00:06:28,787
And you learned that there's a shorthand
for adding to the contents of a variable.

91
00:06:28,787 --> 00:06:32,186
Replace this part with a +=,

92
00:06:32,186 --> 00:06:36,510
or the addition assignment operator.

93
00:06:36,510 --> 00:06:39,779
Feel free to use whichever
method you like, but

94
00:06:39,779 --> 00:06:42,569
+= does require a little less typing.

95
00:06:42,569 --> 00:06:47,317
Next, I'll build up the rest
of the string like this,

96
00:06:47,317 --> 00:06:51,973
message += the string stored
in the name variable.

97
00:06:51,973 --> 00:06:58,131
Then on the next line, message +=.

98
00:07:00,562 --> 00:07:03,323
Feel free to come again and
listen to more music.

99
00:07:10,823 --> 00:07:12,191
Let's see how this works.

100
00:07:12,191 --> 00:07:16,832
I'll save the file and
refresh the browser,

101
00:07:16,832 --> 00:07:21,729
type my name into the prop
dialog then click OK.

102
00:07:21,729 --> 00:07:26,496
In the console, we're not seeing the final
message instead there is some sort of

103
00:07:26,496 --> 00:07:30,506
Uncaught TypeError that says,
assignment to constant variable.

104
00:07:30,506 --> 00:07:33,095
Can you figure out what's
producing this error?

105
00:07:33,095 --> 00:07:39,057
On this line, we are declaring the message
variable using the keyword const.

106
00:07:39,057 --> 00:07:43,707
Remember, the value of a variable
declared with const cannot be

107
00:07:43,707 --> 00:07:46,126
changed through reassignment.

108
00:07:46,126 --> 00:07:49,995
We're using the addition assignment
operator to reassign message,

109
00:07:49,995 --> 00:07:53,674
to a longer and longer string value
until we have the final string.

110
00:07:53,674 --> 00:07:58,395
In this case, we need to use the key
word let, which as you learned lets

111
00:07:58,395 --> 00:08:02,972
you change or manipulate a variables
value through reassignment.

112
00:08:02,972 --> 00:08:05,584
Now, let's try it.

113
00:08:05,584 --> 00:08:08,675
Refresh the page.

114
00:08:08,675 --> 00:08:13,165
I'll type Guil into the prompt dialog, and
there's the final message in the console.

115
00:08:13,165 --> 00:08:17,077
Good, you've just learned
some really important skills,

116
00:08:17,077 --> 00:08:21,678
how to add strings together using
a process called concatenation, and

117
00:08:21,678 --> 00:08:26,064
how to combine strings with variables
that contain string values.