Three ES6 Features I Use Everyday at Work

Today I’m going to show you three of the most used ES6 (EcmaScript 2015) features that I personally use everyday at work.

Photo by Fotis Fotopoulos on Unsplash

TL;DR:

const - let: block-scoped constants and variables.

Arrow functions: Shorter syntax functions.

Destructuring: Create variables directly from another objects.

First, I’m going to start with the feature I use the most: const and let.

const & let

• const let us declare a constant with a read-only value.

const name = "Joe";
// If we try to reassign it, we'll get an error
name = "Mike";
// Uncaught TypeError: Assignment to constant variable.
// Additionally we can't declare it without assigning a value
const name;
// SyntaxError: Missing initializer in const declaration

Note: When using objects, we are able to change the values of the properties because we aren’t reassigning the object:

const myDog = { name: "Homero", breed: "Labrador" };
// If we change a property it won't throw an error
myDog.name = "Pedro";
myDog.name = "Poodle";
// This will
myDog = { name: "Pedro", breed: "Poodle" };
// Uncaught TypeError: Assignment to constant variable.

• On the other hand, we have let:

This new keyword declares a variable that can be initialized without a value.

let name = "Joe";
// This is also possible
let name;
name = "Joe"

These two new keywords are block-scoped. What does that mean? Basically, the scope of the variables created with let and const are going to exist only inside the area of if and switch conditions or for and while loops. Generally speaking, they will live inside of the { } (curly brackets) where they were declared.

if (someCondition) {
  const msg = "It's true";
}
console.log(msg); // Uncaught ReferenceError: msg is not defined

The same happens with let:

for (let i = 0; i < 3; i++) {
  console.log(i);
}
console.log(i);
// 0 
// 1 
// 2
// Uncaught ReferenceError: i is not defined
// If we would've used var instead, "i" would be 3 at this point

Arrow functions

This is a new type of function that has very cool features, like shorter syntax and the this keyword is attached to its parent and not the local scope.

I’m just going to cover the syntax in order to keep this post as simple as possible. You can take a look at the other benefits here.

Let’s see them in action:

// Normal function
function sum(a, b) {
  return a + b;
}
// Arrow function
const sum = (a, b) => {
  return a + b;
}
// Anonymous arrow function
setTimeout(() => {
  console.log('Anon function!');
}, 100);
// There is also a shorter syntax for returning a value
// Just wrap it in parenthesis
const sum = (a, b) => (
  a + b
);
// We can make it even shorter if it's just a line
const sum = (a, b) => a + b;
// If the function has only one parameter we can omit the parenthesis
const sumTwo = num => num + 2;

Destructuring

As the name suggests, this will let us destructure an object or an array into one or more variables. Let’s see how it works:

Destructuring objects:

// We have a simple object
const car = {
  weels: 4,
  doors: 5
}
// We use {curly brackets} to destructure an object
const { weels } = car;
// This is going to create a constant named "weels" with the value of the property "weels" from the object "car"
console.log(weels); // 4
// Pretty cool huh? We can even define multiple variables within the same statement
const { weels, doors } = car;
console.log(weels); // 4
console.log(doors); // 5

Destructuring arrays:

// Suppose we have the following array
const colors = ["blue", "red", "green"];
// We use [square brackets] to destructure an array and give the name that we want to the variable/s. The assignments are going to be made in the order the elements are stored in the array.
const [blue, red] = colors;
console.log(primaryColor); // "blue"
console.log(secondaryColor); // "red"
// We can ignore values we're not interested in
const [firstColor, , secondColor] = colors;
console.log(firstColor); // "blue"
console.log(secondColor); // "green"
// Some pretty cools things can be done, like swapping variable values
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
// Passing an array returned from a function
const returnArray = () => {
  return [1, 2];
}
const [firstValue, secondValue] = returnArray();
console.log(firstValue); // 1
console.log(secondValue); // 2

And that’s all for now! You can find more detailed information here:

• let and const
• Arrow functions
• Destructuring

There is plenty more features of ES6 that you can check here.