Introducció
Les funcions són blocs de codi reutilitzables que permeten estructurar millor els programes, millorar la llegibilitat i evitar la duplicació de codi. En aquesta secció, aprendrem com definir i cridar funcions en JavaScript.
Definició de Funcions
Sintaxi Bàsica
Per definir una funció en JavaScript, utilitzem la paraula clau function
seguida del nom de la funció, parèntesis i un bloc de codi entre claus:
Exemple
En aquest exemple, hem definit una funció anomenada saludar
que imprimeix "Hola, món!" a la consola.
Crida de Funcions
Per cridar una funció, simplement escrivim el nom de la funció seguit de parèntesis:
Funcions amb Paràmetres
Les funcions poden acceptar paràmetres, que són valors que es passen a la funció quan es crida. Aquests paràmetres es defineixen dins dels parèntesis de la definició de la funció.
Exemple
function saludarNom(nom) { console.log("Hola, " + nom + "!"); } saludarNom("Anna"); // Output: Hola, Anna!
En aquest exemple, la funció saludarNom
accepta un paràmetre nom
i imprimeix un missatge personalitzat.
Funcions amb Valors de Retorn
Les funcions poden retornar un valor utilitzant la paraula clau return
. Quan una funció retorna un valor, podem emmagatzemar aquest valor en una variable o utilitzar-lo directament.
Exemple
function sumar(a, b) { return a + b; } let resultat = sumar(3, 4); console.log(resultat); // Output: 7
En aquest exemple, la funció sumar
accepta dos paràmetres a
i b
, i retorna la seva suma. El valor retornat es guarda a la variable resultat
.
Exercicis Pràctics
Exercici 1: Funció de Salutació
Defineix una funció anomenada salutacioPersonalitzada
que accepti dos paràmetres: nom
i edat
. La funció ha d'imprimir un missatge que digui "Hola, [nom]! Tens [edat] anys."
Solució
function salutacioPersonalitzada(nom, edat) { console.log("Hola, " + nom + "! Tens " + edat + " anys."); } salutacioPersonalitzada("Joan", 25); // Output: Hola, Joan! Tens 25 anys.
Exercici 2: Funció de Multiplicació
Defineix una funció anomenada multiplicar
que accepti dos paràmetres x
i y
, i retorni el seu producte.
Solució
function multiplicar(x, y) { return x * y; } let producte = multiplicar(5, 6); console.log(producte); // Output: 30
Errors Comuns i Consells
-
Oblidar els Parèntesis en la Crida de la Funció: Recorda sempre incloure els parèntesis quan cridis una funció, fins i tot si no té paràmetres.
saludar; // Incorrecte saludar(); // Correcte
-
No Retornar un Valor: Si la teva funció ha de retornar un valor, assegura't d'utilitzar la paraula clau
return
.function sumar(a, b) { a + b; // Incorrecte } function sumarCorrecte(a, b) { return a + b; // Correcte }
-
Paràmetres No Definits: Assegura't de passar els arguments necessaris quan cridis una funció que requereixi paràmetres.
saludarNom(); // Incorrecte, falta el paràmetre 'nom' saludarNom("Anna"); // Correcte
Resum
En aquesta secció, hem après com definir i cridar funcions en JavaScript, com passar paràmetres a les funcions i com retornar valors des de les funcions. Les funcions són una eina fonamental per estructurar i reutilitzar el codi de manera eficient. En la següent secció, explorarem les expressions de funció i les funcions fletxa, que ofereixen maneres més concises de definir funcions.
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