Category: ECMAScript6

Setting up an ES6 Project Using Babel and webpack

In this article, we’re going to look at creating a build setup for handling modern JavaScript (running in web browsers) using Babel and Webpack. This is needed to ensure that our modern JavaScript code in particular is made compatible with a wider range of browsers than it might otherwise be. JavaScript, like most we...

Understanding ES6 Modules

This article explores ES6 modules, showing how they can be used today with the help of a transpiler. Almost every language has a concept of modules — a way to include functionality declared in one file within another. Typically, a developer creates an encapsulated library of code responsible for handling related task...

ES6 Generators and Iterators: a Developer’s Guide

ES6 brought a number of new features to the JavaScript language. Two of these features, generators and iterators, have substantially changed how we write specific functions in more complex front-end code. While they do play nicely with each other, what they actually do can be a little confusing, so let’s check them o...

ES6 in Action: let and const

In this tutorial, I’ll introduce let and const, two new keywords added to JavaScript with the arrival of ES6. They enhance JavaScript by providing a way to define block-scope variables and constants. This article is one of many covering new features of JavaScript introduced with ES6, including Map and WeakMap, Se...

ES6 in Action: New Array.* and Array.prototype.* Methods

In this article, we’ll discuss most of the new methods available in ES6 that work with the Array type, using Array.* and Array.prototype.*. When discussing them, I’ll write Array.method() when I describe a “class” method and Array.prototype.method() when I outline an “instance” method. We’ll also see some...

ES6 in Action: New String Methods — String.prototype.*

In my previous article on ES6 array methods, I introduced the new methods available in ECMAScript 6 that work with the Array type. In this tutorial, you’ll learn about new ES6 methods that work with strings: String.prototype.* We’ll develop several examples, and mention the polyfills available for them. Rem...

ES6 in Action: New Number Methods

This article covers new and improved number methods in ES6 (ECMAScript 6). It’s part of a series about the new features of ES6, in which we’ve also discussed new methods available for the String and Array data types, but also new types of data like Map and WeakMap. I’ll introduce you to the new methods and consta...

ES6 in Action: Symbols and Their Uses

While ES2015 has introduced many language features that have been on developers’ wish lists for some time, there are some new features that are less well known and understood, and the benefits of which are much less clear — such as symbols. The symbol is a new primitive type, a unique token that’s guaranteed neve...

ES6 in Action: How to Use Proxies

In computing terms, proxies sit between you and the things you’re communicating with. The term is most often applied to a proxy server — a device between the web browser (Chrome, Firefox, Safari, Edge etc.) and the web server (Apache, Nginx, IIS etc.) where a page is located. The proxy server can modify requests an...

ES6 in Action: Destructuring Assignment

Destructuring assignment sounds complex. It reminds me of object-oriented terms such as encapsulation and polymorphism. I’m convinced they were chosen to make simple concepts appear more sophisticated! In essence, ECMAScript 6 (ES2015) destructuring assignment allows you to extract individual items from arrays or obj...