ES6: Return of Javascript

This is the third and final installment of my blog trilogy on ES6 based on the information presented by Aaron Frost on Pluralsight. If you haven’t seen the talk, check it out! In this episode, we are going to take a glance at promises, generators, and modules!

Promises

Promises are one of the most exciting features being presented in ECMAscript6. If anyone has ever worked heavily in asynchronous code, then you are probably very familiar with Callback Hell, let me show you what it looks like:

importThis(function(){ 
importThat(function(){
doSomethingElse(function(){
waitForEvent(function(){
respondWithSomething(function(){
save(function{
moveOn();
})
})
})
})
})
})
var promise = new Promise(function(resolve, reject) {}
var promise = new Promise(function(resolve, reject){ 
if(success()){
resolve("success");
}else {
reject("Failure");
}
});
promise.then(
function(result){
console.log(result); // "success"
},
function(err){
console.log(err); // Error: "Failure"
}
})
function get(url){ 
return new Promise(function(resolve, reject){
$.get(url, function(data){ //jquery async method
resolve(data);
})
.fail(function(){
reject();
})
})
}
get('users.all').then(
function(users){
app.users = users;
},
function(){
console.log("users not found")
}
})
var usersPromise = get('users.all'); 
var postsPromise = get('posts.everyone');
Promise.all([usersPromise, postsPromise]).then(
function(results){
controller.users = results[0];
controller.posts = results[1]
},
function(){
console.log(users and posts not found)
}
);
get('users.all').then(function(usersString) {
//returns the statement to the next .then in the promise
return JSON.parse(usersString);
})
.then(function(users){
//using the previously parsed information here
app.users = users;
})
  1. Promise.race(iterable); : waits until 1 promise is complete even if others are pending
  2. Promise.reject(reason); : creates a pre-rejected promise
  3. Promise.resolve(value); : Create a pre-resolved promise

Generators

Generates offer an awesome way to control the flow of a program. It offers the yield keyword, that allows a function or process to pause mid-process to see if there are any items waiting in the event loop such as an event handlers that has been called

function *foo(){ 
yield 1;
yield 2;
return 3;
}
var gen = foo();
gen.next(); //returns {value: 1, done:false}
gen.next(); // returns {value: 2, done: false} //there are no more //yield statements, so done now equals true
gen.next(); // returns {value: 3, done: true}
//there are no more values so it returns undefined
gen.next(); // returns {value: undefined, done: true}
function *foo(){ 
yield 1 yield 2 return 3
}
for (var val of foo()){
console.log(val)
} // 1, 2
function *foo(x){ 
var y = 2 * (yield(x+1));
var z = yield (y/3);
return (x + y + z);
}
var gen = foo(5)
console.log(gen.next()); // {value: 6, done: false}
console.log(gen.next(12)); // {value: 8, done: false}
console.log(gen.next(13)); // {value: 42, done: true}
var gen = foo(5) sets the initial x === 5
function *foo(5) { 
var y = 2 * (yield(5+1));
}
var y = 2 * 6 // the first next executes yield(5+1), which returns {value: 6, done: false}
function *foo(5){ 
y = 2*12 //y = 24
var z = (24/3) // y is applied and yield(24/3) returns {value: 8,
//done: false}
}
var x = 5 
var y = 24
var z = 13
return x + y + z //{value:42, done: true }

Modules

ES6 brings in some much needed support for modules. Those who have worked with Node or are familiar with CommonJS will not find anything surprising here. However getting modules working out of the box in javascript is going to be an incredible feature and make the use of front-end frameworks significantly cleaner. If you’ve ever tried using jQuery or some tool made with jQuery within the Angular framework, you probably ran into a huge problem. The $ sign which is jQuery’s main signifying tag is also heavily used in Angular. There are work arounds, but with modules, these workarounds will no longer be necessary. Let’s dive in!

file.js: 
export var test;
export function sqr(x){console.log(x*x)};
export var test3;
main.js:
import{test, test2} from 'file';
sqr(3); // 9
main.js:

import * as lib from 'file';
lib.sqr(3); // 9
function sqr(x){
console.log(x*x)
}
export {sqr as squareLog}
import {sqr as squareLog} from 'file'; 
squareLog(3); // 9

When can I use ES6 ???

You can check out this page here, which tracks which browser and repl has adopted the various features of ES6. Although, realistically you should be using Babel to transpile your ES6 code for any browser

Software Architect

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store