JavaScript ES6 – Write Less, Do More

JavaScript ES6, also known as ECMAScript 2015, was a major update to the language that introduced many new features and syntax improvements. The driving principle behind ES6 is to allow developers to write more concise, modular and maintainable code. In essence, ES6 lets you write less code to accomplish more. In this article, we‘ll tour the key features of ES6 and see how they enable more effective JavaScript programming.

Declaring Variables with const and let

One of the most basic changes in ES6 is the addition of two new keywords for declaring variables: const and let.

Variables declared with const cannot be reassigned later in the code. They are constants in the true sense of the word. This is useful for values that you know will not need to change, like configuration settings or references to DOM elements.

const MAX_ITEMS = 30;
const el = document.getElementById(‘my-element‘);

In contrast, let is used to declare variables that may be reassigned, much like the var keyword. The difference is that let is block scoped, meaning it‘s only accessible within the nearest set of curly braces (function, if-else block, or loop).

let count = 0;
if (count < MAX_ITEMS) {
let item = ‘item‘ + count;
console.log(item);
count++;
}

By switching to const and let, your code becomes more self-documenting. It‘s clear which variables are meant to be constant and which may change. It also prevents accidental reassignments and scoping issues common with var.

Concise Functions with Arrow Syntax

ES6 introduced a new way of writing functions using the "fat arrow" (=>) syntax. Arrow functions provide a more concise way to write function expressions.

// ES5 function expression
var sum = function(a, b) {
return a + b;
};

// ES6 arrow function
const sum = (a, b) => {
return a + b;
};

If the function body consists of a single expression, you can omit the curly braces and return keyword. This creates a concise, one-line function:

const sum = (a, b) => a + b;

Arrow functions also have a shorter syntax for specifying a function with a single parameter. If there‘s only one parameter, you can omit the parentheses around the parameter list:

const square = x => x * x;

One important difference with arrow functions is that they do not have their own this binding. Instead, this is captured from the surrounding code‘s context. This is often useful, but can be confusing if you‘re not aware of the difference.

const person = {
name: ‘John‘,
greet: function() {
setTimeout(() => {
console.log(‘Hi, I\‘m ‘ + this.name);
}, 1000);
}
};

In the example above, the arrow function inside setTimeout() captures this from the surrounding greet() method, which is what we want. If we had used a regular function expression, this inside the function would be undefined or the global object (e.g. window in a browser).

String Interpolation with Template Literals

