In JavaScript, you often need to show a value that doesn't exist yet.

Let's say you wanna greet a user when they log in, the user's name

can be known ahead of time so program would need to combine the stored text,

'"Hello nice to see you" with the person's name when they log in.

Often this is done by concatenating values on the strings

which can be a little hard to read.

Other languages use placeholders inside strings that can be evaluated later.

This is called interpolation.

Now with template literals, JavaScript can also interpolate

the syntax might seem odd at first but once you're used to it.

It's a lot easier to read and work with.

The $ sign with curly brackets,

are used to mark the dynamic values in the template literal.

When the program runs the contents of the curly brackets are evaluated and

placed or interpolated into the string.

Let's get a feel for interpolation in the console.

I'll start by creating a variable name.

And I'll assign the string Gary to it.

Now we can greet Gary by interpolating name into our template literal here.

And you can also enter any JavaScript expression into the curly brackets.

So, I'll do some math inside and you can see what that looks like.

Let's go ahead and use interpolation in our project, so

if I open up interpolation you can see that there's a function at the top call

like that except an argument and then it returns 'I like' whatever you passed in.

And here we're saying I like apples and

we're concatenating that string with two paragraph tags and

if I un-comment this last line we're placing the paragraph element on the page.

So I'll save that and refresh, and you can see we get I like apples.

Now instead of saying I like apples let's say, I like apples but

I love oranges, and will use interpolation so I'll copy this function.

Below and I'll rename it love.

And we'll use template literal here.

And we'll interpolate our variable into the template literal.

So now the output is we're gonna say,

I like ('apples') +', but' I love + ('oranges').

And we'll save that.

So if I refresh the browser.

Okay good.

We got that but we did have an issue, this these two strings

are butting into each other, and that's because I forgot to put a space here.

So I just wanted to show you that cuz that is a common mistake that

is made with concatenating strings together.

And if we use placeholders instead,

I'm just gonna replace these function calls with placeholders.

They're just easier to see and reason about and they're a little less cluttered.

So I'll place like back in here and apples.

I like apples.

But I love oranges.

And if we save that, switch over you can see it's working.

So you can pass any kind of expression even a function expression into these

curly brackets, and that combined with the multi-line

management of strings make template literals a really powerful tool.

Give template literals a try in some of your JavaScript projects.

Thanks for joining me.

I'll see you around.