DEV Community

Cover image for ES6: Objetos Literales en JavaScript
Cristian Fernando
Cristian Fernando

Posted on • Updated on

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
};
Enter fullscreen mode Exit fullscreen mode

¿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";
Enter fullscreen mode Exit fullscreen mode

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
};

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
}
*/

Enter fullscreen mode Exit fullscreen mode

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"
}
*/

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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`)
   },

};
*/
Enter fullscreen mode Exit fullscreen mode

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

gif

Top comments (4)

Collapse
 
leozm profile image
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)
},

};
*/

Collapse
 
duxtech profile image
Cristian Fernando

verdad! ya lo corrijo

Collapse
 
claurebeca profile image
Claudia Rebeca

muchas gracias tenia muchas dudas

Collapse
 
duxtech profile image
Cristian Fernando

gracias a ti por leer mi post