ES2015

Wednesday. August 09, 2017 - Lo lees en 5 mins

ECMAScript v6 se ha convertido desde junio de 2015 en el estándar que sigue JavaScript. A continuación veremos algunas diferencias de este nuevo estándar (ES6) con ES5.

Global scope y Block scope
Arrow Functions
Template string
Parámetros por defecto en una función
Spread operator
Clases

Global scope y Block scope

ES5

//var existe dentro de un entorno global dentro del for
var texto = "Yonis";
for(var i = 0; i<=10;i++){
	setTimeout(
		function(){
			console.log(i);
		},100
		)
	}

ES6

let text = "Yonis";
const = "Esquivel"; // Constante

{
	let texto = "Yonis";
	{
		let texto = "Esquivel";
		console.log(texto);
	}	
	console.log(texto);
}

//let existe dentro de cada una de las iteraciones del for
for(let i = 0; i<=10;i++){
	setTimeout(
		function(){
			console.log(i);
		},
		100
		)
	}

Arrow Functions

ES5

var cursos = [
'angular', 'js', 'java'
];
cursos.map( function(name){
	console.log(name);
})

var doble = function(){
	var _this = this;
	this.number *= 2;
	return function(){
		console.log(_this.number);
	}
}
doble.call({number:3})();

ES6

const cursos = [
'angular', 'js', 'java'
];
cursos.map( name => console.log(name));

const doble_ = function(){
	this.number *= 2;
	return () => {
		console.log(this.number);
	}
}
doble_.call({number:3})();

Template string

ES5

var name = "Yonis";

var texto = "Este texto es" +
" muy largo y no cabe en mi editor"+
" att: "+ name
console.log(texto);

ES6

const name = "Yonis"
let texto_ = `Este texto
es muy largo y si se 
acomoda en mi editor
att: ${name}`;
console.log(text_);

const names = [
	"Yonis", "Juan", "Pedro"
]
let texto__ = `Los nombres son:
<ul>
${
	names.map( name => `<li>${name}</li>`).join('')
}
}
</ul>
`;
console.log(texto__);

Parámetros por defecto en una función

ES5

function intersecion( x, y, z){
	x = x || 0;
	y = y || 0;
	z = z || 0;
	console.log(x,y,z)
}
intersecion();

ES6

function intersecion( x=0, y=0, z=0){
	console.log(x,y,z)
}
intersecion();

Spread operator

ES5

const numbers = [1,2,3];
console.log(numbers);
function suma(x,y,z){
	return x,y,z;
}
suma(numbers[0],numbers[1],numbers[2]);

ES6

const numbers_ = [1,2,3];
console.log(...numbers_);
function suma(x,y,z){
	return x,y,z;
}
suma(...numbers_);

Clases

ES6

class Course{
	constructor(name){
		this.name =name
	}

	getName(){
		console.log(this.name);
	}
}

let Angular = new Course('Angular 2');
Angular.getName();

Yonis Esquivel

Apasionado por la programación y el desarrollo web