JavaScript Moderno #3 | Objetos Literales.

En esta serie de posts repasaremos features modernas del lenguaje de programación JavaScript que harán de tu vida como programador mucho más fácil, pero antes te dejo las otras entregas de esta serie:

• #1 Variables y Constantes

• #2 Template String

Vayamos al tema de hoy. Lo primero que tenemos que entender, es que no hay una sola forma de utilizar objetos en JavaScript, en este post vamos a ver cómo utilizar objetos literales y cómo estos nos permiten trabajar con POO de manera muy rápida y nada verbosa.

Crear un objeto literal es muy sencillo, se comienza con la definición e inicialización de una variable o constante (mi post anterior trata sobre esto), así:

const desarrollador = {} // Si, eso es todo 👀

Esto es muy parecido a lo que en otros lenguajes se le llama diccionario, mapa o incluso podríamos pensar que esto es un JSON, pero observa lo que sucede cuando imprimimos esto por consola:

Como ya te diste cuenta, no solo se trata de una estructura de datos, sino de un objeto "literalmente" creado, y que hereda el comportamiento (métodos y propiedades) de la clase Object nativa de JavaScript.

Definamos ahora, algunas propiedades y métodos a nuestro objeto...

const desarrollador = {
   nombre: 'Joseph León', // 1️⃣
   edad: 25, // 2️⃣
   techStack: [ 'Flutter', 'ReactJS', 'Laravel', 'NodeJS'], // 3️⃣
   bio: function() {
      console.log(`Soy ${this.nombre}, desarrollador en ${this.techStack[0]}, ${this.techStack[1]}, ${this.techStack[2]}, etc.`);
   }, // 4️⃣
}

• 1️⃣: Propiedad de texto.
• 2️⃣: Propiedad numérica.
• 3️⃣: Array como propiedad.
• 4️⃣: Función como propiedad (método)

Vemos en el fragmento de código que podemos acceder a las propiedades del objeto desde él mismo utilizando la palabra reservada this ya que esta apunta a sí mismo. Podemos utilizar this para acceder a cualquier propiedad desde el mismo objeto (ya sea un "método" o una propiedad).

También podemos acceder al las propiedades del un objeto literal desde fuera de este.

const desarrollador = {
   nombre: 'Joseph León',
   edad: 25,
   techStack: [ 'Flutter', 'ReactJS', 'Laravel', 'NodeJS'],
   bio: function() {
      console.log(`Soy ${this.nombre}, desarrollador en ${this.techStack[0]}, ${this.techStack[1]}, ${this.techStack[2]}, etc.`);
   },
}

console.log(desarrollador.nombre);   // Joseph León
console.log(desarrollador.edad);     // 25 
console.log(desarrollador.techStack);  // [...]
desarrollador.bio(); // Soy Joseph, desarrollador en Flutter, ReactJS, etc.

A esto se le conoce como notación de punto pero también podemos acceder mediante la notación de corchete.

console.log(desarrollador['nombre']);   // Joseph León
console.log(desarrollador['edad']);     // 25 
console.log(desarrollador['techStack'nota]);  // [...]
desarrollador['bio'](); // Soy Joseph, desarrollador en Flutter, ReactJS, etc.

Como puedes ver las dos notaciones nos brindan los mismo resultados, pero por razones obvias, se suele utilizar la primera opción.

Modificación de objetos

Podemos añadir, modificar o eliminar propiedades de un objeto literal de la siguiente manera:

const ciudad = {
   nombre: 'Trujillo',
   poblacion: 1000000,
}

// Adición de propiedades:
ciudad.apodo = "Ciudad de la eterna primavera."

// Modificación de propiedades:
ciudad.poblacion = 1000001

 // Modificación de propiedades:
delete ciudad.poblacion
console.log(ciudad.poblacion) // undefined

Gracias a la notación de punto podemos operar sobre las propiedades de un objeto literal de manera muy sencilla.

Conclusiones

• Utiliza objetos literales para encapsular y organizar información.
• Los objetos literales son fáciles, legibles y claros de representar con JavaScript (a comparación de las clases).