This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements.

In this blog we focus on the iteration protocol introduced in ES6.

Iteration

Lets take a quick programming 101 background. An iterator is basically a sequence generator. A sequence is an ordered list of values whose order and uniqueness does not matter. A trivial example of a sequence is the Array.

So an iterator is just an abstraction of, for example, a for loop. It has certain functions such as prev, next, valid, key, and value to go through the sequence, iterating through the elements.

We do the iteration to save memory by only generating values that are needed when they are needed. This is done by dynamically performing instructions based on the iteration.

Think about a for loop that ends when i > 5 and breaks; rather than going through the...

This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements.

In this blog we focus on the Reflect API introduced in ES6.

Reflect Object

What is the Reflect API? It starts with the Reflect Object which is a single ordinary object that is bound to the global scope. As with other special objects, the Reflect Object is not a function object and does not have a construct or call internal methods nor can you new it. The Reflect Object merely allows us to use the Reflect API which is the ES6 way of updating an object’s prototype avoiding the legacy __proto__.

Reflect API

The API contains multiple methods which can be best described by the doc. It is pointless for me to reiterate the methods, a more interesting take is the usage of the Reflect API.

Use Case

If you went to the link above, you would notice that the R...

This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements.

In this blog we focus on the lambda expressions, also called arrow functions, introduced in ES6.

Lambda Expression

Lambda expressions are also known as anonymous functions, function literals, or lambda abstractions. In a high level sense, lambda expressions are often passed as arguments to higher-order functions. Higher-order functions are functions that take one or more functions as an input, or functions that output another function. This allows the nesting of anonymous functions to be intuitive for the developer by “[allowing] access to variables in the scope of the containing function (non-local variables)”. JavaScript accomplishes this using closures.

ES6 Syntax

Developers who have used CoffeeScript would not be frazzled by this “new” ES6...

Working as a Front-End JavaScript developer there would naturally come a time when you would need to work on a mobile solution. There are couple of ways to handle it, from writing a pure website for your users to access your content to coding a native implementation and putting it up on the play/app store. And many more in between.

Appcelerator Titanium and Alloy MVC

One of the solutions that are in between is Appcelerator’s Titanium and Alloy MVC Frameworks. This solution allows those familiar with webdev technologies such as HTML, CSS, and JavaScript to produce native apps without really needing to learn Objective-C, Cocoa, Java, and the Android SDK. Other solutions that produce the same or close to the same functionality as Appcelerator is Facebook’s React Native and PhoneGap (also known as Apache Cordova). And Many More.

This post isn’t really about whether building the app...

This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements.

In this blog we focus on the new data structures introduced in ES6, specifically keyed collections.

Keyed Collections

Keyed collections are object data structures that represent collections of data which use keys. Keyed collections contain elements which can be iterated in the order of insertion. ES6 includes these new data structures to handle your complex javascript applications without having to develop the building blocks yourself to save time, standardize, as well as provide a more optimized garbage collection strategy.

Set

• iterate elements in order
• unique elements
• accepts NaN or undefined
• key and value are the same

var mySet = new Set();
mySet.add("cat");
mySet.add(24);
mySet.add("bunny");
for (let item of mySet) console.log(item); 
//

This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements.

In this blog we focus on the Module features introduced in ES6 which are comprised of Imports and Exports.

Syntax

It’s quite simple with only import and export keywords.

Modules

While modules are not a new thing for many javascript developers with the rise of Asynchronous Module Definition (AMD) and CommonJS (CJS), ES6 offers devs a standard way of importing and exporting modules to have more modular code. Modules allows for runtime behaviour defined by a host-defined default loader. Modules are also async in nature in that no code runs before the request modules are available and processed.

Export

We will base off the examples off this base code for exports:

function foo() {
    return "I am foo";
}
 
function bar(a, b) {
    return a + b;
}

This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements. However this post will not be as focused on ES6 as my other posts on ES6 as we aim to also cover Callbacks and Promises.

JavaScript has a single threaded runtime, at least for now. So it makes use of a single thread to fulfill all of the application’s work. This is why its asynchronous property allows you to start something that completes later on. This is useful for handling work that would require a lot of processing time such as calls to a webservice, waiting for a CSS transition, or a timeout timer.

Callback

Callbacks are a way to handle the load of having to deal with a long running process. Here we execute another function after we get the result from calling an AJAX call. The Callback Hell happens when we keep nesting callbacks upon callbacks...

This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements.

In this blog we focus on the class-based object oriented programming introduced in ES6.

Prototype-based

Traditionally JavaScript is a prototype-based programming language which “classes are not present, and behavior reuse (known as inheritance in class-based languages) is accomplished through a process of decorating existing objects which serve as prototypes” - Mozilla MDN.

This basically means that we are able to mimic object oriented programming by creating an object with prototype methods which other objects will then use as a base or inherit.

var Animal = function(sound) {
    this.sound = sound;
};

Animal.prototype.speak = function() {
    console.log(this.sound);
};

var cat = new Animal("Meow");
var aznCat = new Animal("Miao");

This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements.

In this blog we focus on the object literal property initialization enhancements introduced in ES6.

Shorthand Creation

This syntactic sugar allows developers to quickly create objects by merely passing the reference and it’ll create the property based on that. Of course you can’t use reserved words as your property name.

ES5 Version:

function foo(a, b) {
    return {res: "success", a: a, b: b};
}

var a = "foo", b = 42, c = {};
var o = { a: a, b: b, c: c };

ES6 Version:

function foo(a, b) {
    return {res: "success", a, b};
}

var a = "foo", b = 42, c = {};
var o = { a, b, c };

Computed Property Names

ES6 allows you to dynamically create property names using an expression in brackets [ ] similar to property accessors.

ES6 Version:

var param

This is the first of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements.

In this blog we focus on block level scoping introduced in ES6.

Block scoped variables are done using:

• let for writable
• const for read-only

const PI = Math.PI

function foo(a, b) {
    if (a>b) {
        let tmp = b;
        a = PI;
    }
    console.log(tmp===b);    // ReferenceError: tmp is not defined
    return {a, b};
}

The behaviour where tmp throws a ReferenceError in ES6 is tricky because JavaScript previously accepts this flow in ES5. Before ES6, JavaScript only has function level scoping so if we turn let into var then you would still have it declared as undefined and not throw a ReferenceError.

This is because when variables are function level scoped, the compiler moves all variable declarations to the top, this is called...