ES6: Objetos Literales en JavaScript

Los objetos son una estructura de datos bastante usada en el lenguaje, de hecho, considero que es la más importante y que muchas veces no llegamos a comprender del todo.
Sintácticamente un objeto en JavaScript es un conjunto agrupado entre llaves de claves y valores:

let nombreDelObjeto = {
clave_1: valor_1,
clave_2: valor:2,
clave_3: valor:3,
clave_n: valor:n
};

¿Qué es un literal?

La definición de literal alude a algo textual, por ejemplo, si declaramos una variable de la siguiente manera:

let colorDelSol = "Amarillo";

Podemos decir la variable colorDelSol tiene asignada un string literal ya que se asigna el valor textualmente.

Exactamente lo mismo ocurre con los objetos literales, por ejemplo:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true
};

Donde:

• El nombre del objeto es perro y sus claves/valores se describen en la siguiente tabla:

Clave	Valor	Tipo de dato
nombre	Scott	string
color	Cafe	string
edad	5	int
macho	true	bolean

Los tipos de datos que puede almacenar un objeto pueden ser strings, enteros, boleanos, inclusive otros objetos.

Acceder a valores de un objeto

Existen 2 maneras simples para poder acceder a los valores de un objeto:

Notación de punto

Consiste en escribir el nombre del objeto seguido de un punto y el nombre de la propiedad a la cual se quiere acceder: objeto.clave

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true
};

console.info(perro.nombre); // Scott
console.info(perro.edad);  // 5

Notación de corchetes / llaves cuadradas o brackets

Consiste en escribir el nombre del objeto anteponiendo entre corchetes la clave a la que se quiere acceder: objeto[clave]

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true
};

console.info(perro['nombre']); // Scott
console.info(perro['edad']);  // 5

Ambas maneras retornan los mismos resultados, por lo tanto se pueden considerar homónimas, pero en la práctica se acostumbra a usar más la notación de punto.

Métodos en un objeto

Un objeto no solo se limita a la agrupación de claves valores, es posible también incorporar métodos de la siguiente manera:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   }

};

console.log(perro.ladrar()); // Scott puede ladrar

Por motivos de scope de variables, para acceder los campos de un objeto dentro de un método, se debe usar la palabra reservada this.

Inserción de nuevos campos a un objeto

Para agregar nuevos campos al objeto solo basta con mencionar el nombre del objeto seguido de la propiedad nueva y el valor nuevo a insertar: perro.tamaño = "Grande";

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },

};

perro.tamaño = "Grande";
console.log(perro);
/*
[object Object] {
  color: "Cafe",
  edad: 5,
  ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },
  macho: true,
  nombre: "Scott",
  tamaño: "Grande"
}
*/

Con ellos conseguiremos agregar un nuevo valor al objeto.

Actualizar campos del objeto

Basta con sobre escribir una propiedad ya existente, de la siguiente manera:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },

};

perro.edad = 8;
console.log(perro);
/*
[object Object] {
  color: "Cafe",
  edad: 8,
  ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },
  macho: true,
  nombre: "Scott"
}
*/

Eliminación de campos

Para borrar una propiedad de un objeto se utiliza la palabra reservada delete de la siguiente manera:

delete nombre_del_objeto.clave;

Por ejemplo:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   }

};

delete perro.color;
console.log(perro);
/*
let perro = {
   nombre:"Scott",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },

};
*/

La salida de los ejemplos de este post están hechas con la herramienta JSBin, por ello el formato es así.

Conclusiones 📎

• Un objeto es la estructura de datos más usada en javascript, compuesta de pares ordenados y agrupados en claves y valores.
• Se denomina objeto literal al objeto cuyas propiedades están declaradas textualmente en el código.
• Los objetos pueden almacenar métodos en su interior.
• Para acceder a las propiedades de un objeto dentro de un método es necesario usar la palabra reservada this por scope de las variables.
• A diferencia de otros lenguajes de programación se pueden añadir, actualizar, o eliminar propiedades de una manera muy poco usual pero bastante simple.

---

Referencias ✔

• https://makeitrealcamp.gitbook.io/javascript-book/objetos-literales
• https://desarrolloweb.com/articulos/literales-objeto-javascript.html

Comments

[Claudia Rebeca]

muchas gracias tenia muchas dudas

[Cristian Fernando]

gracias a ti por leer mi post

[Leo Muñoz]

En el ejemplo referido a borrar una propiedad de un objeto la salida debería ser:
/*
let perro = {
nombre:"Scott",
edad: 5,
macho: true,
ladrar: function(){
return(${this.nombre} puede ladrar)
},

};
*/

[Cristian Fernando]

verdad! ya lo corrijo