ES6: Objetos Literales en JavaScript
Tags: javascript, webdev, spanish, es6
Published: 2020-08-03 15:00:19

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:

```javascript
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:

```javascript
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:

```javascript
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`

```javascript
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]`

```javascript
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: 

```javascript
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](https://dev.to/crisfer4217/scope-en-javascript-var-let-y-const-5eh2), para acceder los campos de un objeto dentro de un método, se debe usar la palabra reservada [this](https://dev.to/crisfer4217/this-en-javascript-5782). 

## **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";`

```javascript

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:

```javascript
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:

```javascript
delete nombre_del_objeto.clave;
```

Por ejemplo:

```javascript
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](https://jsbin.com/), 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

![gif](https://media.giphy.com/media/lrDMG46JjKiovLbkn8/giphy.gif)