Trabajar con un this diferente al que se usa en las funciones tradicionales.

2 - Funciones Flecha - `this` vs `this` | Repaso de JavaScript Moderno

Introducción

En JavaScript moderno (ECMAScript 6+) tenemos una nueva forma de declarar funciones: las funciones flecha (arrow functions). Con ellas podemos hacer dos cosas principales:

Abreviar la sintaxis de funciones, haciéndolas más concisas y legibles.
Trabajar con un this diferente al que se usa en las funciones tradicionales.

En este tutorial repasaremos ambas características mediante ejemplos prácticos, y veremos la diferencia clave entre el this de una función normal y el de una función flecha.

1. Sintaxis básica de las funciones flecha

Tradicionalmente, declaramos una función así:

Imagen 1 – Función tradicional guardada en una variable
javascript
let miFuncion = function duplicar(valor) {
    return valor * 2;
};

Esta sintaxis ha sido la forma clásica de crear funciones en JavaScript. Ahora veamos cómo escribir lo mismo con una función flecha.

Ejemplos de funciones flecha (imagen 2)

// Función flecha con bloque explícito y return
let duplicar = (valor) => {
    return valor * 2;
};

// Función flecha abreviada: un solo parámetro -> sin paréntesis
// Retorno implícito -> sin llaves ni return
let duplicar2 = valor => valor * 2;

// Varios parámetros requieren paréntesis
let sumar = (sumando1, sumando2) => sumando1 + sumando2;

// Función sin parámetros
let imprimirAlgo = () => console.log('algo');

// Función flecha con múltiples líneas (requiere llaves)
let funcionCompleja = () => {
    // línea 1
    // línea 2
    // ...
};

Observaciones importantes:

Si la función recibe un solo parámetro, podemos omitir los paréntesis.
Si el cuerpo de la función es una sola expresión y queremos retornar su valor, podemos omitir las llaves y la palabra return (retorno implícito).
Si no recibe parámetros, se escriben paréntesis vacíos ().
Si la función tiene varias líneas o no retorna de forma implícita, usamos llaves { } y return explícito.

2. La gran diferencia: el comportamiento del `this`

El this en JavaScript permite acceder al contexto de ejecución actual. Sin embargo, el this no se comporta igual en una función tradicional que en una función flecha.

Función tradicional: el valor de this depende de cómo se invoca la función. En particular, si la función es un método de un objeto, this hace referencia a ese objeto.
Función flecha: el this es léxico, es decir, toma el valor del this del ámbito donde la función fue definida (el entorno padre). No se reasigna según quién la invoque.

Veamos esto con un ejemplo concreto.

Imagen 3 – Definición de un objeto con ambos tipos de funciones

let duplicar2 = valor => valor * 2;
let sumar = (sumando1, sumando2) => sumando1 + sumando2;
let imprimirAlgo = () => console.log('algo');
let funcionCompleja = () => {
    // línea 1
    // línea 2
    // ...
}

// this
const obj = {
    funcionNormal: function() {
        console.log('funcion normal', this);
    },
    funcionFlecha: () => {
        console.log('función flecha', this);
    }
};

Ahora ejecutamos el código en un entorno web (navegador) para observar la salida.

Imagen 4 – Código HTML con script y salida por consola

<script>
const obj = {
    funcionNormal: function () {
        console.log("funcion normal", this);
    },
    funcionFlecha: () => {
        console.log("función flecha", this);
    },
};

console.log("this del ambiente", this);
obj.funcionNormal();
obj.funcionFlecha();
</script>

Salida en la consola (DEBUG CONSOLE)

this del ambiente Window {...}
funcion normal {funcionNormal: ƒ, funcionFlecha: ƒ}
función flecha Window {...}

Explicación de la salida

this del ambiente: en un navegador, el ámbito global es window. Por eso aparece Window.
obj.funcionNormal(): Al invocarse como método del objeto obj, this dentro de la función tradicional apunta a obj mismo. Por eso vemos el objeto {funcionNormal: ƒ, funcionFlecha: ƒ}.
obj.funcionFlecha(): Aunque también se invoca como método de obj, la función flecha no toma a obj como this. En cambio, usa el this del lugar donde fue definida, que es el ámbito global (window). Por eso vemos Window.

🧠 Regla mnemotécnica:
function() → el this es quien llama.
() => → el this es donde nace (ámbito padre).

3. ¿Por qué es útil esta diferencia?

Las funciones flecha son ideales para:

Callbacks dentro de métodos de objetos (por ejemplo, setTimeout, addEventListener) cuando queremos conservar el this del objeto padre.
Funciones cortas y expresivas que no necesitan su propio this.
Evitar el clásico problema de perder el this en funciones anidadas.

Ejemplo práctico:

const contador = {
    valor: 0,
    incrementarTradicional: function() {
        setTimeout(function() {
            this.valor++; // ❌ this = window, no funciona
            console.log(this.valor);
        }, 1000);
    },
    incrementarFlecha: function() {
        setTimeout(() => {
            this.valor++; // ✅ this = contador (herencia léxica)
            console.log(this.valor);
        }, 1000);
    }
};

Con la función flecha dentro de setTimeout, el this sigue siendo contador, mientras que con la función tradicional se pierde.

Resumen y conclusión

Característica	Función tradicional (`function`)	Función flecha (`=>`)
Sintaxis abreviada	No (requiere `function` y `return` explícito)	Sí, con retorno implícito y sin paréntesis para 1 parámetro
`this` depende de	Cómo se llama (dinámico)	Dónde se define (léxico, estático)
Uso como método	Apunta al objeto receptor	Apunta al ámbito padre (no al objeto)
Uso en callbacks	Puede perderse (necesita `bind`)	Sencillo, conserva el `this` padre

Recomendación final:

Usa funciones tradicionales para métodos de objetos que necesiten su propio this dinámico.
Usa funciones flecha para funciones cortas, callbacks o cuando quieras que el this sea el del contexto que la rodea.

Con esto has completado el repaso de Funciones Flecha vs this en JavaScript Moderno. ¡Sigue practicando con los ejemplos y observa los resultados en la consola!

Buscar este blog

SOTELO-javascript