ECMAScript 2015 (also known as ES2015, ES6, and ES6 Harmony) is the 2015 update to the ECMAScript language specification—the specification that JavaScript implements—and the first major update to it since ES5 in 2009.
ES2015 adds many new language features to ECMAScript (and thus, to JavaScript), including arrow functions, constants, promises, classes, modules, for/of loops, template strings, and much more.
Quite simply, it makes writing JavaScript a much more pleasant experience and helps you write more elegant code.
Unfortunately for developers looking to write with ES2015, many users still use older browsers that do not fully support ES2015.
This problem can be solved by transpiling ES2015 code to older ES5 code at build time using a tool like Babel. This process takes your code and changes any syntax that isn’t compatible with ES5 into one that is compatible. Unfortunately, adding this extra build step is something many developers are not comfortable with, or choose not to do, and so they are unable to enjoy these new language features.
Service workers, however, provide a great opportunity to get started with ES2015. As all browsers that currently implement service workers also implement most ES2015 features, you can safely use these new features in your service worker file—no transpilation needed.
We have already used a few ES2015 features in our service worker, including promises, string.includes()
, string.startsWith()
, and more. Let’s see a few other ways we can improve our service workers with ES2015.
Template literals make creating multiline strings, and strings that contain variables, much more elegant.
Unlike strings, which are enclosed in double or single quotes, template literals are enclosed by backticks (`). Within these backticks, you can include multiline strings and placeholders. A placeholder is indicated by a dollar sign and curly braces, and can contain variables or expressions.
Compare how you would compose a string using normal strings versus the same message composed using template literals.
Multiline string with expressions using normal strings:
var
message
=
"Nightly rate: "
+
rate
+
" "
+
"Number of nights: "
+
nights
+
" "
+
"Total price: "
+
(
nights
*
rate
);
Multiline string with expressions using template literals:
var
message
=
`Nightly rate:
${
rate
}
Number of nights:
${
nights
}
Total price:
${
(
nights
*
rate
)
}
`
;
Arrow functions provide a shorter syntax to defining functions, often resulting in code that is much more elegant and expressive.
Note that unlike old-school function expressions, arrow functions share the same this
as their surrounding code.
Compare these two implementations of code that respond to events with content from CacheStorage or by fetching it from the network.
Old-school functions:
event
.
respondWith
(
caches
.
open
(
"cache-v1"
)
.
then
(
function
(
cache
)
{
return
cache
.
match
(
event
.
request
);
})
.
then
(
function
(
response
)
{
return
response
||
fetch
(
event
.
request
);
})
);
The same logic, with arrow functions:
event
.
respondWith
(
caches
.
open
(
"cache-v1"
)
.
then
(
cache
=>
cache
.
match
(
event
.
request
))
.
then
(
response
=>
response
||
fetch
(
event
.
request
))
);
Object destructuring lets you unpack specific values from an object into distinct variables:
var
reservationDetails
=
{
nights
:
3
,
rate
:
20
};
var
{
nights
,
rate
}
=
reservationDetails
;
console
.
log
(
"Number of nights"
,
nights
);
console
.
log
(
"Nightly rate"
,
rate
);
One common use for this is to access specific attributes in an object passed to the function as one of its arguments.
Compare these two examples that show how you would access properties of an object passed to a function, with and without destructuring.
Passing an object as an argument:
var
reservationDetails
=
{
nights
:
3
,
rate
:
20
};
var
logMessage
=
(
reservation
)
=>
console
.
log
(
`
${
reservation
.
nights
}
nights:
${
reservation
.
nights
*
reservation
.
rate
}
`
);
logMessage
(
reservationDetails
);
Destructuring an object passed as an object:
var
reservationDetails
=
{
nights
:
3
,
rate
:
20
};
var
logMessage
=
({
nights
,
rate
})
=>
console
.
log
(
`
${
nights
}
nights:
${
nights
*
rate
}
`
);
logMessage
(
reservationDetails
);