Three ES6 JavaScript tricks you should know
Tags: javascript
Published: 2021-03-02 18:56:20

---
title: Three ES6 JavaScript tricks you should know
published: true
date: 2021-03-02 15:00:00 UTC
tags: JavaScript
canonical_url: https://www.bytesized.xyz/three-es6-javascript-tricks-you-should-know/
---

I've been watching a lot of "beginner programmer" videos on YouTube recently, trying to get back in the headspace of what it was like when I first learning code. One thing I realized while watching myself code is that I use a ton of ES6 trickery when writing JavaScript. ES6 is a term that JS programmers use to refer to the newer versions of JavaScript, which have a lot of syntax and usability improvements built into them.

Many of the ES6 things that made their way into the language back in 2016 are common place now: if you've read JavaScript tutorials online, you probably know about `const` and `let` for variable definitions, or you've seen "arrow functions" for defining JavaScript functions with easier-to-grok scoping rules.

There's a ton of great things in ES6 that make writing JavaScript so much easier: so much so that I forget sometimes I didn't _ever_ write JS like this. Let's dive into it!

## Destructuring objects and arrays

Destructuring is my favorite ES6 JavaScript trick. When you work with APIs and complex data structures, whether objects or arrays, destructuring allows you to rapidly dive through them, defining new variables and renaming them as need be, without needing to write syntax like `data.response.user.name.first`.

The destructuring syntax uses curly braces to _assign_ variables on the left-hand side of your JavaScript expression. In the below example, I set up the variable `data`, setting the keys `name`, `age`, and `location`. In the second line, I use destructuring to assign three variables: `name` set to the key `name` inside of `data`, `age` set to the key `age`, and `city`, which I set to the key `location`.

![Three ES6 JavaScript tricks you should know](https://www.bytesized.xyz/content/images/2021/03/ES6-Object-Destructuring-----1-.png)<figcaption>ES6 Object Destructuring</figcaption>

That third variable is a neat trick: if I don't want to re-use the key name as my variable outside of the object, I can give it a new variable name, and then say _which_ key it should use to assign the variable. For instance, in the above example, I wrote `location: city`, saying "set the variable `location` to the value of the key `city`, inside of `data`".

You can also use destructuring to get _nested data_. Given the below example, you can dive into a key _inside_ of an object, and assign variables from the keys inside of that subsection of the object. In the below example, I'll look inside of the `name` key in `data`, which has an object as a value, and get the `first` and `last` keys from inside of it:

![Three ES6 JavaScript tricks you should know](https://www.bytesized.xyz/content/images/2021/03/Destructuring-nested-fields---.png)<figcaption>Destructuring nested fields</figcaption>

Arrays can also be destructured. This is particularly useful if you have a known order or structure to your arrays, allowing you to use the straight bracket array syntax to assign variables from inside the array. In the below example, I set up the array `people`, and then assign the variables `me` and `you`, with `me` corresponding to the first entry in the array, and `you` to the second:

![Three ES6 JavaScript tricks you should know](https://www.bytesized.xyz/content/images/2021/03/Destructuring-arrays---_--.png)

Notably, this syntax can be incredibly useful for _returning_ things as well. Given a function that requests data from the web, you may only want to return a certain number of fields. In the below example, I destructure a number of values from an API response, and then return them using a simple shorthand, where I skip setting a key/value pair if the key and the value are the same name. For instance, `{ error }` instead of `{ error: error }`, and `{ data }` instead of `{ data: data }`, as seen below:

![Three ES6 JavaScript tricks you should know](https://www.bytesized.xyz/content/images/2021/03/Syntax-shortcut-for-returning-from-functions.png)<figcaption>Syntax shortcut for returning from functions</figcaption>

## Iterators

Iterators allow you to loop through sets of data in JavaScript more effectively. Given a list of names in a `names` array, you would traditionally loop through them and act on each item as you would in many languages: by setting a temporary variable, often called `i` or something similar, and incrementing it as you loop through the array, stopping once you've reached the end:

![Three ES6 JavaScript tricks you should know](https://www.bytesized.xyz/content/images/2021/03/Old-way-of-looping-in-JavaScript.png)

This style of iteration works, but in newer versions of ES6, we can optimize it in a few ways. The _for..in_ syntax allows you to skip incrementing a temporary variable and checking for the end of an array: just set a temporary variable and loop through the array, calling your temporary variable—JavaScript will stop executing the loop at the end of your array for you:

![Three ES6 JavaScript tricks you should know](https://www.bytesized.xyz/content/images/2021/03/For..in-iteration.png)

This is better, but the savvy readers among you might note that it still uses the _index_ of each item in the array for looking up the actual value. For instance, when the loop runs for the first time, `nameIndex` will begin at `0`, and if I were to `console.log(nameIndex)`, I might expect to get `Fox Mulder` back—instead, I'll just get 0.

The _for..of_ syntax fixes this. Instead of referring to the index, _for..of_ skips it in favor of referencing the values directly. This means that we can simply loop through and `console.log` a value `name`, instead of `nameIndex`:

![Three ES6 JavaScript tricks you should know](https://www.bytesized.xyz/content/images/2021/03/For..of-iteration.png)

## Spreads

Another syntax-heavy trick, _spreads_ allow you to reference parts of an array or collection within a single variable.

To see this in action, we can look back at our previous example, an array of `people`. Given the addition of a _third_ person, with the name "Someone else", we can use the `...` spread operator to destructure and capture everything besides the first value in the array. In the below example, we use it to set the variable `me`, and then `otherPeople`, an array of everything else in the array:

![Three ES6 JavaScript tricks you should know](https://www.bytesized.xyz/content/images/2021/03/Spreads---.png)

You can also use the spread operator in functions. This is a really effective way to handle functions with an arbitrary number of arguments. In the below example, I'll use the spread operator to capture every argument into a `sumNumbers` function, and loop through them to build a summed value:

![Three ES6 JavaScript tricks you should know](https://www.bytesized.xyz/content/images/2021/03/Summing-with-spreads--.png)

* * *

What are some of your favorite ES6 tricks? This isn't an exhaustive look by any means at the incredible improvements that ES6 made to JavaScript—for that, you should check out [ES6 Features](http://es6-features.org/), a great website with usage examples for basically every feature ES6 added to the language.

{% twitter 1366426538527326209 %}

<figcaption>RT/like my ES6 Thread on Twitter ♥</figcaption>