Arrow Functions y Enlace Léxico en JavaScript

Clase 23 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿Qué son las Arrow Functions y cómo se diferencian de las funciones tradicionales?

Las Arrow Functions han revolucionado la manera en la que escribimos código JavaScript. Al reemplazar las funciones tradicionales, simplifican el código y evitan problemas de contexto. Pero, ¿por qué son tan importantes y en qué se diferencian exactamente de las funciones tradicionales? Exploramos este concepto esencial del desarrollo moderno.

¿Por qué usar Arrow Functions si ya tenemos funciones tradicionales?

Las funciones tradicionales en JavaScript, aunque efectivas, suelen ser extensas y difíciles de manejar, especialmente en el contexto del manejo del this. Aquí es donde las Arrow Functions entran en juego. Los principales beneficios son:

Concisión: Al eliminar la palabra "function" y usar una flecha =>, el código se vuelve más compacto.
Vinculación léxica del this: Las Arrow Functions no tienen su propio contexto de this, lo cual es un alivio en situaciones donde se necesita mantener un contexto fijo.

¿Cómo transformar funciones tradicionales en Arrow Functions?

Transformemos una función tradicional a una Arrow Function para ilustrar esta evolución.

// Función tradicional
const saludo = function(nombre) {
  return `Hola ${nombre}`;
};

// Arrow Function
const saludoNuevo = (nombre) => `Hola ${nombre}`;

Podemos observar que hemos simplificado la declaración, quitando la palabra function y usando una flecha.

¿Cuándo usar un retorno implícito?

La simplicidad de las Arrow Functions nos permite usar retornos implícitos, lo que significa que no necesitamos escribir explícitamente return ni las llaves {} cuando todo el cuerpo de la función es una expresión.

// Retorno implícito
const saludoImplicit = nombre => `Hola ${nombre}`;

Esta ventaja es más evidente con funciones que realizan operaciones simples.

¿Cómo manejar múltiples parámetros?

Cuando trabajamos con múltiples parámetros, el uso impropio de paréntesis puede provocar errores. En las Arrow Functions, los paréntesis son necesarios solo cuando hay múltiples parámetros.

const saludoCompleto = (nombre, apellido) => `Hola, soy ${nombre} ${apellido}`;

Al mantener los paréntesis, gestionamos los parámetros sin problemas.

Vinculación Léxica: Un desafío resuelto

Las Arrow Functions facilitan lo que se conoce como enlace léxico o lexical binding, especialmente en el manejo de objetos y contextos de this. Vamos a ver un ejemplo práctico:

const personajeFicticio = {
  nombre: "tío Ben",
  mensajeConFuncionTradicional: function(mensaje) {
    console.log(`${this.nombre} dice: ${mensaje}`);
  },
  mensajeConArrowFunction: (mensaje) => {
    console.log(`${this.nombre} dice: ${mensaje}`);
  }
};

personajeFicticio.mensajeConFuncionTradicional("Un gran poder conlleva una gran responsabilidad");
personajeFicticio.mensajeConArrowFunction("Cuidado con el Dr. Octopus");

En este ejemplo, la función tradicional accede correctamente al this.nombre, mientras que la Arrow Function no lo hace, ya que las Arrow Functions no vinculan su propio this.

Recomendaciones para mejorar tu código con Arrow Functions

Opta por Arrow Functions para expresiones cortas y sencillas.
Utiliza funciones tradicionales cuando requieras this en contextos de objeto.
Prueba tus cambios: Usa herramientas de corrección de código para evitar errores tipográficos, especialmente si programas en otros idiomas.

Las Arrow Functions no solo simplifican el código, sino que también resuelven problemas comunes asociados al this, permitiéndote concentrarte más en la lógica y menos en el manejo del contexto. Continúa explorando y experimentando para descubrir cómo pueden transformar tu estilo de programación.

Augusto Eduardo Bonalumi

student•

Las Arrow Function son útiles porque permiten:

Escribir métodos más concisos
Simplificar una línea de código para que sea más legible
Aprovechar las características de retorno implícito y el no uso de paréntesis
Olvidarse de manejar el contexto this
Definir de manera compacta una función convencional
Eliminar las llaves y la palabra return si la función tiene solamente una sentencia que devuelve un valor
Reducir el código aún más utilizando parámetros

Ecsar García Sandoval

student•

buen aporte aunque al principio me costó trabajo entenderlas.

Kyb3r Cipher

student•

Buen aporte!

Matias Ezequiel Rivero

student•

Cuando se usa una función flecha como método de un objeto, el this dentro de la función flecha no apunta al objeto que invocó el método. En cambio, el valor de this se hereda del contexto de ejecución en el que se definió la función flecha. Esto significa que this se refiere al this del entorno circundante (en el que se creó la función), y no puede ser cambiado con métodos como call, apply o bind.

O sea en este ejemplo this de la arrow function apunta al objeto global window.

Corregirme si estoy mal por el bien de los demás compañeros. Muchas gracias

Maximiliano Ávila

student•

Exacto, la arrow function no posee su propio contexto "this". En su lugar, capturan el "this" del contexto de donde fueron definidas, en otras palabras, si "this" no está definido en ese contexto, será "undefined".

Para lograr que la arrow function use el "this" del objeto "finctionalCharacter" debe acceder directamente a finctionalCharacter:

messageWithArrowFunction: message => { console.log(`${```finctionalCharacter.name```} says: ${message}`); }

Joaquin Pinto

student•

gracias por el ejemplo y la aclaración

Nicolás Duque

student•

¿por qué suecede eso? ¿por qué las arrow function no logra captar lo que sí logra la función tradicional?

Sandra Rosa Arroyo Paredes

student•

Las arrow function permiten heredar el contexto this.
Las funciones tradicionales inician un nuevo contexto this, en base a su objeto contenedor*.

Cual es el objetivo de esta diferencia? Pues que con las arrow function no re-inicias el contexto, sino lo mantienes.

DEISY MILENA MARTÍNEZ RUGELES

student•

Hola, He estado revisando la información que mencionaste pero no logro encontrar el recurso específico, ¿Podrías ayudarme a ubicarlo o confirmas si ha sido removido?

Saludos !

Diego Peraza

student•

Como sé cual es el tipo de arrow function (explicit o implicit) que más le conviene a mis líneas de código ? O simplemente se resume a que debo usar aquella con la que me sienta más cómodo y apegarme a ella durante todo mi programa ?

Christopher Andrés Guano Valencia

student•

Todas las arrow function son implícitas, por eso se las asigna a una variable para poderla ejecutar. Y depende de la situación, cuál es mejor utilizar.

¡Nunca pares de aprender! 🚀🚀

Francisco Zuñiga

student•

Para reparar el arrow function:

const fictionalCharacter = {
    name: 'Uncle Ben',
    messageWithTraditionalFunction: function (message) {
        console.log(`${this.name} says: ${message}`)
    },
    messageWithArrowFunction: (message) => {
        console.log(`${fictionalCharacter.name} says: ${message}`) // Usar directamente fictionalCharacter
    }
}

fictionalCharacter.messageWithTraditionalFunction('With great power comes great responsability.');
fictionalCharacter.messageWithArrowFunction('Beware of Doctor Octopus.');

Calvin Rafael Bobadilla Fernandez

student•

APUNTES:

Gabriel Muñoz Castro

student•

Implementando Arrow Function en mi proyecto para el curso:

/**
 * Validamos que el ID de la tarea cumpla con un criterio específico para poder trabajar con las tareas.
 * @param {number} taskId 
 * @returns {boolean} si no se cumple la validación nos retorna un true, en caso contrario false.
 */
const validateTaskId = (taskId) => {
  const restultValidation = taskId < 1 || taskId > arrOfTasks.length ? true : false;

  return restultValidation;
}

Jonathan Garcia

student•

Ya pude entender 💆👏

Daniel Felipe Páez Casallas

student••

