Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript

You’ve probably heard about ECMAScript 6 (or ES6) already. It’s the next version of JavaScript, and it has some great new features. The features have varying degrees of complexity and are useful in both simple scripts and complex applications. In this article, we’ll discuss a hand-picked selection of ES6 features that you can use in your everyday JavaScript coding.

Please note that support for these new ES6 features is well underway in modern browsers, although support varies. If you need to support old versions of browsers that lack many ES6 features, I’ll touch on solutions that might help you start using ES6 today.

Further Reading on SmashingMag: Link

Most of the code samples come with an external “Run this code” link, so that you can see the code and play with it.



You’re used to declaring variables using var. You can now use let as well. The subtle difference lies in scope. While var results in a variable with the surrounding function as its scope, the scope of a variable declared using let is only the block it is in.

if(true) {
   let x = 1;
console.log(x); // undefined

This can make for cleaner code, resulting in fewer variables hanging around. Take this classic array iteration:

for(let i = 0, l = list.length; i < l; i++) {
   // do something with list[i]

console.log(i); // undefined

Often one would use, for example, the j variable for another iteration in the same scope. But with let, you could safely declare i again, since it’s defined and available only within its own block scope.


There is another way to declare block-scoped variables. With const, you declare a read-only reference to a value. You must assign a variable directly. If you try to change the variable or if you don’t a set a value immediately, then you’ll get an error:

const MY_CONSTANT = 1;
MY_CONSTANT = 2 // Error
const SOME_CONST; // Error

Note that you can still change object properties or array members:

const MY_OBJECT = {some: 1};
MY_OBJECT.some = 'body'; // Cool

Arrow Functions

Arrow functions are a great addition to the JavaScript language. They make for short and concise code. We are introducing arrow functions early in this article so that we can take advantage of them in other examples later on. The next code snippet shows an arrow function, with the same function written in the familiar ES5 style:

let books = [{title: 'X', price: 10}, {title: 'Y', price: 15}];

let titles = item => item.title );

// ES5 equivalent:
var titles = {
   return item.title;

If we look at the syntax of arrow functions, there is no function keyword. What remains is zero or more arguments, the “fat arrow” (=>) and the function expression. The return statement is implicitly added.

With zero or more than one argument, you must provide parentheses:

// No arguments () => 1 ); // [1, 1]

// Multiple arguments
[1,2].map( (n, index) => n * index ); // [0, 2]

Put the function expression in a block ({ ... }) if you need more logic or more white space:

let result = [1, 2, 3, 4, 5].map( n => {
   n = n % 3;
   return n;

Not only do arrow functions mean fewer characters to type, but they also behave differently from regular functions. An arrow function expression inherits this and arguments from the surrounding context. This means you can get rid of ugly statements like var that = this, and you won’t need to bind functions to the correct context. Here’s an example (note this.title versus that.title in the ES5 version):

let book = {
   title: 'X',
   sellers: ['A', 'B'],
   printSellers() {
      this.sellers.forEach(seller => console.log(seller + ' sells ' + this.title));

// ES5 equivalent:
var book = {
   title: 'X',
   sellers: ['A', 'B'],
   printSellers: function() {
      var that = this;
      this.sellers.forEach(function(seller) {
         console.log(seller + ' sells ' + that.title)



A couple of convenience methods have been added to the String prototype. Most of them basically eliminate some workarounds with the indexOf() method to achieve the same:

'my string'.startsWith('my'); //true
'my string'.endsWith('my'); // false
'my string'.includes('str'); // true

Simple but effective. Another convenience method has been added to create a repeating string:

'my '.repeat(3); // 'my my my '

Template Literal

Template literals provide a clean way to create strings and perform string interpolation. You might already be familiar with the syntax; it’s based on the dollar sign and curly braces ${..}. Template literals are enclosed by backticks. Here’s a quick demonstration:

let name = 'John',
   apples = 5,
   pears = 7,
   bananas = function() { return 3; }

console.log(`This is ${name}.`);

console.log(`He carries ${apples} apples, ${pears} pears, and ${bananas()} bananas.`);

// ES5 equivalent:
console.log('He carries ' + apples + ' apples, ' + pears + ' pears, and ' + bananas() +' bananas.');

In the form above, compared to ES5, they’re merely a convenience for string concatenation. However, template literals can also be used for multi-line strings. Keep in mind that white space is part of the string:

let x = `1...
3 lines long!`; // Yay

// ES5 equivalents:
var x = "1...\n" + 
"2...\n" +
"3 lines long!";

var x = "1...\n2...\n3 lines long!";


The Array object now has some new static class methods, as well as new methods on the Array prototype.

First, Array.from creates Array instances from array-like and iterable objects. Examples of array-like objects include:

  • the arguments within a function;
  • a nodeList returned by document.getElementsByTagName();
  • the new Map and Set data structures.
let itemElements = document.querySelectorAll('.items');
let items = Array.from(itemElements);
items.forEach(function(element) {

// A workaround often used in ES5:
let items =;

In the example above, you can see that the items array has the forEach method, which isn’t available in the itemElements collection.

An interesting feature of Array.from is the second optional mapFunction argument. This allows you to create a new mapped array in a single invocation:

let navElements = document.querySelectorAll('nav li');
let navTitles = Array.from(navElements, el => el.textContent);

Then, we have Array.of, which behaves much like the Array constructor. It fixes the special case when passing it a single number argument. This results in Array.of being preferable to new Array(). However, in most cases, you’ll want to use array literals.

let x = new Array(3); // [undefined, undefined, undefined]
let y = Array.of(8); // [8]
let z = [1, 2, 3]; // Array literal

Last but not least, a couple of methods have been added to the Array prototype. I think the find methods will be very welcome to most JavaScript developers.

  • find returns the first element for which the callback returns true.
  • findIndex returns the index of the first element for which the callback returns true.
  • fill “overwrites” the elements of an array with the given argument.
[5, 1, 10, 8].find(n => n === 10) // 10

[5, 1, 10, 8].findIndex(n => n === 10) // 2

[0, 0, 0].fill(7) // [7, 7, 7]
[0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 7, 0]


A couple of new methods have been added to the Math object.

  • Math.sign returns the sign of a number as 1, -1 or 0.
  • Math.trunc returns the passed number without fractional digits.
  • Math.cbrt returns the cube root of a number.
Math.sign(5); // 1
Math.sign(-9); // -1

Math.trunc(5.9); // 5
Math.trunc(5.123); // 5

Math.cbrt(64); // 4

If you want to learn more about the new number and math features in ES612, Dr. Axel Rauschmayer has you covered.

Spread Operator

The spread operator (...) is a very convenient syntax to expand elements of an array in specific places, such as arguments in function calls. Showing you some examples is probably the best way to demonstrate just how useful they are.

First, let’s see how to expand elements of an array within another array:

let values = [1, 2, 4];
let some = [...values, 8]; // [1, 2, 4, 8]
let more = [...values, 8, ...values]; // [1, 2, 4, 8, 1, 2, 4]

// ES5 equivalent:
let values = [1, 2, 4];
// Iterate, push, sweat, repeat...
// Iterate, push, sweat, repeat...

The spread syntax is also powerful when calling functions with arguments:

let values = [1, 2, 4];


function doSomething(x, y, z) {
   // x = 1, y = 2, z = 4

// ES5 equivalent:
doSomething.apply(null, values);

As you can see, this saves us from the often-used fn.apply() workaround. The syntax is very flexible, because the spread operator can be used anywhere in the argument list. This means that the following invocation produces the same result:

let values = [2, 4];
doSomething(1, ...values);

We’ve been applying the spread operator to arrays and arguments. In fact, it can be applied to all iterable objects, such as a NodeList:

let form = document.querySelector('#my-form'),
   inputs = form.querySelectorAll('input'),
   selects = form.querySelectorAll('select');

let allTheThings = [form, ...inputs, ...selects];

Now, allTheThings is a flat array containing the <form> node and its <input> and <select> child nodes.


Destructuring provides a convenient way to extract data from objects or arrays. For starters, a good example can be given using an array:

let [x, y] = [1, 2]; // x = 1, y = 2

// ES5 equivalent:
var arr = [1, 2];
var x = arr[0];
var y = arr[1];

With this syntax, multiple variables can be assigned a value in one go. A nice side effect is that you can easily swap variable values:

let x = 1,
   y = 2;

[x, y] = [y, x]; // x = 2, y = 1

Destructuring also works with objects. Make sure to have matching keys:

let obj = {x: 1, y: 2};
let {x, y} = obj; // x = 1, y = 2

You could also use this mechanism to change variable names:

let obj = {x: 1, y: 2};
let {x: a, y: b} = obj; // a = 1, b = 2

Another interesting pattern is to simulate multiple return values:

function doSomething() {
   return [1, 2]

let [x, y] = doSomething(); // x = 1, y = 2

Destructuring can be used to assign default values to argument objects. With an object literal, you can actually simulate named parameters.

function doSomething({y = 1, z = 0}) {
   console.log(y, z);
doSomething({y: 2});


Default Values

In ES6, defining default values for function parameters is possible. The syntax is as follows:

function doSomething(x, y = 2) {
   return x * y;

doSomething(5); // 10
doSomething(5, undefined); // 10
doSomething(5, 3); // 15

Looks pretty clean, right? I’m sure you’ve needed to fill up some arguments in ES5 before:

function doSomething(x, y) {
   y = y === undefined ? 2 : y;
   return x * y;

Either undefined or no argument triggers the default value for that argument.

Rest Parameters

We’ve been looking into the spread operator. Rest parameters are very similar. It also uses the ... syntax and allows you to store trailing arguments in an array:

function doSomething(x, ...remaining) {
   return x * remaining.length;

doSomething(5, 0, 0, 0); // 15


Modules are certainly a welcome addition to the JavaScript language. I think this major feature alone is worth digging into ES6.

Any serious JavaScript project today uses some sort of module system — maybe something like the “revealing module pattern” or the more extensive formats AMD or CommonJS. However, browsers don’t feature any kind of module system. You always need a build step or a loader for your AMD or CommonJS modules. Tools to handle this include RequireJS, Browserify and Webpack.

The ES6 specification includes both a new syntax and a loader mechanism for modules. If you want to use modules and write for the future, this is the syntax you should use. Modern build tools support this format, perhaps via a plugin, so you should be good to go. (No worries — we’ll discuss this further in the “Transpilation” section later on.)

Now, on to the ES6 module syntax. Modules are designed around the export and import keywords. Let’s examine an example with two modules right away:

// lib/math.js

export function sum(x, y) {
   return x + y;
export var pi = 3.141593;
// app.js

import { sum, pi } from "lib/math";
console.log('2π = ' + sum(pi, pi));

As you can see, there can be multiple export statements. Each must explicitly state the type of the exported value (function and var, in this example).

The import statement in this example uses a syntax (similar to destructuring) to explicitly define what is being imported. To import the module as a whole, the * wildcard can be used, combined with the as keyword to give the module a local name:

// app.js

import * as math from "lib/math";
console.log('2π = ' + math.sum(math.pi, math.pi));

The module system features a default export. This can also be a function. To import this default value in a module, you’ll just need to provide the local name (i.e. no destructuring):

// lib/my-fn.js

export default function() {
   console.log('echo echo');

// app.js

import doSomething from 'lib/my-fn';

Please note that the import statements are synchronous, but the module code doesn’t execute until all dependencies have loaded.


Classes are a well-debated feature of ES6. Some believe that they go against the prototypal nature of JavaScript, while others think they lower the barrier to entry for beginners and people coming from other languages and that they help people writing large-scale applications. In any case, they are part of ES6. Here’s a very quick introduction.

Classes are built around the class and constructor keywords. Here’s a short example:

class Vehicle {
   constructor(name) { = name;
      this.kind = 'vehicle';
   getName() {

// Create an instance
let myVehicle = new Vehicle('rocky');

Note that the class definition is not a regular object; hence, there are no commas between class members.

To create an instance of a class, you must use the new keyword. To inherit from a base class, use extends:

class Car extends Vehicle {
   constructor(name) {
      this.kind = 'car'

let myCar = new Car('bumpy');

myCar.getName(); // 'bumpy'
myCar instanceof Car; // true
myCar instanceof Vehicle; //true

From the derived class, you can use super from any constructor or method to access its base class:

  • To call the parent constructor, use super().
  • To call another member, use, for example, super.getName().

There’s more to using classes. If you want to dig deeper into the subject, I recommend “Classes in ECMAScript 624” by Dr. Axel Rauschmayer.


Symbols are a new primitive data type, like Number and String. You can use symbols to create unique identifiers for object properties or to create unique constants.

const MY_CONSTANT = Symbol();

let obj = {};
obj[MY_CONSTANT] = 1;

Note that key-value pairs set with symbols are not returned by Object.getOwnPropertyNames(), and they are not visible in iterations, Object.keys() or JSON.stringify(). This is in contrast to regular string-based keys. You can get an array of symbols for an object with Object.getOwnPropertySymbols().

Symbols work naturally with const because of their immutable character:

const CHINESE = Symbol();
const ENGLISH = Symbol();
const SPANISH = Symbol();

switch(language) {
   case CHINESE:
   case ENGLISH:
   case SPANISH:

You can give a symbol a description. You can’t use it to access the symbol itself, but it’s useful for debugging.

const CONST_1 = Symbol('my symbol');
const CONST_2 = Symbol('my symbol');

typeof CONST_1 === 'symbol'; // true

CONST_1 === CONST_2; // false

Want to learn more about symbols? Mozilla Developer Network has a good page about the new symbol primitive25.


We can write our code in ES6 today. As mentioned in the introduction, browser support for ES6 features is not extensive yet and varies a lot. It’s very likely that not all of the ES6 code you write will be understood by the browsers of your users. This is why we need to convert it to the previous version of JavaScript (ES5), which runs fine in any modern browser. This conversion is often referred to as “transpilation.” We’ll need to do this with our applications until the browsers we want to support understand ES6.

Getting Started

Transpiling code is not hard. You can transpile code directly from the command line, or you can include it as a plugin for a task runner, such as Grunt or Gulp. Plenty of transpilation solutions are out there, including Babel, Traceur and TypeScript. See, for instance, the many ways to start using ES626 with Babel (formerly “6to5”). Most features of ES6 are at your disposal!

Now that you’re hopefully enthusiastic about using ES6, why not start using it? Depending on the features you want to use and the browsers or environments you need to support (such as Node.js), you’ll probably want to incorporate a transpiler in your workflow. And if you’re up for it, there are also file watchers and live browser reloaders to make your coding experience seamless.

If you’re starting from scratch, you might just want to transpile your code from the command line (see, for example, the Babel CLI documentation27). If you are already using a task runner, such as Grunt or Gulp, you can add a plugin such as gulp-babel28 or the babel-loader29 for Webpack. For Grunt, there is grunt-babel30 and many other ES6-related plugins31. Folks using Browserify might want to check out babelify32.

Many features can be converted to ES5-compatible code without significant overhead. Others do require extra stopgaps (which can be provided by the transpiler) and/or come with a performance penalty. Some are simply impossible. To play around with ES6 code and see what the transpiled code looks like, you can use various interactive environments (also known as REPLs):

Note that TypeScript is not exactly a transpiler. It’s a typed superset of JavaScript that compiles to JavaScript. Among other features, it supports many ES6 features, much like the other transpilers.

So, What Exactly Can I Use?

In general, some of the features of ES6 can be used almost for “free,” such as modules, arrow functions, rest parameters and classes. These features can be transpiled to ES5 without much overhead. Additions to Array, String and Math objects and prototypes (such as Array.from() and "it".startsWith("you")) require so-called “polyfills.” Polyfills are stopgaps for functionality that a browser doesn’t natively support yet. You can load a polyfill first, and your code will run as if the browser has that functionality. Both Babel and Traceur do provide such polyfills.

See Kangax’s ES6 compatibility table40 for a full overview of ES6 features that are supported by both transpilers and browsers. It is motivating to see that, at the time of writing, the latest browsers already support 55% to over 70% of all ES6 features. Microsoft Edge, Google Chrome and Mozilla’s Firefox are really competing with each other here, which is great for the web at large.

Personally, I’m finding that being able to easily use new ES6 features such as modules, arrow functions and rest parameters is a relief and a significant improvement to my own coding. Now that I’m comfortable with writing in ES6 and transpiling my code to ES5, more ES6 goodness will follow naturally over time.

What’s Next?

Once you’ve installed a transpiler, you might want to start using “small” features, such as let and arrow functions. Keep in mind that code that is already written as ES5 will be left untouched by the transpiler. As you enhance your scripts with ES6 and enjoy using it, you can gradually sprinkle more and more ES6 features onto your code. Perhaps convert some of the code to the new modules or class syntax. I promise it’ll be good!

There is much more to ES6 than we were able to cover in this article. Uncovered features include Map, Set, tagged template strings, generators, Proxy and Promise. Let me know if you want these features to be covered in a follow-up article. In any case, a book that covers all of ES6 is Exploring ES641 by Dr. Axel Rauschmayer, which I can happily recommend for a deep dive.

Closing Thought

By using a transpiler, all of your code is effectively “locked” to ES5, while browsers keep adding new features. So, even if a browser fully supports a particular ES6 feature, the ES5-compatible version will be used, possibly performing worse42. You can count on the fact that any ES6 feature, and eventually all of them, will be supported at some point (in the browsers and environments you need to support at that time). Until then, we need to manage this and selectively disable ES6 features from getting transpiled to ES5 and prevent unnecessary overhead. With this in mind, decide for yourself whether it is time to start using (parts of) ES6. Some companies think it is43.

Excerpt Image: Ruiwen Chua44

(al, ml)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5'X'%2C%20price%3A%2010%7D%2C%20%7Btitle%3A%20'Y'
  6. 6
  7. 7'X'%2C%0A%20%20%20%20sellers%3A%20%5B'A'%2C%20'B'%5D%2C%0A%20%20%20%20printSellers()%20%7B%0A%20%20%20%20%20%20%20%20this.sellers.forEach(seller%20%3D%3E%20console.log(seller%20%2B%20'%20sells%20'%20%2B%20this.title))%3B%0A%20%20%20%20%7D%0A%7D
  8. 8'John'%2C%0A%20%20%20%20apples%20%3D%205%2C%0A%20%20%20%20pears%20%3D%207%2C%0A%20%20%20%20bananas%20%3D%20function()%20%7B%20return%203%3B%20%7D%0A%0Aconsole.log(%60This%20is%20%24%7Bname%7D.%60)%3B%0A%0Aconsole.log(%60He%20carries%20%24%7Bapples%7D%20apples%2C%20%24%7Bpears%7D%20pears%2C%20and%20%24%7Bbananas()%7D%20bananas.%60)%3B%0A
  9. 9!%60%3B
  10. 10'div')%3B%0Alet%20items%20%3D%20Array.from(itemElements)%3B%0Aitems.forEach(function(element)%20%7B%0A%20%20%20%20console.log(element.nodeType)%0A%7D)%3B%0A
  11. 11'nav%20li')%3B%0Alet%20navTitles%20%3D%20Array.from(navElements%2C%20el%20%3D%3E%20el.textContent)%3B%0Aconsole.log(navTitles.join(''))%3B
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16,js,console
  17. 17
  18. 18
  19. 19
  20. 20*%20y%3B%0A%7D%0A%0Aconsole.log(doSomething(5))%3B%0Aconsole.log(doSomething(5%2C%20undefined))%3B%0Aconsole.log(doSomething(5%2C%203))%3B
  21. 21*%20remaining.length%3B%0A%7D%0A%0AdoSomething(5%2C%200%2C%200%2C%200)%3B
  22. 22'vehicle'%3B%0A%20%20%20%20%7D%0A%20%20%20%20getName()'rocky')%3B%0A%0Aconsole.log(myVehicle.getName())%3B%0A
  23. 23'vehicle'%3B%0A%20%20%20%20%7D%0A%20%20%20%20getName()'car'%0A%20%20%20%20%7D%0A%7D%0A%0Alet%20myCar%20%3D%20new%20Car('bumpy')%3B%0A%0Aconsole.log(myCar.getName())%3B%0Aconsole.log(myCar%20instanceof%20Car)%3B%0Aconsole.log(myCar%20instanceof%20Vehicle)%3B
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44

↑ Back to top Tweet itShare on Facebook

Lars Kappert is a Dutch front-end solution architect & lead developer. He specializes in architecture, solutions, tooling, performance, and development of web sites and applications. Core web technologies include HTML5, JavaScript, Node.js, and CSS. Lars contributes to OSS at GitHub, publishes articles at Medium, and you can follow @webprolific on Twitter.

  1. 1

    Mathias Bynens

    October 28, 2015 10:10 am

    With `const`, you can declare immutable variables. This means you can’t change its value once it is set.

    This is incorrect. The binding is immutable, as in, you cannot reassign to a `const` variable, but you can change its value just fine, e.g.:

    const foo = {}; = 42;

  2. 3

    Kenneth Powers

    October 28, 2015 1:57 pm

    Probably worth pointing out that `const`, like `let`, is block scope. Consider the following:

    const foo = 'foo';
    if (foo) {
    const foo = 'bar';

    One may think this would throw an error; however, it actually logs bar followed by foo.

  3. 5

    It might be worth bringing up the backtick ` requirement in the template literal section. Coffeescript allows this with a Ruby-like syntax using double-quotes, so it could be confusing to some people.

  4. 7

    Really a nice update on JS, but… as usual not supported by internet Explorer (9-11). :(

    • 8

      Actually IE11 does support a little subset of ES6. However, we can transpile ES6 code to ES5 to run the JS in all browsers supporting ES5 (read more about this in the “Transpilation” section of this article).

    • 9

      Mikael Söderström

      November 3, 2015 3:28 pm

      How could they support something that didn’t even exist when they came? Firefox, Chrome, Safari etc from that time doesn’t support ES 6 either.. Of course.

      The browser with best support today is Edge, while Safari is falling behind.

  5. 10

    Greenspun’s tenth rule of programming:

    Any sufficiently complicated C or Fortran program contains an ad hoc, informally-specified, bug-ridden, slow implementation of half of Common Lisp.

    Toss in macros and they’re pretty much done.

  6. 11

    in array part

    [0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 7, 0]

    should be

    [0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 0, 0]

  7. 13

    Daniel Friesen

    October 30, 2015 3:23 pm

    Perhaps a little more advanced and not as often used, but worthy of note. Template literals aren’t just strings with expressions.

    The “template” in template literal isn’t there for show. It refers to


    Which is equivalent to:

    fn([“foo”, “baz”], bar);

    Which allows you to do almost anything you want. The most common example is a template literal that HTML escapes all the expressions passed to it.


  8. 14

    Great article, there will be some focus on this in the upcoming time and a slow transition to this new standard. It is a little overwhelming at the moment but as I start implementing it will be easier to see the change in action.

    Great article, I will have to go over this again (or twice).

  9. 15

    Alex Dudarenko

    October 30, 2015 10:57 pm

    There is an error in Arrows part

    let book = {
    title: ‘X’,
    sellers: [‘A’, ‘B’],
    printSellers() {
    this.sellers.forEach(seller => console.log(seller + ‘ sells ‘ + this.title));

    should be

    let book = {
    title: ‘X’,
    sellers: [‘A’, ‘B’],
    printSellers: () => {
    this.sellers.forEach(seller => console.log(seller + ‘ sells ‘ + this.title));

    • 16

      Alex Dudarenko

      October 30, 2015 11:02 pm

      oh no, sorry, everything is fine, but i found it a bit confusing. Maybe the ES5 example then should be

      var book = {
      title: ‘X’,
      sellers: [‘A’, ‘B’],
      printSellers() {
      var that = this;
      this.sellers.forEach(function(seller) {
      console.log(seller + ‘ sells ‘ + that.title)

  10. 17


    Nice article!

    But, there are several errors in your ES5 Code examples. In ES5 there’s no let.

  11. 18

    `y = y === undefined ? 2 : y;` is completely unnecessary, if I’m not mistaken. Why not just `y = y || 2;`. There’s a reason `||` is called the “default operator”, after all.

    • 19

      Nope. It is not a “default operator”, it is a logical OR operator (which returns the first operand that evaluates to true.
      `y = y || 2` is the same as: `if (!y) { y = 2; }`.
      Not only undefined, but zero (0), empty string, null, NaN and boolean false are all considered false.

      • 20

        Obviously it’s the logical or operator, but one of its (informal) names is the ‘default’ operator because of the behaviour that you just explained. Unless you want to accept falsy values as valid (which is sometimes the case, in the case of zero), then it is perfectly acceptable to use the default operator in this manner.

  12. 21

    Thanks Kenneth, that helped.
    I do like the ES6 features, some more powerful stuff for JS coding.
    I added a number of useful sites here worth checking for JavaScript tutorials.
    Thanks too to Daniel, had not thought enough about that with the use of Template literals.

  13. 22

    Thanks Lars. Good article !

  14. 23

    Great article, learned a ton! In regards to:

    “Classes are a well-debated feature of ES6. Some believe that they go against the prototypal nature of JavaScript.”

    As a `class` skeptic myself I would say it’s the opposite that makes `class` a bad idea. It overly embraces prototypal inheritance, which roughly translates to single inheritance. Critics claim that single inheritance is an important anti-pattern to avoid. Instead we should prefer patterns that compose behavior like factories.

  15. 24

    class crap(comp)
    this.spew = comp
    this.regurgitate = comp
    this.masterbate = comp

    crap = pile_of_rubbish

  16. 25

    Melwin Amith D'Almeida

    January 20, 2016 3:49 am

    Thanks. A great article where everything was covered in such a simple way


↑ Back to top