En aquest tema, aprendrem sobre els objectes en JavaScript, una de les característiques més potents i fonamentals del llenguatge. Els objectes ens permeten agrupar dades i funcionalitats relacionades en una sola entitat, cosa que facilita la gestió i manipulació de la informació.
Què és un Objecte?
Un objecte és una col·lecció de propietats, i una propietat és una associació entre un nom (o clau) i un valor. El valor d'una propietat pot ser una funció, en aquest cas, es diu que la propietat és un mètode.
Creació d'un Objecte
Hi ha diverses maneres de crear objectes en JavaScript. La més comuna és utilitzar la notació d'objecte literal.
// Creació d'un objecte literal let persona = { nom: "Joan", edat: 30, salutacio: function() { console.log("Hola, em dic " + this.nom); } }; // Accés a les propietats de l'objecte console.log(persona.nom); // Joan console.log(persona.edat); // 30 // Crida al mètode de l'objecte persona.salutacio(); // Hola, em dic Joan
Propietats d'un Objecte
Les propietats d'un objecte poden ser accedides i modificades utilitzant la notació de punt (.
) o la notació de clau ([]
).
// Accés a les propietats utilitzant la notació de punt console.log(persona.nom); // Joan // Accés a les propietats utilitzant la notació de clau console.log(persona["edat"]); // 30 // Modificació de les propietats persona.nom = "Anna"; persona["edat"] = 25; console.log(persona.nom); // Anna console.log(persona.edat); // 25
Afegir i Eliminar Propietats
Podem afegir noves propietats a un objecte o eliminar-ne les existents.
// Afegir una nova propietat persona.ocupacio = "Enginyer"; console.log(persona.ocupacio); // Enginyer // Eliminar una propietat delete persona.edat; console.log(persona.edat); // undefined
Iteració sobre les Propietats d'un Objecte
Podem iterar sobre les propietats d'un objecte utilitzant el bucle for...in
.
for (let clau in persona) { console.log(clau + ": " + persona[clau]); } // Sortida: // nom: Anna // salutacio: function() { console.log("Hola, em dic " + this.nom); } // ocupacio: Enginyer
Exercicis Pràctics
Exercici 1: Creació i Manipulació d'Objectes
- Crea un objecte anomenat
cotxe
amb les propietats següents:marca
,model
,any
i un mètodedetalls
que imprimeixi una cadena amb la informació del cotxe. - Modifica la propietat
any
del cotxe. - Afegeix una nova propietat
color
al cotxe. - Elimina la propietat
model
del cotxe. - Itera sobre les propietats de l'objecte
cotxe
i imprimeix-les.
Solució
// 1. Creació de l'objecte cotxe let cotxe = { marca: "Toyota", model: "Corolla", any: 2020, detalls: function() { console.log(this.marca + " " + this.model + " (" + this.any + ")"); } }; // 2. Modificació de la propietat any cotxe.any = 2021; // 3. Afegir una nova propietat color cotxe.color = "Blau"; // 4. Eliminar la propietat model delete cotxe.model; // 5. Iteració sobre les propietats de l'objecte cotxe for (let clau in cotxe) { console.log(clau + ": " + cotxe[clau]); } // Sortida esperada: // marca: Toyota // any: 2021 // detalls: function() { console.log(this.marca + " " + this.model + " (" + this.any + ")"); } // color: Blau
Resum
En aquest tema, hem après què són els objectes en JavaScript i com crear-los, accedir-hi, modificar-los, afegir-hi i eliminar-ne propietats, així com iterar sobre les seves propietats. Els objectes són una eina poderosa per organitzar i gestionar dades i funcionalitats relacionades en el nostre codi. En els següents temes, explorarem més a fons les capacitats dels objectes i com utilitzar-los de manera efectiva en els nostres programes.
JavaScript: De Principiant a Avançat
Mòdul 1: Introducció a JavaScript
- Què és JavaScript?
- Configuració del Teu Entorn de Desenvolupament
- El Teu Primer Programa en JavaScript
- Sintaxi i Conceptes Bàsics de JavaScript
- Variables i Tipus de Dades
- Operadors Bàsics
Mòdul 2: Estructures de Control
- Declaracions Condicionals
- Bucles: for, while, do-while
- Declaracions Switch
- Gestió d'Errors amb try-catch
Mòdul 3: Funcions
- Definició i Crida de Funcions
- Expressions de Funció i Funcions Fletxa
- Paràmetres i Valors de Retorn
- Àmbit i Tancaments
- Funcions d'Ordre Superior
Mòdul 4: Objectes i Arrays
- Introducció als Objectes
- Mètodes d'Objecte i Paraula Clau 'this'
- Arrays: Conceptes Bàsics i Mètodes
- Iteració sobre Arrays
- Desestructuració d'Arrays
Mòdul 5: Objectes i Funcions Avançades
- Prototips i Herència
- Classes i Programació Orientada a Objectes
- Mòduls i Importació/Exportació
- JavaScript Asíncron: Callbacks
- Promeses i Async/Await
Mòdul 6: El Model d'Objectes del Document (DOM)
- Introducció al DOM
- Selecció i Manipulació d'Elements del DOM
- Gestió d'Esdeveniments
- Creació i Eliminació d'Elements del DOM
- Gestió i Validació de Formularis
Mòdul 7: APIs del Navegador i Temes Avançats
- Emmagatzematge Local i de Sessió
- Fetch API i AJAX
- WebSockets
- Service Workers i Aplicacions Web Progressives (PWAs)
- Introducció a WebAssembly
Mòdul 8: Proves i Depuració
- Depuració de JavaScript
- Proves Unitàries amb Jest
- Proves d'Integració
- Proves de Cap a Cap amb Cypress
Mòdul 9: Rendiment i Optimització
- Optimització del Rendiment de JavaScript
- Gestió de Memòria
- Manipulació Eficient del DOM
- Càrrega Per Mandat i Divisió de Codi
Mòdul 10: Frameworks i Llibreries de JavaScript
- Introducció a React
- Gestió d'Estat amb Redux
- Conceptes Bàsics de Vue.js
- Conceptes Bàsics d'Angular
- Triar el Framework Adequat