Arrow functions y lexical binding en JS

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:31

Arrow functions y lexical binding en JS

Curso de Fundamentos de JavaScript

Clase 23 de 55

Clase 23 / 55

Recursos

Las arrow functions en JavaScript surgieron para escribir funciones más cortas y, sobre todo, para evitar problemas con el this. Si vienes de funciones tradicionales y quieres entender cuándo usar cada una, esta guía te muestra la sintaxis paso a paso y por qué el lexical binding cambia la forma en que tu código se comporta.

Vas a ver ejemplos concretos en Node.js, retornos implícitos, manejo de parámetros y un caso real con un objeto que demuestra por qué el this se comporta distinto entre ambos tipos de función.

¿Qué son las arrow functions y en qué se diferencian de las funciones tradicionales?

Una función tradicional usa la palabra reservada function, recibe parámetros y ejecuta un cuerpo entre llaves. Una arrow function hace exactamente lo mismo, pero quita la palabra function y agrega una flecha => entre los parámetros y el cuerpo [0:55].

javascript // Función tradicional (expresión de función) const greeting = function(name) { return Hola ${name}; };

// Arrow function equivalente const newGreeting = (name) => { return Hola ${name}; };

La estructura cambia en tres puntos: desaparece function, aparece la flecha y, como verás abajo, puedes simplificar aún más el cuerpo y los paréntesis.

¿Por qué usar arrow functions si ya existen las funciones tradicionales? Por dos razones: hacer el código más corto y evitar la vinculación con this. Las arrow functions no crean su propio contexto de ejecución.

¿Cómo funciona el retorno implícito en una arrow function?

Cuando el cuerpo de la función tiene una sola expresión, puedes eliminar las llaves y el return. Eso se llama retorno implícito [3:10].

javascript // Retorno explícito const newGreeting = (name) => { return Hola ${name}; };

// Retorno implícito const newGreetingImplicit = (name) => Hola ${name};

El resultado es el mismo, pero el código queda en una sola línea y se lee más rápido.

¿Cuándo necesito los paréntesis en los parámetros?

La regla es simple y depende de cuántos parámetros recibes:

Con un solo parámetro, los paréntesis son opcionales: name => \Hola ${name}``.
Con dos o más parámetros, los paréntesis son obligatorios: (name, lastName) => \Hola, yo soy ${name} ${lastName}``.
Sin parámetros, también necesitas los paréntesis vacíos: () => 'Hola'.

¿Qué es el lexical binding y por qué afecta al this?

El lexical binding o enlace léxico es la forma en que las arrow functions resuelven el this. A diferencia de una función tradicional, una arrow function no crea su propio this, sino que toma el del contexto donde fue definida [6:20].

El ejemplo más claro aparece cuando defines métodos dentro de un objeto.

javascript const fictionalCharacter = { name: 'Uncle Ben', messageWithTraditionalFunction: function(message) { console.log(${this.name} dice: ${message}); }, messageWithArrowFunction: (message) => { console.log(${this.name} dice: ${message}); } };

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

Al ejecutar este código con node clase.js, la primera llamada imprime: Uncle Ben dice: With great power comes great responsibility. La segunda imprime: undefined dice: Beware of Doctor Octopus [9:15].

¿Por qué this es undefined en la arrow function dentro de un objeto? Porque la arrow function no se vincula al objeto que la contiene. Hereda el this del scope superior, que en este caso no tiene la propiedad name.

¿Cuándo conviene usar arrow functions y cuándo no?

Usa arrow functions cuando quieras código corto, callbacks o cuando necesites preservar el this del scope exterior, por ejemplo dentro de un setTimeout o un map.

Evítalas como métodos de objeto si vas a usar this para acceder a propiedades del propio objeto. En ese caso, una función tradicional te da el comportamiento que esperas.

¿Las arrow functions reemplazan a las funciones tradicionales? No. Son herramientas distintas. La elección depende de si necesitas tu propio this o prefieres heredarlo del contexto léxico.

¿Cómo evitar errores de tipeo al escribir código en inglés?

Mientras escribías el ejemplo, es fácil que se te escape un typo, como olvidar la g en great. Existen extensiones de revisión ortográfica para tu editor que detectan estos errores en variables y strings en inglés, y te ahorran horas de depuración.

Cuéntame en los comentarios: ¿prefieres escribir tus funciones con sintaxis tradicional o con arrow functions?

Andrés Soret Chacin

Hace 2 años

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?

Comentarios (54)54 comentarios

Augusto Eduardo Bonalumi

Ecsar García Sandoval

Kyb3r Cipher

Matias Ezequiel Rivero

Maximiliano Ávila

Joaquin Ignacio Pinto Reynolds

Nicolás Duque

Sandra Rosa Arroyo Paredes

DEISY MILENA MARTÍNEZ RUGELES

Francisco Zuñiga

Diego Peraza

Christopher Andrés Guano Valencia

Calvin Rafael Bobadilla Fernandez

Gabriel Muñoz Castro

Stephany Matute

Hace 7 meses•editado

Juan Esteban Nuñez Valega

Hace 7 meses

Daniel Felipe Páez Casallas

Hace un año•editado

Johan Sebastian

Hace un año

Adrian Serrato Flores

Hace 9 meses

Brayan Steven Rivera Páez

Hace 10 meses

Jonathan Garcia

HERNANDO RAMIREZ

Hace 6 meses

Seba Cardoso

Hace 3 meses

Daniel Vergel

Hace 4 meses

Jacques Hauzeur

Josué Rubén Robles Gonzalez

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Arrow functions y lexical binding en JS