Examples for my talk ES6 for everyone

es6-examples.md

If you're a designer your main interaction with JavaScript is probably through jQuery and jQuery plugins. If that's you, here are a few examples of how ES6 might make your life a litle bit better.

Default Parameters

$.fn.makeJump = function(height) {
    height = height || 50; // jump up 50px
    // ...
}
$(".chickens").makeJump();

$.fn.makeJump = function(height = 50) {
    // ...
}
$(".chickens").makeJump();

Destructured Arrays

var columns = $(".columns"),
    column1 = columns[0],
    column2 = columns[0];

let [column1, column2] = $('.columns');

Destructured Objects & Object Shorthand Syntax

function getCoordinates(vehicle) {
  return {
     x: thing.x,
     y: thing.y
  };
}

function getCoordinates(vehicle) {
  let { x, y } = vehicle;
  return { x, y };
}

Modules

This is probably a bit more controversial, but let me make the pitch:

Anyone out there doing AMD-modules? How about CommonJS modules?

Here's a simple example of the old-school JS "module pattern":

var MY_MODULE = (function() {
  var x, y, z;
  return {
     doCoolStuff: function() { /* ... */ }
  };
}());

This will create the MY_MODULE global variable and encapsulate everything inside a closure to avoid leaking global variables. This is a good thing, but with ES6 your life becomes a lot easier and you can get away with something much simpler.

The first thing you can do is get rid of your closure. ES6 modules automatically create a special "module scope" for you, so you don't need to worry about accidentally creating global variables. This is great!

var x, y, z;
window.MY_MODULE = { // assign directly wo window, because we can't make it global by accident
   doCoolStuff: function() { /* ... */ } 
};

The 2nd part is even more exciting, which is that we don't even need to make it global AT ALL. That's right we can let the module only worry about itself. Instead of tacking itself onto the window object we can export it.

var x, y, z;
var MY_MODULE = {
   doCoolStuff: function() { /* ... */ } 
}
export default MY_MODULE;

Now if any other module in your eco-system, instead of hoping it will already live on the global scope, it can enable it by using the import keyword

import MY_MODULE from 'my_module';
MY_MODULE.doCoolStuff();

Finally JavaScript solved encapsulation. Now you're thinking this is for designers? Why do you care. Well who has run into the problem where there are 2 different jQuery's running on the same page? That's the kind of problem that ES6 modules take care of really nicely!

I hope you've enjoyed this little overview. Let me know if you have any questions.