ES6 brings a new kind of string literal using backticks (`), called a template literal. Template literals provide an easy way to interpolate variables and expressions into strings. The syntax is to use backticks instead of single or double quotes, and to use ${} to insert a variable or expression.

const name = ‘John‘;
const age = 30;
console.log(Hi, I‘m ${name} and I‘m ${age} years old.);

Template literals respect newlines in the source code, making it easy to write multiline strings:

const multiline = This is a multiline string in JavaScript! ;

You can even use template literals for HTML templates in JavaScript:

const items = [‘item1‘, ‘item2‘, ‘item3‘];
const html = <ul> ${items.map(item =><li>${item}</li>).join(‘‘)} </ul> ;

Providing Default Parameters

In ES6, you can provide default values for function parameters right in the function declaration:

function greet(name = ‘Anonymous‘) {
console.log(Hello ${name}!);
}

greet(); // Hello Anonymous!
greet(‘John‘); // Hello John!

This is a much cleaner syntax compared to the old way of checking for undefined parameters and providing defaults inside the function body.

Default parameters can be any expression, and can even refer to previous parameters:

function buildUrl(root, path, protocol = ‘https‘) {
return ${protocol}://${root}/${path};
}

Unpacking Values with Destructuring

Destructuring is a convenient way to extract values from objects or arrays into distinct variables.

Object destructuring:
const person = {
name: ‘John‘,
age: 30
};

const { name, age } = person;
console.log(name); // ‘John‘
console.log(age); // 30

Array destructuring:
const numbers = [1, 2, 3, 4, 5];

const [a, b] = numbers;
console.log(a); // 1
console.log(b); // 2

const [x, ...y] = numbers;
console.log(x); // 1
console.log(y); // [2,3,4,5]

Destructuring is often used to unpack parameters in a function:

function getData({ url, method = ‘GET‘ }) {
console.log(url, method);
}

getData({ url: ‘example.com‘ }); // ‘example.com‘, ‘GET‘

Sharing Code with Modules

ES6 introduced a standard syntax for sharing code between JavaScript files, known as modules. You can export any top-level function, class, var, let, or const from a file.

In a file named math.js:
export function sum(x, y) {
return x + y;
}
export const PI = 3.14;

Then in another file, you can import the specific items you need:

import { sum, PI } from ‘./math.js‘;

console.log(sum(2, 3)); // 5
console.log(PI); // 3.14

You can also import everything that‘s exported from a module:

import * as math from ‘./math.js‘;

console.log(math.sum(2, 3)); // 5
console.log(math.PI); // 3.14

Modules enable you to break your code into separate files in a logical way, rather than having to manage everything in giant monolithic files. It makes your code more organized and reusable.

Handling Asynchronous Code with Promises

Promises provide a cleaner way to deal with asynchronous code compared to callbacks. A promise represents a value that may not be available yet but will be resolved at some point in the future.

You create a new promise with the Promise constructor:

const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘Data received!‘);
}, 2000);
});
};

Inside the promise, you call resolve(value) when the asynchronous operation successfully completes, or reject(error) if an error occurred.

To use a promise, you call .then() on it and provide a callback for the resolved value:

fetchData()
.then(data => {
console.log(data); // ‘Data received!‘
})

You can chain .then() calls to run asynchronous operations in sequence:

fetchData()
.then(data => {
console.log(data);
return fetchMoreData(data);
})
.then(moreData => {
console.log(moreData);
})

To handle errors, you add a .catch() at the end of the chain:

fetchData()
.then(data => {...})
.catch(err => {
console.log(‘Oops, an error:‘, err);
})

Promises provide a much more readable and manageable syntax for dealing with asynchronous operations that depend on each other. They avoid "callback hell" and make error handling more straightforward.

Packing and Unpacking with Rest and Spread

The rest operator (…) allows a function to accept any number of arguments as an array:

function sum(...numbers) {
return numbers.reduce((total, number) => total + number, 0);
}

sum(1, 2); // 3
sum(1, 2, 3, 4); // 10

The spread operator (…) allows an iterable like an array to be expanded in places where multiple arguments or elements are expected:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

The spread operator is often used to create a shallow copy of an array or object:

const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const obj3 = { ...obj1, ...obj2 }; // { x: 1, y: 2, z: 3 }

Object-Oriented Programming with Classes

ES6 introduced a class syntax which is a cleaner way to create objects and deal with inheritance.

class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}

getArea() {
return this.width * this.height;
}
}

const square = new Rectangle(10, 10);
console.log(square.getArea()); // 100

To create a subclass, use the extends keyword:

class ColoredRectangle extends Rectangle {
constructor(width, height, color) {
super(width, height);
this.color = color;
}
}

The super() function calls the constructor of the parent class.

With the class syntax, it‘s much more intuitive to create hierarchies of objects. The syntax is similar to class-based languages like Java or C++, but under the hood it‘s still using JavaScript‘s prototype-based inheritance.

Wrapping Up

ES6 introduced numerous features that allow JavaScript developers to write shorter, more expressive code. By leveraging features like arrow functions, destructuring, and the spread operator, you can often accomplish in a single line what would have taken multiple lines of ES5 code.

But ES6 is not just about saving keystrokes. Features like const/let, classes, and modules enable developers to write code that is more self-documenting, modular, and maintainable. Promises and other asynchronous features help manage complex flows of non-blocking operations.

In short, ES6 represents a significant step forward for the JavaScript language. It makes JavaScript more powerful and efficient for developers, while also making the resulting code more readable and scalable. If you‘re not using ES6 features in your JavaScript code, you‘re missing out on significant improvements to your development workflow and codebase.