ES6: Objectes Literals en JavaScript

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

let colorDelSol = "Amarillo";

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

Els tipus de dades que pot emmagatzemar un objecte poden ser strings, enters, boleans, inclusivament altres objectes.

accedir a valors d’un objecte

Existeixen 2 maneres simples per poder accedir als valors d’un objecte:

notació de punt

Consisteix en escriure el nom de l’objecte seguit d’un punt i el nom de la propietat a la qual es vol accedir: objeto.clave a

let perro = { nombre:"Scott", color:"Cafe", edad: 5, macho: true};console.info(perro.nombre); // Scottconsole.info(perro.edad); // 5

Notació de claudàtors / claus quadrades o brackets

Consisteix en escriure el nom de l’objecte anteposant entre claudàtors la clau a la qual es vol accedir: objeto a

let perro = { nombre:"Scott", color:"Cafe", edad: 5, macho: true};console.info(perro); // Scottconsole.info(perro); // 5

les dues maneres retornen els mateixos resultats, per tant es poden considerar homònimes, però a la pràctica s’acostuma a fer servir més la notació de punt.

Mètodes en un objecte

Un objecte no només es limita a l’agrupació de claus valors, és possible també incorporar mètodes de la següent manera: a

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

per motius de scope de variables, per accedir als camps d’un objecte dins d’ un mètode, s’ha d’usar la paraula reservada this.

Inserció de nous camps a un objecte

Per afegir nous camps a l’objecte només n’hi ha prou amb esmentar el nom de l’objecte seguit de la propietat nova i el valor nou a inserir: perro.tamaño = "Grande"; a

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

amb ells aconseguirem afegir un nou valor a l’objecte.

Actualitzar camps de l’objecte

Només cal sobre escriure una propietat ja existent, de la següent manera: a

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

Eliminació de camps

Per esborrar una propietat d’un objecte s’utilitza la paraula reservada delete de la següent manera: a

delete nombre_del_objeto.clave;

Per exemple: a

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", color:"Cafe", edad: 5, macho: true, ladrar: function(){ return(`${this.nombre} puede ladrar`) },};*/

la sortida dels exemples d’aquest post estan fetes amb l’eina JSBin, per això el format és així.

Conclusions 📎

• Un objecte és l’estructura de dades més usada en javascript, composta de parells ordenats i agrupats en claus i valors.
• Es denomina objecte literal a l’objecte les propietats estan declarades textualment en el codi.
• Els objectes poden emmagatzemar mètodes al seu interior.
• Per accedir a les propietats d’un objecte dins d’un mètode cal fer servir la paraula reservada this per scope de les variables.
• A diferència d’altres llenguatges de programació es poden afegir, actualitzar o suprimir propietats d’una manera molt poc usual però bastant simple.