Usando el this (this Keyword)

¡Hola HaWker! Jeff Bruchado por aquí.

Este es un artículo más de nuestra serie de artículos que va a cubrir nuestro viaje para Aprender Programación desde Cero.

Hoy será un artículo sobre un contenido que pocas personas realmente entienden.

Bueno, sin más preámbulos, ¡vamos a comenzar!

Hoy, vamos a hablar sobre el 'this':

Vamos a comenzar imaginando que estás trabajando en un proyecto, una aplicación que tiene varias pestañas diferentes.

En cada pestaña, quieres mostrar información específica del usuario que está logueado, como nombre, email, y otras informaciones...

Debes estar pensando: "Vale, ¿pero cómo hago para saber qué usuario está en qué pestaña sin hacer un desorden?"

Y es ahí donde entra el famoso this.

El this es como si fuera un GPS en tu código. Te ayuda a entender dónde estás y a qué datos tienes acceso en aquel contexto específico.

¿Existen 3 motivos que lo hacen importante? Mira:

Contexto: El this te da el contexto. Dependiendo de dónde lo uses, puede referirse a cosas diferentes. Por ejemplo, dentro de un método de un objeto, this se refiere al propio objeto.

Flexibilidad: Hace tu código más flexible. Puedes usar la misma función en diferentes objetos, y el this se adaptará al objeto que está llamando la función.

Claridad: El this ayuda a dejar claro a qué te estás refiriendo. Sin él, sería fácil perderse en medio de tantas variables y funciones.

Piensa en el this como un espejo mágico. Dependiendo de cómo lo mires, muestra cosas diferentes.

Por ejemplo, si estás en un método de un objeto:

let usuario = {
  nombre: 'Juan',
  mostrarNombre: function () {
    console.log(this.nombre);
  },
};

usuario.mostrarNombre(); // Aquí, 'this' se refiere al objeto 'usuario'

En ese caso, this.nombre es JavaScript diciendo "Oye, estoy hablando del nombre DEL USUARIO que llamó esta función".

Entonces, como puedes percibir, entender el this es crucial porque te da control y claridad sobre lo que tu código está haciendo en diferentes contextos.

Sin él, podrías quedar totalmente perdido en tu propio código, intentando encontrar la salida de un laberinto en la oscuridad.

¡Con el this, tienes una linterna!

Bueno, a continuación vamos a profundizar más sobre este asunto.

Entendiendo el `this` en JavaScript

Entender el concepto del this en JavaScript puede ser un poco complejo para un principiante, sin embargo, si entiendes este concepto, vas a conseguir entender a fondo cómo funcionan los mecanismos que los Frameworks más modernos utilizan.

(En este instante vas a entender por qué he repetido algunas veces el concepto de scope en los últimos artículos)

Básicamente la palabra reservada "this" se refiere al objeto actual en el cual el código está siendo ejecutado. Puede ser usada en diferentes contextos y el valor que asume puede variar dependiendo del contexto en que es usada.

Por ejemplo, al usar this dentro de una función, se refiere al objeto global, mientras que, cuando es usado dentro de un método de un objeto, se refiere al propio objeto.

Ejemplo de código en JavaScript que ilustra el uso de `this`:

const obj = {
  prop: 'valor de la propiedad',
  method() {
    console.log(this.prop);
  },
};

obj.method(); // imprime "valor de la propiedad"

En este ejemplo, el valor de this dentro del método method es el objeto obj. Por lo tanto, al acceder a la propiedad prop usando this.prop, el valor de la propiedad es impreso en la consola.

También existen algunas reglas generales sobre el uso del this:

Cuando this es usado dentro de una función global, se refiere al objeto global (que en el caso del navegador es el objeto window).
Cuando this es usado dentro de un método de un objeto, se refiere al propio objeto.
Cuando this es usado dentro de una función anónima que es pasada como argumento para otra función, el valor de this dependerá de la forma como la función anónima es llamada.
Es posible usar el operador bind para alterar el valor de this a un objeto específico, independientemente del contexto en que la función es llamada.

Ejemplo más detallado que ilustra algunos de esos casos:

// Función global
function func() {
  console.log(this); // se refiere al objeto global (en el caso del navegador, el objeto "window")
}

func(); // imprime el objeto "window"

// Método de un objeto
const obj = {
  prop: 'valor de la propiedad',
  method() {
    console.log(this); // se refiere al objeto "obj"
  },
};

obj.method(); // imprime el objeto "obj"

// Función anónima pasada como argumento
function otraFunc(callback) {
  callback();
}

otraFunc(function () {
  console.log(this); // se refiere al objeto global (en el caso del navegador, el objeto "window")
});

// Usando "bind" para alterar el valor de "this"
const obj2 = {
  prop: 'otro valor de la propiedad',
};

function terceraFunc() {
  console.log(this.prop);
}

const nuevaFunc = terceraFunc.bind(obj2);
nuevaFunc(); // imprime "otro valor de la propiedad"

`this` en Arrow Functions

Antes de explicar sobre el this en Arrow Functions, necesito que entiendas sobre contexto léxico (lexical context).

Contexto Léxico (Lexical context)

El Contexto léxico se refiere al contexto en el cual una función fue escrita.

Esto incluye el local donde la función fue definida y todas las variables y funciones que estaban disponibles en el momento en que la función fue escrita.

Por ejemplo:

const x = 'global';

function test() {
  const x = 'local';
  console.log(x);
}

test(); // Output: "local"
console.log(x); // Output: "global"

En este caso, cuando llamamos la función test(), el valor de x que es impreso es "local", pues este es el valor de x en el contexto léxico de la función test().

Ya cuando llamamos console.log(x) en el exterior de la función test(), el valor de x es "global", pues este es el valor de x en el contexto léxico global.

El `this` en las Arrow Functions

En funciones normales ( function() ), el this se refiere al objeto que llama la función.

Por ejemplo:

const person = {
  name: 'Jeff',
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Output: "Hello, my name is Jeff"

Ya en las arrow functions, el this se refiere al contexto léxico, o sea, al contexto en el cual la función fue escrita.

Voy a intentar explicar mejor con un ejemplo:

const person = {
  name: 'Jeff',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Output: "Hello, my name is undefined"

En este caso, el this no se refiere al objeto person, sino al contexto global.

Por eso, al intentar acceder a la propiedad name del objeto person, el valor retornado es undefined.

Sin embargo, es posible utilizar el this de forma diferente en las arrow functions, utilizando la palabra clave bind().

La función bind() permite que "ates", el valor de this a una variable u objeto específico.

Ve el ejemplo abajo:

const person = {
  name: 'Jeff',
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const greet = person.greet.bind(person);
greet(); // Output: "Hello, my name is Jeff"

En este caso, al utilizar el bind() para "atar" el valor de this al objeto person, conseguimos acceder a la propiedad name del objeto person dentro de la función greet().

Conclusión

En resumen, el this es utilizado en funciones normales o en arrow functions.

Su valor y comportamiento pueden variar dependiendo del contexto en que es utilizado. En funciones normales, el this se refiere al objeto que llama la función.

Ya en las arrow functions, el this se refiere al contexto léxico, o sea, al contexto en el cual la función fue escrita.

Esto puede ser un poco confuso, pero la regla general es que el this se refiere al objeto que llama la función en funciones normales, y al contexto léxico en arrow functions.

Es importante recordar que el this puede ser "atado" (bind) a un valor específico utilizando la función bind().

Esto puede ser útil cuando queremos utilizar el this de forma diferente del estándar en arrow functions, por ejemplo.

Con esto, espero haber ayudado a esclarecer sobre este temido asunto que es el this en JavaScript.

Pues bien HaWker, llegamos al fin de un artículo más.

Como siempre, si tienes cualquier duda o quieres explorar más algún punto, simplemente responde con tu duda, en este email.

¡Y recuerda, estoy aquí para ayudarte a mejorar 1% con cada nuevo artículo!

Si llegaste hasta aquí, como de costumbre, por favor, responde este email con "Conseguí finalmente entender para qué sirve el this".

De esta forma voy a saber que esta serie de artículos está siendo útil para ti, y que estás acompañando y aprovechando.

¡Como ya sabes! Solamente un verdadero HaWker llega hasta el final.

¡Felicitaciones!

Estoy feliz de tenerte aquí.

Te veo pronto.

¡Vamos a por ello! 🦅

- Jeff Bruchado

Cuando sientas que es el momento existen 2 maneras en que puedo ayudarte:

01) Aprendiendo JavaScript desde Cero: Conviértete en un programador de valor y aprende a programar usando JavaScript, con un contenido organizado y condensado pensado en lo que realmente importa que aprendas. El contenido posee todos los artículos que vengo poniendo a disposición semanalmente para ti, y también posee ejercicios prácticos, con las respuestas para que aprendas la teoría y ya salgas poniendo manos a la obra.

02) Consultoría: Forma parte de mi mentoría y ten clases directamente conmigo. Si te interesa, responde este email con "Tengo interés en la mentoría."

¡Felicitaciones por llegar hasta aquí, HaWker! 🎉

En este momento que aprendiste sobre el uso de la palabra clave this en JavaScript, ¿qué tal testear tus conocimientos? Participa del quiz abajo y ve cuánto absorbiste de nuestro artículo.

Es una excelente manera de fijar el aprendizaje y prepararte para los próximos pasos en tu viaje de programación.

Presiona para acceder al quiz.

¡Buena suerte y diviértete!

Usando el this (this Keyword)

Entendiendo el this en JavaScript

Ejemplo de código en JavaScript que ilustra el uso de this:

Ejemplo más detallado que ilustra algunos de esos casos:

this en Arrow Functions