🧐Contextos de .this

En JavaScript, this es una palabra reservada que se refiere al contexto de ejecución actual.

📌 Contexto Global vs. Contexto de Función:

• Global: En el contexto global (fuera de cualquier función), this se refiere al objeto global (window en navegadores).

• Función Regular: Dentro de una función, this también hace referencia al objeto global, a menos que la función sea un método de un objeto.

• 📌 Problema Común con this: Dentro de funciones anidadas o callbacks, this puede no comportarse como se espera porque su valor cambia.

const usuario = {
    nombre: 'Nicolas',
    ciudadanías: ['Chile', 'Colombia', 'New Zealand'],
    mostrarCiudadanías: function() {
        this.ciudadanías.forEach(function(ciudadanía) {
            console.log(this.nombre + ' tiene la ciudadanía de ' + ciudadanía);
        });
    }
};

usuario.mostrarCiudadanías();
// undefined tiene la ciudadanía de Chile
// undefined tiene la ciudadanía de Colombia
// undefined tiene la ciudadanía de New Zealand

📌 Solución con Arrow Functions: Las Arrow Functions no tienen su propio this, por lo que heredan el this del contexto en el que fueron definidas.

const usuario = {
    nombre: 'Nicolas',
    ciudadanías: ['Chile', 'Colombia', 'New Zealand'],
    mostrarCiudadanías: function() {
        this.ciudadanías.forEach((ciudadanía) => {
            console.log(this.nombre + ' tiene la ciudadanía de ' + ciudadanía);
        });
    }
};

usuario.mostrarCiudadanías();
// Nicolas tiene la ciudadanía de Chile
// Nicolas tiene la ciudadanía de Colombia
// Nicolas tiene la ciudadanía de New Zealand