Backticks and why they matter.

String Interpolation

When you're learning JavaScript you will likely come across a lot of sources and people telling you that it doesn't matter if you choose to use

'single quotes'

"double quotes"

`back ticks`

as long as you keep it consistent throughout your code. As a brand new baby developer; I personally found this to be vague and misleading. Because, like everything in JavaScript- it absolutely matters; and you can achieve different results when you know how these choices affect the readability and functionality of our code. So, without further ado; here is my beginners dive into string interpolation.

Generally speaking, when you're working with JavaScript there's not a lot of specific guidelines or best practices to follow that I have found when it comes to using single or double quotes except that you want to make sure you stay consistent with whatever you choose to use in your code. But as a beginner no one explained to me the magic of the backtick (which can be found just to the left of the number one key). I say magic, but in the first few weeks into my coding journey I realized they can also be a menace. Thats mostly because I don't totally know what I'm doing YET, and these little frenemies are small and hard to spot when you're not used to looking at code.
The backtick is magic though, because it's what you must use to get all the amazing benefits of using STRING INTERPOLATION! Which from what I gather is the preferred method to modify and combine strings. The big reason for this is because string concatenation can get impossibly messy and difficult to read very quickly.
here is an example of how wild string concatenation can get;
const person = {
name: Elizabeth
nickName: Liz}

console.log('Hi, I/'m ' + person.name +'! Call me "' + person.nickname + '".')

Ummm..wut?
With all those crazy single and double quotes, slashes, and plus signs- how is someone supposed to be able to easily read that? Not to mention it just looks like a mess, and one of our goals is to write beautiful code right? Well that is exactly where we can use string interpolation and template literals.
Using string interpolation would look something like this:

console.log(`Hi, I'm ${person.name}! Call me ${person.nickName}`)

I'm not sure about you, but that is a lot easier to make sense of. Let me tell you about whats happening here. By the simple use of backticks you can turn anything contained within them into a literal string, it also means we can avoid having to use line breaks or breaks within the string concatenation to use a single or double quote in your string (for example: trying to use I\'m' to actually just see I'm)
Whats going on with

${this stuff}

though? When using backticks we also have the ability to use place holders in our strings, it can be a place holder for anything that evaluates to an expression; this would include arithmetic equations.

So really string interpolation uses backticks to take a string or strings and expressions and combines them so they read in a literal way and provides the ability to make our code more dynamic and clean.

Side note:

While writing this blog I discovered another backtick quirk that gave me a bit of trouble. When using backticks for markdown we can create a code block for examples in things like blogs. The problem with that is sometimes you actually want to see the backticks, rather than using them for markdown. I found and tried several things that didn't work, but I finally figured it out.

``` `you have to use 3 backticks followed by a space and then backtick you want to see.` ```