Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • Las arrow functions son una nueva forma de expresar funciones, además de las declaradas y las expresiones funcionales (al igual que estas, no se alzan).
  • Al principio cuesta visualmente acustumbrarse ya que se usan sobre todo en una única sentencia, es decir, todo el cuerpo de la función es una única línea.
  • Escribamos una de cada.
// Función declarada
function sayHi1(name) {
    console.log(`Hi ${name}!`)
}

// Expresión funcional
const sayHi2 = function(name) {
    console.log(`name ${name}!`)
}

// Función flecha
const sayHi3 = (name) => console.log(`name ${name}!`)
  • Como ves a la izquierda del arrow operator encontramos la recepción de argumentos y a la derecha la expresión que se evaluará y producirá un resultado.
  • Las funciones flecha (arrow functions) JavaScript pueden o no aceptar argumentos, en cuyo caso hay que escribir unos paréntesis vacíos, o aceptar N número de argumentos, como sus hermanas mayores.
  • Si sólo hay un argumento, se pueden prescindir de los paréntesis.
  • Las funciones flecha JavaScript tiene return implícito, es decir, no hace falta especificarlo.
// Return implícito
const double = num => num * 2;
console.log(double(3))
  • Si queremos realizar más operaciones en arrow function debemos usar las llaves {} para delimitar el cuerpo y especificar el valor a retornar.
// Return explícito
const quadruple = (num) => {
    let value = double(num) // teaser let variables
    return value * 2
}

const num = quadruple(2)
console.log(num)
  • Por último pero no menos importante (de echo creo es lo más importante), las arrow functions JavaScript no tienen this sino que acceden al valor léxico exterior. Esto hace que sean excepcionalmente útiles como métodos en objetos. Pongamos un ejemplo.
const cat = {
    name: "Guizmo",
    tags: ["fucking", "amazing", "black", "cat", "😼"],
    showTags() {
        this.tags.forEach(tag => console.log(tag))
//      this.tags.forEach(function(tag){
//          console.log(this === cat)
//      });
    }
};

cat.showTags();
  • Espero que te hayas dado cuenta de esto: si las arrow functions JavaScript no tiene this, eso quiere decir que no pueden usarse como constructuras en clases y objetos. Tenlo en cuenta.
  • Si esto de this es algo borroso para ti, no te precupes, te dejo el enlace un par de piezas escritas por mi sobre el tema. Dale un vistazo. Pueden ocurrir dos cosas, que te aclaras con lo que significa this o que te duermas :).

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue