JavaScript se numără printre cele mai populare limbaje de programare. Dezvoltatorii care aspiră să devină ingineri JavaScript trebuie să cunoască temeinic elementele fundamentale ale buclelor, tipurile acestora și mecanismele lor de funcționare.
O buclă în JavaScript este un instrument utilizat pentru a efectua operații repetitive, bazate pe o anumită condiție. „Iterația”, pe de altă parte, este un concept generic care descrie repetiția în contextul unei bucle. O buclă continuă să se repete până când este îndeplinită o condiție de terminare.
Pentru o mai bună înțelegere, imaginează-ți un joc video în care trebuie să faci X pași spre nord, urmat de Y pași spre stânga.
De exemplu, 7 pași spre nord pot fi reprezentați astfel:
for (let step = 0; step < 7; step++) {
// Se execută de 7 ori, cu valorile lui step de la 0 la 6.
console.log("Mergând spre nord un pas");
}După execuția acestui bloc de cod, vei obține următoarele:
De ce sunt folosite buclele în mod obișnuit?
- Efectuarea sarcinilor repetitive: Buclele permit executarea repetată a instrucțiunilor până la îndeplinirea anumitor condiții.
- Iterarea prin obiecte sau matrice: Buclele pot parcurge proprietățile unui obiect sau elementele unei matrice, permițând executarea unor acțiuni specifice pentru fiecare proprietate sau element.
- Filtrarea datelor: Buclele sunt folosite pentru a filtra datele pe baza unor criterii specifice.
În JavaScript, buclele vin în diverse forme: `for`, `while`, `do…while`, `for…of` și `for…in`. Haideți să le explorăm în detaliu și să vedem cum funcționează fiecare.
Bucla `for`
O buclă `for` se repetă până când o condiție specificată devine falsă. O buclă `for` include trei expresii opționale, urmate de un bloc de cod.
for (inițializare; condiție; expresieFinală) {
// cod
}- Expresia de inițializare se execută o singură dată, înainte ca bucla să pornească. De obicei, această expresie inițializează unul sau mai mulți contori.
- Expresia de condiție este verificată înainte de fiecare execuție a buclei `for`. Codul din interiorul buclei se execută doar dacă condiția este evaluată ca adevărată. Dacă condiția este falsă, bucla se oprește. Dacă expresia de condiție este omisă, aceasta este considerată implicit ca fiind adevărată.
- ExpresiaFinală se execută la sfârșitul fiecărei iterații. De obicei, este folosită pentru a incrementa un contor.
Pentru a grupa și executa mai multe instrucțiuni, poți folosi un bloc de cod (`{}`). Dacă dorești să ieși din buclă înainte ca expresia condiției să fie falsă, poți folosi instrucțiunea `break`.
Exemple de bucle `for` cu cod
for (let i = 0; i < 7; i++) {
console.log(i);
}În acest cod:
- Variabila `i` este inițializată cu valoarea zero ( `i = 0` ).
- Condiția este ca `i` să fie mai mic decât 7 (`i < 7`).
- Bucla se va repeta atâta timp cât valoarea lui `i` este mai mică de 7.
- Valoarea lui `i` va crește cu 1 la fiecare iterație (`++i`).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Număr total de dezvoltatori: ' + i);
}- Acest cod iterează de la 1 la 10 ( `i < 11` ).
- Bucla inițializează variabila `i` cu valoarea 1.
- Bucla se va executa cât timp `i` este mai mic decât 11.
- Valoarea lui `i` crește cu 2 la fiecare iterație ( `i += 2` ).
Instrucțiunea `if` verifică dacă valoarea lui `i` este egală cu 9. Dacă condiția este adevărată, instrucțiunea `break` este executată, iar bucla se termină.
(imagine)
Bucla `for…of`
Bucla `for…of` iterează prin obiecte iterabile, cum ar fi Map, Array, Arguments și Set. Această buclă apelează un cârlig de iterare personalizat, iar instrucțiunile se execută pentru valoarea fiecărei proprietăți distincte.
Structura de bază a unei bucle `for…of` este:
for (variabilă of obiect)
instrucțiune
Exemple de buclă `for…of` în acțiune
const limbajeFrontend = [ "HTML", "CSS", "JavaScript" , "React"];
for (let i of limbajeFrontend) {
console.log(i);
}În acest cod:
- Definim o matrice numită `limbajeFrontend`.
- Matricea conține patru elemente: „HTML”, „CSS”, „JavaScript” și „React”.
- Bucla `for…of` iterează prin fiecare element al matricei `limbajeFrontend`.
- Variabila `i` preia valoarea fiecărui element la fiecare iterație, iar valorile sunt afișate în consolă.
const s = new Set();
s.add(2);
s.add("gri");
for (let n of s) {
console.log(n);
}
În acest cod:
- Declarăm o variabilă `s` și o atribuim unui nou Set creat cu constructorul `Set()`.
- Adăugăm două elemente folosind metoda `add()`.
- `for…of` iterează prin elementele setului.
- Bucla atribuie valoarea elementului curent variabilei `n` înainte de a executa `console.log(n)`.
const m = new Map();
m.set(4, "iepure");
m.set(6, "maimuță");
m.set(8, "elefant");
m.set(10, "leu");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
În acest cod:
- Folosim constructorul `Map()` pentru a crea un nou obiect Map.
- Declarăm variabila `m`.
- Adăugăm cinci perechi cheie-valoare folosind metoda `.set()`.
- O buclă `for…of` iterează prin elementele obiectului Map `m`.
Bucla `for…in`
O buclă `for…in` este utilizată pentru a itera prin proprietățile unui obiect. Structura de bază a unei bucle `for…in` este:
for (proprietate in obiect) {
// cod
}Poți utiliza bucla `for…in` pentru a itera prin matrice și obiecte asemănătoare matricei.
const listaCumparaturi = { kale: 4, rosii: 2, varza: 0, salata:6, dovleac:5 };
for (const leguma in listaCumparaturi) {
console.log(leguma);
}În acest cod:
- Introducem un obiect JavaScript și îl numim `listaCumparaturi`.
- Folosim bucla `for` pentru a itera prin fiecare proprietate a obiectului, folosind operatorul `in`.
- La fiecare iterație, bucla atribuie numele proprietății curente din `listaCumparaturi`.
Bucla `while`
Bucla `while` evaluează o condiție; dacă se dovedește a fi adevărată, blocul de cod se execută. Dacă condiția este falsă, bucla se termină, iar blocul de cod nu se va executa.
Structura de bază a unei bucle `while` este:
while (condiție)
instrucțiune
Condiția de testare trebuie să apară înainte de execuția instrucțiunii din buclă. Poți executa mai multe instrucțiuni folosind un bloc de cod (`{}`).
Exemplu de buclă `while` în acțiune
let n = 0;
while (n < 9) {
console.log(n);
n++;
}În acest cod:
- Variabila `n` este inițializată cu valoarea zero ( `n = 0` ).
- Bucla se va executa cât timp valoarea lui `n` este mai mică de 9 (`n < 9`).
- Valoarea lui `n` este afișată în consolă și crește cu 1 la fiecare iterație (`n++`).
- Codul se va opri la 8.
Bucla `do…while`
O buclă `do…while` se repetă până când o anumită condiție este falsă.
Structura generală a unei declarații `do…while` este:
do
instrucțiune
while (condiție);
Instrucțiunea se execută o dată, înainte de a verifica condiția. Dacă condiția este adevărată, instrucțiunea se va executa. Dacă condiția este evaluată ca falsă, execuția se va opri și controlul va trece la instrucțiunea următoare după bucla `do…while`. Codul dintr-o buclă `do…while` este garantat să ruleze cel puțin o dată, chiar dacă condiția este evaluată inițial ca falsă.
Exemplu de `do…while`
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
În acest cod:
- Introducem o variabilă `n` și îi setăm valoarea inițială la 0 ( `n = 0` ).
- Variabila `n` intră într-o buclă `do…while`, unde valoarea sa este incrementată cu 1 la fiecare iterație ( `n += 1` ).
- Valoarea lui `n` este înregistrată în consolă.
- Bucla va continua să se execute cât timp `n` este mai mic decât 7 ( `n < 7` ).
Când rulezi acest cod, consola va afișa valorile lui `n` de la 1 la 7, deoarece bucla se execută de 7 ori.
Bucla imbricată
O buclă imbricată este o situație în care avem o buclă în interiorul altei bucle. De exemplu, putem avea o buclă `for` în interiorul altei bucle `for`.
for (let exterior = 0; exterior < 5; exterior += 2) {
for (let interior = 0; interior < 6; interior += 2) {
console.log(`${exterior}-${interior}`);
}
}
- Avem două variabile: `exterior` și `interior`, ambele inițializate cu valoarea zero.
- Ambele variabile cresc cu 2 după fiecare iterație.
- Buclele exterioare și interioare se repetă de trei ori fiecare.
Instrucțiuni de control al buclei
Instrucțiunile de control al buclei, denumite și „instrucțiuni de salt”, întrerup fluxul normal al unui program. `break` și `continue` sunt exemple de instrucțiuni de control al buclei.
Declarații `break`
Instrucțiunile `break` termină imediat o buclă, chiar dacă condiția nu a fost îndeplinită.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Bucla se oprește aici. Am ajuns la instrucțiunea break");
break;
}
console.log(n);
}
Codul va afișa următoarele:
Declarații `continue`
Instrucțiunile `continue` sunt folosite pentru a sări peste un anumit bloc de cod și a continua iterația cu noua buclă.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
Codul va afișa următoarele:
Concluzie
Acestea sunt buclele uzuale pe care le vei întâlni în JavaScript vanilla și în framework-urile/bibliotecile sale. Fiecare tip de buclă are propriul său caz de utilizare și comportamente distincte. Dacă alegi tipul greșit de buclă, este posibil să întâmpini erori, iar codul tău ar putea avea un comportament neașteptat.
Dacă lucrezi cu un framework sau o bibliotecă JavaScript, verifică întotdeauna documentația acestora și folosește buclele încorporate acolo unde este cazul.