From JS5 to JS6

Ángel Reyes
Jun 30 · 4 min read

ECMAScript is a specification for the scripting language, which in the middle of 2015 has a drastic change marking a before and after of the way that we use to know JS.

ES6

Version: ES6/ES 2015

Released: June 2015

What’s new?

Variables

Var: Variables declared as var has global scope or function, it makes too easy override variables that have no local scope (i.e. variables declared in a function).
Let: let variables have block scope, these variables only could be modified in his own scope.
Const: const variables also have block scope but are immutables and cannot be reassigned, these variables are constants.

Arrow Functions

It’s an easier way to declare anonymous functions.

Arrow functions are one-line function, we avoid the use of words function/return. Parentheses are optional if one parameter is received or mandatory if multiple parameters or none.
Return value could be returned immediately or brackets if multiples steps must be completed before.

ES5 function:

ES6 arrow function:

Default params

Default values can be set to function params.

Rest operator

Used to indicate multiple params in a function (when the number of params is unknown).

Spread operator

The spread operator could be used to copy an array or an object into another.

String Interpolation

The common way to concatenate string is with the + operator, in ES6 we can make use of string templates.

Custom Interpolation

Define string with custom values for arbitrary methods.

Raw String Access

Access to the raw string content (backslashes are not interpreted).

Objects

New enhanced object properties.

Destructuring

Extract parameters from an array on an object.

For-of

It’s a new loop similar to for-in added in this version.

Generator

Special functions that pause the execution to be resumed from where it had been executed. Generators are paused with the yield word, with the next function the execution could be resumed. Next will return an object with two keys value (the returned value) and done (the flag to know if the execution has finished).

Map

It’s a key-value structure that could set any type of object, this element could use iterable functions due to the structure it’s an iterable object.

WeakMap

Is a structure similar to the map with the difference that has a weak reference to the object, cannot use the iterable methods only the get and delete functions, if an object of the map is modified automatically is removed from the map.

Set

A data structure that stores unique values without taking care of the type, this structure also is iterable.

WeakSet

It is a data structure that only could store objects with weak references, as it happens with the WeakMaps if an entry value is modified, the reference is lost, also the iterable methods cannot be used.

Promises

Or how to create async functions without defining an implicit callback.

Async/Await

Async functions are functions that return Promises, which are declared with the async keyword, to make use of these functions we use the await keyword, to wait until the promise is resolved.

Classes and Hierarchy

Classes have been introduced in this version to implement OOP.

Modules

Or how to split the code into multiple files and make a reusable code in a JS native way.

Exporting functions from a module:

Importing functions to a module:

Symbols

It’s a (new) primitive data type that is immutable and unique, could be used as identifiers in object properties, each symbol has associated a string type or undefined which only works as a symbol description.

Proxies

Proxies are objects that intercept operations in another object, letting manage and modifying object behavior.

Reflection

Returns an array of the target object’s own property keys.

Extended Literals

Support for safe binary and octal literals.

Unicode Strings

Extended support for Unicode strings.

Typed Arrays

Support for arbitrary byte-based data structures.

New Methods

Object.assign: Let assign new properties to an object.
Object.is: Check if two values are equals.
String.repeat: Repeats a string n times.
String.startsWith: Check if a string starts with a substring.
String.endWith: Check if a string ends with a substring.
String.includes: Check if a string contains a substring.
Number.isNaN: Check if the past value is NaN.
Number.isFinite: Check if the past value is Finite.
Number.isSafeInteger: Check if the past value is Finite.
Number.EPSILON: Represents the difference between 1 and the smallest floating point number greater than 1.
Math.trunc: Return the integer part of a number.
Math.sign: Return the sign of a number, indicating whether the number is positive, negative or zero.
Math.cbrt: Returns the cube root of a number.
Array.find: Returns true or false given a search condition.
Array.findIndex: Returns index of the element to match.

Internationalization & Localization

New methods for internationalization and localization has been added.
Intl.Collator: Enable language sensitive string comparison.
Intl.NumberFormat: Set numeric formatting enabled by language sensitive.
Intl.DateTimeFormat: Set date and time formatting enabled by language sensitive.

Ángel Reyes

Written by

Software Enginner @Wizeline 🇲🇽

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade