jomendez

One of the most important things for a Client Side Developer is to keep current on the technologies, because it is always evolving, not only the differents client-side frameworks, but also the JavaScript (EcmaScript) Language itself. The current version adopted by the majority of the browsers up to the moment is EcmaScript 5.

Although the ES6 is not supported a 100% by all the browsers (at least when this article was written) It is important to learn what is coming. Here is a table of compatibility http://kangax.github.io/compat-table/es6/

I was reading about EcmaScript 6 and its new features, and I decided to do some comparison of how we do things today with ES5 and how we can achieve the same things with ES6. I personally believe that the best way to learn new code is writing it, and the comparison may help you to understand ES6 better. It works for me 😉

I put together some code of how we could implement some code in ES5 and how it will be in ES6, I will try to keep it simple, also, this not necessarily mean that the proposed code in ES5 is the only equivalent, in JavaScript there is several ways to achieve the same.

Four awesome features in Ecmascript 6:

• Spread Operators
• Template strings
• Arrow function
• Block scope

 

 

 

Spread Operators:

(from: http://www.2ality.com/2014/07/method-calls.html)
The spread operator (...) mostly replaces apply()
Making a direct method call via apply() only because you want to turn an array into arguments is clumsy, which is why ECMAScript 6 has the spread operator (...) for this. It provides this functionality even in despatched method calls.

e.g:

function add(a, b) {
	return a + b;
}

var nums = [5, 4];

console.log(add(...nums));//ES6
console.log(add.apply(this, nums));//ES5

let arr = [-1, 7, 2];
console.log(Math.max(...arr)); //ES6
console.log(Math.max.apply(this, arr)); //ES5

//Other examples of ES6
    console.log(new Date(...[2011, 12, 24])); //ES6

// Non-destructively concatenate single elements
    console.log( [...arr, 9, -6]); // [-1, 7, 2, 9, -6]//ES6

 

Template strings

Template strings let you interpolate arbitrary expressions into a string:
(learn more at: http://www.2ality.com/2011/09/quasi-literals.html)

e.g:

//ES6
let greetings = {text: 'Hello World'};
let tpl = `Greetings: ${greetings.text}.`;

console.log(tpl);

//ES5
var greetings1 = {text: 'Hello World'};
var tpl1 = "Greetings: {0}.".replace("{0}", greetings.text);

console.log(tpl1);

//-------------------------------------------------------------

//ES6
let text = `This is a text
    with
    multiple lines.`;
console.log(text);

//ES5
let text1 = "This is a text " +
    "with " +
    "multiple lines.";
console.log(text1);

 

Arrow functions

In EcmaScript 5 a function can be used as a subroutine or like a method

e.g:

var myObj = {
        myMethod: function () { //function used as method
           return function () { ... }; //function used as subroutine
        }
    }

The Arrow functions are intended to be used as subroutines in EcmaScript 6

e.g:

var myObj = {
        myMethod: function () { //function used as method
           return  () => { ... }; //function used as subroutine
        }
    }

These are other examples

let square = x => x * x;
var square_ES5 = function(x) { return x * x}

let add = (a, b) => a + b;
var add_ES5 = function(a, b){ return a + b;}

let pi = () => 3.1415;
var pi_ES5 = function(){ return 3.1415; }

console.log(square(5) + " ES6");
console.log(square_ES5(5) + " ES5");

console.log(add(3, 4) + " ES6");
console.log(add_ES5(3, 4) + " ES5");

console.log(pi() + " ES6");
console.log(pi_ES5() + " ES5");

Learn more about EcmaScript 6 Arrow functions here http://www.2ality.com/2012/04/arrow-functions.html

 

Block scope

EcmaScript 5 comes with a function-level scope for variables and functions, with EcmaScript 6 you can use “let” to block scope a variable, to learn more visit: http://ariya.ofilabs.com/2013/05/es6-and-block-scope.html

e.g

//ES5
function blockScope_ES5() {
 try {
 var y = 10; //block scope

 } catch (e) {
 //...
 }
 console.log(y);
}

blockScope_ES5();

//ES6
function blockScope() {

 try {
 let y = 10; //block scoped
 } catch (e) {
 //...
 }
 console.log(y);
}
blockScope();

//-----------------------------------------------

//ES5
function order_ES5(x, y) {
 if (x & gt; y) {
 var tmp = x; //block scope
 x = y;
 y = tmp;
 }
 console.log(tmp === x); // ReferenceError: tmp is not defined
 return [x, y];
}
order_ES5(9, 5);

//ES6
function order(x, y) {
 if (x & gt; y) {
 let tmp = x; //block scoped
 x = y;
 y = tmp;
 }
 console.log(tmp === x); // ReferenceError: tmp is not defined
 return [x, y];
}
order(9, 5);

You can try all this examples in http://www.es6fiddle.com/