En JavaScript, la tilde invertida (`) se usa para los "template literals", que permiten incrustar expresiones y usar saltos de línea. La comilla simple (') es para cadenas de texto simples.

Jacques Hauzeur

student•

En las arrow functions, this no se refiere al objeto que invoca la función, sino que toma el valor del contexto léxico en el que se define. Esto significa que si usas this dentro de una arrow function, estará vinculado al contexto donde fue creada, no al contexto de llamada.

Para que no salga undefined, asegúrate de definir la arrow function dentro de un objeto o función donde this tenga un valor válido. Así, puedes acceder a las propiedades del objeto correctamente.

Johan Sebastian

student•

const greeting = function (name) {
    return `Hi, ${name}`
}

// Arrow function - explicit return
const newGreeting = (name) => {
    return `Hi, ${name}`
}

// Arrow function - implicit return
const newGreetingImplicit = name => `Hi, ${name}`
const newGreetingImplicitWithTwoParameters = (name, lastName) => `Hi, I'am ${name} ${lastName}`

// Lexical Binding 
const functionalCharacter = {
    name: 'Uncle peter',
    messageWithTraditionalFunction: function (message) {
        console.log(`${this.name} says: ${message}`)
    },
    messageWithArrowFunction: (message) => {
        console.log(`${functionalCharacter.name} says: ${message}`)
    }
}

/* En este exempla, la function traditional accede correctamente al this.name, mientras que la Arrow Function no lo hace, ya que las Arrow Functions no vinculan su propio this.*/
functionalCharacter.messageWithArrowFunction('With great power comes great responsibility')
functionalCharacter.messageWithTraditionalFunction('Beware of Doctor Octopus')

Andrés Soret Chacin

student•

Funciones tradicionales y Arrow Functions

En esta clase se habló sobre las funciones tradicionales y el lexical binding.
Se explicó cómo crear funciones tradicionales con un nombre, parámetros, cuerpo y llamado de función.
Se introdujeron las arrow functions como una alternativa más concisa y sin vinculación de contexto (this).

Características de las funciones tradicionales

Tienen la palabra clave function, un nombre, parámetros y un cuerpo.
Permiten manipular el contexto de ejecución utilizando this.

Arrow Functions

Las arrow functions eliminan la necesidad de la palabra clave function.
Usan la sintaxis const nombreFunción = (parámetros) => { cuerpo }.
Simplifican la creación de funciones y no vinculan el contexto de this.

Ejemplos de creación de funciones

**Función tradicional:**const saludo = function(name) { return Hola, ${name}; }
**Arrow function con retorno explícito:**const saludo = (name) => { return Hola, ${name}; }
**Arrow function con retorno implícito:**const saludo = name => Hola, ${name};
**Arrow function con múltiples parámetros:**const saludo = (name, lastName) => Hola, yo soy ${name} ${lastName};

Lexical Binding y contexto de ejecución

**Función tradicional:**const fictionalCharacter = { name: 'Uncle Ben', messageWithTraditionalFunction: function(message) { console.log(${this.name} dice: ${message}); } } fictionalCharacter.messageWithTraditionalFunction('With great power comes great responsibility');
**Arrow function:**const fictionalCharacter = { name: 'Uncle Ben', messageWithArrowFunction: (message) => { console.log(${this.name} dice: ${message}); } } fictionalCharacter.messageWithArrowFunction('Beware of Doctor Octopus');

En el ejemplo anterior, la arrow function no tiene su propio this, por lo que this.name no se vincula correctamente al objeto fictionalCharacter.

Resumen

Las arrow functions son útiles para escribir funciones más concisas y sin vinculación de contexto.
Las funciones tradicionales permiten manipular el contexto de ejecución utilizando this.
El lexical binding es una característica clave de las arrow functions, que no vinculan this al contexto del objeto.

Próximos pasos

Practicar la creación de funciones tradicionales y arrow functions.
Experimentar con el lexical binding y entender cómo afecta el comportamiento de this.
Usar extensiones y herramientas para evitar errores tipográficos en el código.

Cuéntame, ¿cuál es tu forma favorita de escribir funciones? ¿Prefieres las funciones tradicionales o las arrow functions?

Josué Rubén Robles Gonzalez

student•

Si definimos una variable name fuera del objeto que contiene la definición de la arrow function, la arrow function capturará el valor de name gracias al enlace léxico.

Aquí tienes un ejemplo:

const name = "Tío Ben";

const fictionalCharacter = {
    messageWithArrowFunction: () => {
        console.log(`${name} dice: Cuidado con el Dr. Octopus.`);
    }
};

fictionalCharacter.messageWithArrowFunction(); // Salida: Tío Ben dice: Cuidado con el Dr. Octopus.

En este caso, name es accesible y se imprimirá correctamente en la consola.

Daiana Illa

student•

El código presenta un objeto fictionalCharacter con dos métodos: messageWithTraditionalFunction y messageWithArrowFunction.

Contexto this:
- En messageWithTraditionalFunction, this se refiere al objeto fictionalCharacter, por lo que this.name retorna "Uncle Ben", y al ejecutar el método se imprime: "Uncle Ben says: With great power comes great responsibility.".
- En messageWithArrowFunction, this no se refiere al objeto. Dado que las funciones flecha no tienen su propio contexto this, buscan el contexto de ejecución léxica, que es el contexto donde fueron definidas. Aquí, this.name es undefined, y se imprime: "undefined says: Beware of Doctor Octopus.".

Esto ilustra cómo las funciones tradicionales y las flecha manejan el contexto this de manera diferente.

Jesús Patricio Pereira Matus

student•

en mi opinion y preguntandole a chatGPT xd, las arrow function solo deben ocuparse en contextos que solo necesites un simple resultado y reducir eso a solo 1 linea de codigo, porque en la tradicional tienes que definir function y iniciar bloque que minimo te toma 3 lineas en cambio todo esto lo reducimos a 1 linea si es algo simple con arrow function

Maximo Bravo

student•

Gracias por el aporte!!!

Nicolás Acuña Niampira

student•

Las arrow functions no crean su propio contexto de this, lo que significa que heredan el contexto del ámbito donde fueron definidas. Esto resuelve problemas comunes donde se pierde la referencia a this en funciones tradicionales, especialmente en callbacks. Por ejemplo, al usar funciones tradicionales como métodos de un objeto, this puede no referirse al objeto esperado en ciertas situaciones (como en eventos). Las arrow functions garantizan que this siempre se refiera al contexto en el que fueron creadas, facilitando el manejo de la lógica y evitando errores.

Robinson Daniel Mendoza Campo

student•

Arrow functions are a concise way to write functions in JavaScript. They eliminate the need for the function keyword and use an arrow (=>) to define the function body. Arrow functions have a lexical binding of this, meaning they inherit the context of the enclosing scope, which reduces confusion about the value of this during execution. This is particularly useful in situations like callbacks where traditional functions may create their own context. Arrow functions can also have an implicit return for single-expression bodies, making them shorter and cleaner.

Jennifer Yanez Jiménez

student•

Ok me costó trabajo entender el lexical binding, pero lo terminé entendiendo con un poco de ayuda de ChatGPT. Aquí mis apuntes:

Cuando defines un método de objeto con arrow function, el contexto donde se define no es el objeto, sino el contexto global o de la función externa.

Entonces this no apunta al objeto, sino a ese contexto externo.

Las arrow functions son perfectas para:

Funciones pequeñas o cortas
Callbacks como en .map(), .filter(), .forEach()
Funciones donde no necesitas this o quieres heredar el this externo

En el ejemplo de la clase, no se puede usar el arrow function, deben ser funciones tradicionales. En caso de que se quiera usar la arrow function sería

const fictionalCharacter = {
  name: "Uncle Ben",
  message: function (message) {
    const innerFunction = () => {
      console.log(`${this.name} says: ${message}`)
    };
    innerFunction();
  }
};
fictionalCharacter.message("With great power comes great responsibility.")
```const fictionalCharacter = {

&#x20; name: "Uncle Ben",

&#x20; message: function (message) {

&#x20;   const innerFunction = () => {

&#x20;     console.log(`${this.name} says: ${message}`)

&#x20;   };

&#x20;   innerFunction();

&#x20; }

};

fictionalCharacter.message("With great power comes great responsibility.")

AHORA, si la funcion tradicional en el objeto está anidada dentro de otra función, el `.this` no funciona.

```js
const persona = {
  nombre: "Nelson",
  saludar: function () {
    setTimeout(function () {
      console.log(`Hola, soy ${this.nombre}`);
    }, 1000);
  }
};

persona.saludar(); // ❌ Hola, soy undefined
```const persona = {

&#x20; nombre: "Nelson",

&#x20; saludar: function () {

&#x20;   setTimeout(function () {

&#x20;     console.log(`Hola, soy ${this.nombre}`);

&#x20;   }, 1000);

&#x20; }

};



persona.saludar(); // ❌ Hola, soy undefined

El problema aquí es que `setTimeout` ejecuta una nueva función tradicional.

Esa función tiene su propio `this`, que ya no apunta al objeto persona, sino al objeto global (`window` en navegadores o `global` en Node). Sin embargo en este mismo ejemplo SI SE PUEDE usar arrow functions

Jennifer Yanez Jiménez

student•

se me volvio loco el comentario aiuda

Angel David Garcia Garcia

student•

en mi caso es mas sencillos con las funciones tradicionales, pero me gusto las arrowfuntions espero aprenderlas y ponerlas en practica.