Have a Problem in Your Javascript? There’s Probably an ES6 Feature for That
As I dive deeper into learning Javascript, I’m starting to realize there are some inefficiencies in vanilla Javascript. I have found myself repeating code multiple times even when trying to reduce and reuse code, mainly because there wasn’t another way. I was mutating data in ways I didn’t expect. I was simply writing long, repetitive code. This is what has lead me to learn more about ES6 and its features, and there are a handful of improvements that are proving to be quite useful in my code.
Destructuring Arrays— Destructuring in ES6 makes it possible to unpack values from arrays into distinct variables. The values can then be manipulated and reassigned in a handful of different ways. The basic way to do this is like this:
let x =[1, 2, 3, 4, 5];
let [y, z] = x;console.log(y) // 1
console.log(z) // 2
The left hand side of the assignment basically defines what values to unpack from the sourced variable. There are a few variations on this method that give us some flexibility.
We can assign a variable to a default value:
let a, b;
[a=5, b=7] = [1];
console.log(a) // 1
console.log(b) // 7
We can ignore certain values:
let x = [1, 2, 3];
[a, , b] = x;
console.log(a) // 1
console.log(b) // 3Or assign the rest of an array to a variable:
[a, ...b] = [1, 2, 3];
console.log(a) // 1
console.log(b) // [2, 3]These methods make it easy to work with arrays, and can help us cut down on arduous sections of our code, especially when dealing with passing arrays to other variables or functions.
Destructuring Objects — Destructuring is also possible for objects. We can unpack property values in much the same way as Arrays. A main difference is the ability to assign the property values to new variables with completely different names.
We can unpack similar to arrays:
let o = {p: 42, q: true};
let {p, q} = o;
console.log(p) // 42;
console.log(q) // true;And probably most useful, the ability to unpack and assign to a variable with a different name:
let o = {p: 42, q: true};
let {p: foo, q: bar} = o;
console.log(foo) // 42;
console.log(bar) // true;Unpacking values from an object or an array makes it very easy to pass data around your program and cuts down on dry code.
The rest operator — If the last named argument of a function is prefixed with …, it becomes an array of all the remaining arguments passed to the function. Example:
function f(a, b, ...restOfArgs){ console.log(restOfArgs) }
f(1, 2, 3, 4, 5)
console.log(restOfArgs) // [3, 4, 5]This is a significant improvement on the ‘arguments’ object, as since rest parameters are genuine array instances, we can use array methods on them right out of the box! Keep in mind that rest parameters can also be destructured.
Template strings — Writing strings is now improved with template strings. Activated using backticks (``), template strings allow you to embed expressions into them by using ${}. This gets rid of the hassle of concatenating strings, which can get messy quick. You can use multi-line strings and string interpolation features with template strings too.
let toBeInserted = 'hello';
return `hey ${toBeInserted} how are you`;
// 'hey hello how are you';As you can see, there are many useful methods to be used in ES6. Getting into the habit of using them now will save you (and me) a lot of time and effort in the future!

