Skip Main Navigation
Ben IlegboduBen Ilegbodu

12 tricks for ES6 fun

A quick look at using ES6 to solve "common-ish" tasks in JavaScript

Tuesday, October 25, 2016 ยท 5 min read

I wrapped up the Learning ES6 series covering Generators as Iterators at the beginning of the year. I had considered talking about generators as observers, symbols, and other more advanced uses of ES6, but ended up spending my time preparing for the speaking engagements I had over the year. Sorry if you were waiting!

There's been a lot of chatter about how ES6 reduces our need for libraries like underscore.js and lodash. I want to take a slightly different approach and showcase how ES6 features can be used in "unintended" ways to accomplish certain common-ish tasks. You can call these "ES6 tricks." I've actually already covered all of these "tricks" in their respective article topics, but I wanted to pull them out as a quick reference.

Without further ado...

1. Quickly logging to the console

We can use object literal shorthand to quickly log a variable with a label to the console:

const myVar = 'foo'
const otherVar = 2

// output:
// {myVar: "foo", otherVar: 2}
console.log({ myVar, otherVar })

By using object literal shorthand, we create an object literal that is immediately written to the log. And since the keys match the variable name, the values have "labels". This comes in handy particularly when the variables are the same time (all strings, all numbers, etc) and we need to differentiate between them.

2. Coercing to a string

We can quickly coerce a value to a string by wrapping it in a template literal:

const num = 2
const numString = `${num}`

// output:
// {num: 2, numString: "2"}
console.log({ num, numString })

This replaces my previous favorite way of string coercion (concatenating an empty string):

const num = 2
const numString = num + ''

// output:
// {num: 2, numString: "2"}
console.log({ num, numString })

3. Swapping variables

We can quickly swap two variables without a temporary one using array destructuring:

const a = 1
const b = 2

;[b, a] = [a, b]

First we constructed an array using the array literal syntax with two elements: a and b. Then using array destructuring we assigned the first element of the newly created array into b and the second element into a. The result is that the variables' values have swapped.

4. Simulating named parameters

We can simulate named parameters with object destructuring and default values in a function header:

const notify = (msg, { type = 'info', timeout, close = true } = {}) => {
  // display notification

notify('Hi!', { type: 'error' })
notify('Hi!', { type: 'warn', close: false })

The entire object (the second parameter) is defaulted to {} when undefined/unspecified, and then the type and close properties are defaulted as well when undefined/unspecified. This provides a lot of flexibility in how the function can be called.

5. Copying an array

We can quickly copy an array using the spread operator:

const manipulateList = (list) => {
  // defensively copy list
  const copiedList = [...list]

  // do something with copiedList

6. Concatenating arrays

We can quickly concatenate multiple arrays together using the spread operator:

const start = ['do', 're', 'mi']
const end = ['la', 'ti']
const scaleFromLiteral = [...start, 'fa', 'so', ...end]

// output: ['do', 're', 'mi', 'fa', 'so', 'la', 'ti']

7. De-duping an array

We can combine Set's de-duping nature with the spread operator to create a de-dupe array helper:

function dedupe(array) {
  return [ Set(array)]

const noDupesArray = dedupe([1, 2, 1, 4, 7, 3, 1])

// output: [1, 2, 4, 7, 3]

Creating the Set from the array will result in duplicates removed, and the spread operator converts the Set back to an Array.

8. Enforcing required parameters

We can use the fact that a default value can be the result of a function call to enforce required parameters:

// Gets called if a parameter is missing and the expression
// specifying the default value is evaluated.
const throwIfMissing = () => {
  throw new Error('Missing parameter')
const func = (requiredParam = throwIfMissing()) => {
  // some implementation

If requiredParam is unspecified or undefined, an Error will be thrown, which is exactly what we want.

9. Enforcing maximum arity

ES6 unfortunately doesn't provide a mechanism for enforcing a maximum arity (number of passed parameters) of a function. However, you can leverage rest parameters to hack around the lack of support.

function max(...values) {
  // only want as many a 3 parameters
  // so throw error if over
  if (values.length > 3) {
    throw Error('max 3 parameters allowed!')

  // use destructuring to get values
  // into variables
  const [a, b, c] = values

  return Math.max(a, b, c)

// not an error
// returns 3
max(1, 2, 3)

// error!
max(1, 2, 3, 4)

The problem with this approach is that the function actually wants to define a, b and c as its parameters, but because it needs to do arity validation, those variables are instead assigned in the function body using destructuring.

We could clean things up a little bit:

function max(a, b, c, ...shouldBeEmpty) {
  if (shouldBeEmpty.length > 0) {
    throw Error('max 3 parameters allowed!')

  return Math.max(a, b, c)

// not an error
// output 6
max(4, 5, 6)

// error!
max(4, 5, 6, 7)

This is a little better, but introduces a 4th parameter, shouldBeEmpty, that's not intended to be a part of the actual code, which could be confusing.

10. Timing out fetch

We can easily provide timeout support to the new Fetch API by including it in a call to Promise.race with a promise-based timeout function:

// Wrap `setTimeout` in a promise such that if
// the timeout completes, the promise is rejected
const timeout = (delay = 30000) => {
  return new Promise((resolve, reject) => {
    const rejectWithError = () => {
      reject(new Error('Timed out!'))

    setTimeout(rejectWithError, delay)

// Return a promise that will be fulfilled if
// the fetch is fulfilled before the timeout
// is rejected.
const fetchWithTimeout = (url, delay = 3000) => {
  // construct an array to pass to `Promise.race`
  return Promise.race([fetch(url), timeout(delay)])

// Make an XHR request for the URL that has to
// return a response *before* the 1 s timeout
// happens
fetchWithTimeout('/json/data.json', 1000)
  .then((response) => {
    // successful response before the 1 s timeout
    console.log('successful response', response)
  .catch((e) => {
    // Either the timeout occurred or some other error.
    // Would need to check the method or use a custom
    // `Error` subclass in `timeout`
    console.error('request error', e)

11. Defining an abstract base class

An abstract base class is a type of class that is exclusively intended to be inherited. It cannot be directly constructed. The main use case is for the inherited classes to have a common interface. Unfortunately, classes don't yet leverage the abstract keyword to make abstract base classes, but you can use introduced with classes to simulate it.

class Note {
  constructor() {
    if ( === Note) {
      throw new Error('Note cannot be directly constructed.')
class ColorNote extends Note {}
const note = new Note() // error!
const colorNote = new ColorNote() // ok

12. Defining lazy range function

We can use generators to create a lazy range function:

// Return a new generator that will iterate from `start` for
// `count` number of times
function* range(start, count) {
  for (let delta = 0; delta < count; delta++) {
    yield start + delta

for (let teenageYear of range(13, 7)) {
  console.log(`Teenage angst @ ${teenageYear}!`)

Wrapping up

That's it! There are many more clever ways in which we can leverage this newfound functionality with ES6. These were the dozen that jumped out to me most. If you have any additional "tricks" that you use, tweet me at @benmvp!

Keep learning my friends. ๐Ÿค“

Subscribe to the Newsletter

Get notified about new blog posts, minishops & other goodies


Hi, I'm Ben Ilegbodu. ๐Ÿ‘‹๐Ÿพ

I'm a Christian, husband, and father of 3, with 15+ years of professional experience developing user interfaces for the Web. I'm a Google Developer Expert Frontend Architect at Stitch Fix, and frontend development teacher. I love helping developers level up their frontend skills.

Discuss on Twitter // Edit on GitHub