Interpolation

In JavaScript, you often need to show a value that doesn't exist yet. 0:00 Let's say you wanna greet a user when they log in, the user's name 0:05 can't be known ahead of time so program would need to combine the stored text, 0:09 '"Hello nice to see you" with the person's name when they log in. 0:13 Often this is done by concatenating values on the strings 0:18 which can be a little hard to read. 0:22 Other languages use placeholders inside strings that can be evaluated later. 0:24 This is called interpolation. 0:29 Now with template literals, JavaScript can also interpolate 0:32 the syntax might seem odd at first but once you're used to it. 0:36 It's a lot easier to read and work with. 0:39 The $ sign with curly brackets, 0:43 are used to mark the dynamic values in the template literal. 0:45 When the program runs the contents of the curly brackets are evaluated and 0:49 placed or interpolated into the string. 0:55 Let's get a feel for interpolation in the console. 0:58 I'll start by creating a variable name. 1:02 And I'll assign the string Gary to it. 1:04 Now we can greet Gary by interpolating name into our template literal here. 1:08 And you can also enter any JavaScript expression into the curly brackets. 1:16 So, I'll do some math inside and you can see what that looks like. 1:24 Let's go ahead and use interpolation in our project, so 1:32 if I open up interpolation you can see that there's a function at the top call 1:36 like that except an argument and then it returns 'I like' whatever you passed in. 1:42 And here we're saying I like apples and 1:47 we're concatenating that string with two paragraph tags and 1:50 if I un-comment this last line we're placing the paragraph element on the page. 1:54 So I'll save that and refresh, and you can see we get I like apples. 2:01 Now instead of saying I like apples let's say, I like apples but 2:08 I love oranges, and will use interpolation so I'll copy this function. 2:12 Below and I'll rename it love. 2:20 And we'll use template literal here. 2:27 And we'll interpolate our variable into the template literal. 2:32 So now the output is we're gonna say, 2:37 I like ('apples') +', but' I love + ('oranges'). 2:41 And we'll save that. 2:50 So if I refresh the browser. 2:53 Okay good. 2:55 We got that but we did have an issue, this these two strings 2:56 are butting into each other, and that's because I forgot to put a space here. 3:00 So I just wanted to show you that cuz that is a common mistake that 3:05 is made with concatenating strings together. 3:10 And if we use placeholders instead, 3:14 I'm just gonna replace these function calls with placeholders. 3:16 They're just easier to see and reason about and they're a little less cluttered. 3:22 So I'll place like back in here and apples. 3:27 I like apples. 3:33 But I love oranges. 3:35 And if we save that, switch over you can see it's working. 3:40 So you can pass any kind of expression even a function expression into these 3:47 curly brackets, and that combined with the multi-line 3:51 management of strings make template literals a really powerful tool. 3:57 Give template literals a try in some of your JavaScript projects. 4:02 Thanks for joining me. 4:06 I'll see you around. 4:07