Objectes

Crear un objecte

Un objecte s'escriu amb claus { }. Dins, cada entrada és un parell clau: valor, separat per comes:

Algunes coses a notar:

• Les claus (nom, edat…) no necessiten cometes quan són paraules simples.
• Els valors poden ser de qualsevol tipus: strings, nombres, booleans, arrays, fins i tot altres objectes.
• La coma entre entrades és obligatòria. La de després de l'última és opcional (a JS no és error).

Un objecte buit s'escriu {}:

Accedir a les propietats

Hi ha dues maneres d'accedir a una propietat: amb un punt o amb claudàtors. Les dues fan exactament el mateix:

El punt és més curt i més llegible — és la forma que faràs servir el 99% de les vegades. Els claudàtors són útils quan la clau ve d'una variable, perquè el punt no ho pot fer:

Si demanes una propietat que no existeix, JavaScript no peta: retorna undefined (igual que amb els arrays):

Modificar, afegir i eliminar propietats

Per modificar una propietat existent, simplement assigna-li un valor nou:

Per afegir una propietat nova, fas exactament el mateix — JavaScript la crea automàticament:

Per eliminar una propietat, fas servir delete:

Tornem al patró de const del capítol 6: igual que amb els arrays, const protegeix la variable però no el contingut. Pots modificar propietats, afegir-les i eliminar-les. El que no pots fer és reassignar tot l'objecte (persona = { ... }).

Comprovar si una propietat existeix

Com que demanar una propietat inexistent no peta (retorna undefined), de vegades has de comprovar explícitament si hi és abans d'usar-la. Hi ha dues maneres:

L'operador in retorna true si la clau existeix a l'objecte, encara que el seu valor sigui undefined o null. Per a la majoria de casos, qualsevol de les dues opcions funciona bé.

Recórrer un objecte

Un objecte no té .length com els arrays. Si vols saber quantes propietats té o recórrer-les, fas servir Object.keys(), Object.values() i Object.entries():

Per recórrer totes les propietats amb un bucle, la manera més habitual és for...in, que itera per les claus:

Llegeix-ho: «per a cada clau dins de persona, imprimeix la clau i el seu valor». Dins del bucle, persona[clau] dona el valor associat — aquí cal usar claudàtors perquè clau és una variable, no una clau literal.

Atenció: for...in (per a objectes) és diferent de for...of (per a arrays). Confondre'ls és un error comú.

Objectes amb altres objectes a dins

Un valor dins d'un objecte pot ser un altre objecte, un array, o el que vulguis. Així pots representar coses del món real amb estructures complexes:

Pots encadenar punts i claudàtors tantes vegades com calgui: alumne.adreça.ciutat primer agafa l'objecte adreça i després n'extreu la propietat ciutat. Igualment, alumne.assignatures[0] primer agafa l'array i després el seu primer element.

Arrays d'objectes

El patró més habitual és tenir un array d'objectes — una llista d'elements, on cada element té diverses propietats. Per exemple, una llista de productes d'una botiga:

Combinant arrays i objectes pots representar qualsevol estructura de dades complexa. Aquest és l'estil amb què es treballa quan reps dades d'una API o d'una base de dades a internet.

Errors típics

1. Buscar .length en un objecte — no existeix:

Surt undefined, no 2. La manera correcta és Object.keys(persona).length.

2. Posar coma després del darrer element en algun cas problemàtic — JavaScript modern ho accepta dins objectes i arrays, però en context d'expressions pot crear sorpreses. Per ser segur, no la posis si no l'has vista al codi del professor.

3. Confondre for...in i for...of:

Regla pràctica: amb arrays, fes for...of. Amb objectes, fes for...in.

4. Accedir a una propietat d'un objecte que no existeix dins d'un altre — encadenes els punts i peta:

Surt TypeError: Cannot read properties of undefined. persona.adreça és undefined, i no pots fer .ciutat sobre undefined. Si no estàs segur que la propietat existeixi, comprova-la abans.

Resum

• Un objecte agrupa valors amb noms: const p = { nom: "Ada", edat: 16 };.
• Accedeixes a propietats amb punt (p.nom) o claudàtors (p["nom"]). Els claudàtors són necessaris si la clau és dinàmica.
• Per afegir, modificar o eliminar propietats: p.x = y, delete p.x.
• Una propietat inexistent retorna undefined (no dona error).
• Un objecte no té .length: per saber quantes propietats té, fas Object.keys(obj).length.
• Recorres un objecte amb for (const clau in obj); un array, amb for (const x of arr).
• Pots niar objectes dins d'objectes i tenir arrays d'objectes per modelar estructures complexes.

🎉 Has acabat la Part A!

Acabes de completar la primera meitat del curs: JavaScript de consola. Ja tens totes les eines bàsiques que comparteixen tots els llenguatges de programació: variables, decisions, bucles, arrays, funcions i objectes.

A partir del capítol 9 entrem a la Part B: aprendrem què fa especial JavaScript respecte a altres llenguatges — pot manipular una pàgina web, reaccionar a clics i dibuixar coses al navegador. Construirem un mini-joc al final del curs.