String concatenation is hard. Take this code for example.
function makeGreeting (name, email, id) {return 'Hello, ' + name +'. We\'ve emailed you at ' + email +'. Your user id is "' + id + '".'}
All we're trying to do is take three variables (name
, email
, and id
) and create a sentence using them. Sadly, in order to do that, it's a balancing act between using the right quotations, +
signs, and escaping (\
) the right characters. This is the exact problem that Template Literals (also called Template Strings) was created to solve.
With Template Literals, instead of using single (''
) or double quotes (""
), you use backticks (``
) (located to the left of the 1
key if you're using a QWERTY keyboard š). Anywhere inside of your backticks where you have an expression (a piece of code that results in a single value like a variable or function invocation), you can wrap that expression in ${expression goes here}
.
So using Template Literals, we can take the confusing makeGreeting
function above and simplify it to look like this.
function makeGreeting (name, email, id) {return `Hello, ${name}. We've emailed you at ${email}. Your user id is "${id}".`}
Much better. No more worrying about using the right quotations, +
signs, and escaping the right characters. Not only is it easier to write, but it's also much easier to read.
Now instead of having a makeGreeting
function, say we wanted a makeGreetingTemplate
function that returned us an HTML string that we could throw into the DOM. Without template strings, we'd have something like this.
function makeGreetingTemplate (name, email, id) {return '<div>' +'<h1>Hello, ' + name + '.</h1>' +'<p>We\'ve emailed you at ' + email + '. ' +'Your user id is "' + id + '".</p>' +'</div>'}
Perfect, except for the fact that not only is it terribly hard to write, it's even harder to read. What's nice about ES6's Template Strings is they also support multi-line strings. That means, using Template Strings, we can rewrite makeGreetingTemplate
to look like this.
function makeGreetingTemplate (name, email, id) {return `<div><h1>Hello, ${name}</h1><p>We've email you at ${email}.Your user id is "${id}".</p></div>`}
I consider that an absolute win.
Before you leave
I know, "another newsletter pitch" - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one rather than just skim it?
We wanted to change that, which is why we created Bytes. The goal was to create a JavaScript newsletter that was both educational and entertaining. 101,890 subscribers and an almost 50% weekly open rate later, it looks like we did it.
Delivered to 101,890 developers every Monday

Sdu
@sduduzo_g
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.

Brandon Bayer
@flybayer
The Bytes newsletter is a work of art! It's the only dev newsletter I'm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.

John Hawley
@johnhawly
Bytes has been my favorite newsletter since its inception. It's my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!

Garrett Green
@garrettgreen
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.

Muhammad
@mhashim6_
Literally the only newsletter Iām waiting for every week.

Grayson Hicks
@graysonhicks
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.

Mitchell Wright
@mitchellbwright
I know I've said it before, but @tylermcginnis doesn't miss with the Bytes email. If you're a developer, you really need to subscribe

Ali Spittel
@aspittel
Can I just say that I giggle every time I get the @uidotdev email each week? You should definitely subscribe.

Chris Finn
@thefinnomenon
Every JavaScript programmer should be subscribed to the newsletter from @uidotdev. Not only do they manage to succinctly cover the hot news in the JavaScript world for the week but it they manage to add a refreshing humor to it all.