**Explicacion sobre Funciones Flecha – _Arrow Functions_**

Este es mi aporte para intentar sacar el mejor provecho de la arrow function.

Este tipo de funciones tiene una sintaxis variada que depende de lo que se quiere realizar
Aunque normalmente mantiene la misma estructura
• Función con argumentos
• Seguido de una flecha gorda =>
• Seguido del cuerpo de la funciones
Algunas características.
• Menos código que es más simple de interpretar
• No hay un nuevo this dentro de las funciones
• No hay constructores, no tienen new.
• No puedes cambiar el valor del this aunque uses call() apply() o bind()
• No hay objeto arguments
Técnicamente
Son funciones definidas con una nueva sintaxis que usa una flecha “=>” pero se comporta de una forma muy diferente a las funciones normales en

ECMAScript 5
Tienen 6 características principales

1. No hay creación de “this, super, arguments y new.target”
2. No puede ser llamado con new, no tienen un metodo constuctor
3. No hay un prototipo (prototype)
4. No pueden cambiar el valor de this
5. No hay objeto “arguments” Se utilizan los parámetros rest
6. No pueden tener nombres duplicados de parámetros

Ejemplos
//ES5 var miFuncion = function(valor){ return valor; }
//ES6
let miFunction = valor => valor;

funciones con dos parametros
//ES5 var sumar2 = function(num1, num2){ return num1+num2; }
//ES6 let sumar1= (num1, num2) => num1 + num2;

Funciones sin parametros
//ES5 var saludar2(){ return "Hola mundo"; }
//ES6 let saludar1 = () => "Hola mundo";
Funcion con varios pasos
//ES5 var saludarPersona = function(nombre){ var salida = "Hola, " + nombre; return salida; }
//ES6 let saludarPersona2 = nombre => { let salida =Hola ${nombre}; return salida; } console.log( saludarPersona("Fernando") ); console.log( saludarPersona("Melina") );

Devolver un objeto
//ES5 var obtenerLibro = function(id){ return { id:id; nombre: "Harry Potter" } }

//ES6 (Si luego de la función flecha ponemos llaves va a interpretar que las llaves pertenecen al cuerpo de una función.)
let obtenerLibro2 = id => ({ id:id, nombre: "Harry Potter"});
// Para devolver el objeto los encerramos entre paréntesis

Hasta acá la demostración es hacer exactamente lo mismo pero con una notación nueva, pero las funciones flecha de ES6 no es solo un cambio de sintaxis sino que supone algunas ventajas que hasta el momento no hemos visto…
Funciones Anónimas
Son funciones que son usadas inmediatamente cuando son creadas, no tienen nombre por eso son anónimas y no pueden reutilizarse en otros procesos.

//ES5
var saludo1 = function(nombre){ return "Hola " + nombre; }("Fernando"); console.log( saludo1 );

//ES6: Para que una función flecha se ejecute inmediatamente se escriben entre paréntesis desde el principio.
var saludo2 = ( nombre =>Hola ${nombre})("Adrian"); console.log( saludo2 ); // Anotación lo de los paréntesis para toda la función también funciona en ES5 solo que en ese caso no son obligatorios
//ES5
var saludo1 = (function(nombre){ return "Hola " + nombre; })("Fernando");

No hay cambios en el objeto this
`var manejador = {
id: “123”,
init: function(){
document.addEventListener(“click”, function(event){
this.clickEnPagina( event.type );
//console.log(this);
}, false);
}// Fin del init

clickEnPagina: function(type){
	console.log("Manejando " + type + " para el id: " + this.id );
}

};

menejador.init();`

Voy a reescribir lo mismo pero con la solucion en ES5 (Solución meto toda la función entre paréntesis y le ejecuto un bind(this) y con esto cambio el a quien apunta this)
`var manejador = {
id: “123”,
init: function(){
document.addEventListener(“click”, (function(event){
this.clickEnPagina( event.type );
}).bind(this), false);
},// Fin del init

clickEnPagina: function(type){
	console.log("Manejando " + type + " para el id: " + this.id );
}

};
menejador.init();//ES6
var manejador = {
id: “123”,
init: function(){
document.addEventListener(“click”, event => this.clickEnPagina( event.type ));
}, // Fin del init

clickEnPagina: function(type){
	console.log("Manejando " + type + " para el id: " + this.id );
}

};`

Funciones flecha y Arreglos
//ES5 var arreglo = [5,10,11,2,1,9,20]; var ordenadoES5 = arreglo.sort(function(a,b){ return a-b; });
//ES6 let ordenadoES6 = arreglo.sort((a,b) = a-b); console.log(ordenado)
Identificación de funciones flecha
`var restar = (a,b) => a - b;
console.log( typeof restar);
console.log( restar instanceof Function);

//var restar2 = new restar(1,2);
var restar2 = restar(1,2);
((a,b) => {
console.log( arguments[0] )
})();
// tira un error Arguments no esta definido
function ejemplo(x,y){
((a,b) => {
console.log( arguments[0] )
})();
}
ejemplo(10, 20);
// En este caso arguments se va a buscar en el objeto padre más cercano`

Saludos
Adrian Gonzalez.