Functions and Loops- Curs Javascript

Declararea și Apelarea Funcțiilor

Funcțiile sunt blocuri de cod care execută o acțiune specifică. Ele sunt fundamentale în JavaScript și te ajută să scrii cod mai organizat, mai reutilizabil și mai ușor de întreținut. O funcție poate fi definită o singură dată și apelată ori de câte ori ai nevoie.

Cum se declară o funcție

O funcție se declară folosind cuvântul cheie function, urmat de un nume, paranteze rotunde și acolade:

function salut() {
  console.log("Salut, Ioan!");
}

• function — cuvântul cheie care definește funcția
• salut — numele funcției (poate fi orice nume valid)
• () — paranteze pentru eventuali parametri
• {} — blocul de cod care se execută când funcția este apelată

Cum se apelează o funcție

După ce ai definit funcția, o poți apela scriind numele ei urmat de paranteze:

salut(); // Apelăm funcția

Rezultatul va fi afișat în consolă: Salut, Ioan!

Exemplu Live: Apelarea unei funcții

De ce sunt utile funcțiile?

Funcțiile sunt esențiale pentru:

• Reutilizarea codului — scrii o dată, folosești de mai multe ori
• Modularitate — împarți aplicația în componente logice
• Claritate — codul devine mai ușor de citit și întreținut

Sfaturi utile

• Alege nume descriptive pentru funcții: calculeazaTotal(), afiseazaMesaj()
• Nu uita să le apelezi! O funcție definită dar neapelată nu face nimic.
• Poți defini funcții oriunde în cod, dar e bine să le ții organizate.

Parametrii Funcțiilor și Valori Returnate

Funcțiile pot primi informații din exterior prin parametri și pot trimite înapoi un rezultat folosind return. Asta le face mult mai flexibile și utile în aplicații reale.

Exemplu cu parametri

function salutNume(nume) {
  console.log("Salut, " + nume + "!");
}

salutNume("Ioan"); // Salut, Ioan!

Exemplu cu return

function aduna(a, b) {
  return a + b;
}

let rezultat = aduna(5, 3);
console.log(rezultat); // 8

Exemplu Live: Adunare cu parametri

De reținut

• Poți avea oricâți parametri dorești, separați prin virgulă
• return oprește execuția funcției și trimite o valoare înapoi
• Funcțiile fără return nu întorc nimic (undefined)

Expresii de Funcții vs Declarații de Funcții

În JavaScript, poți defini funcții în două moduri principale: declarații și expresii. Deși par similare, există diferențe importante între ele, mai ales în comportamentul de hoisting (ridicare în memorie).

Declarație de funcție

Este forma clasică, pe care am folosit-o până acum:

function salut() {
  console.log("Salut, Ioan!");
}

salut(); // Funcționează chiar dacă apelul e înainte de definiție

Expresie de funcție

Funcția este stocată într-o variabilă:

const salut = function() {
  console.log("Salut, Ioan!");
};

salut(); // Funcționează doar după ce a fost definită

Exemplu Live: Expresie vs Declarație

Diferențe cheie

• Declarațiile sunt ridicate în memorie — pot fi apelate înainte de a fi definite
• Expresiile nu sunt ridicate — trebuie definite înainte de apel
• Expresiile pot fi anonime și stocate în variabile, transmise ca argumente etc.

Funcții Săgeată (Arrow Functions)

Funcțiile săgeată sunt o formă mai scurtă de a scrie funcții în JavaScript. Sunt utile mai ales când vrei să scrii cod concis și rapid. Au un comportament diferit față de funcțiile clasice în ceea ce privește this, dar pentru majoritatea cazurilor simple sunt perfecte.

Sintaxă de bază

// Funcție clasică
function salut(nume) {
  return "Salut, " + nume + "!";
}

// Funcție săgeată
const salut = (nume) => {
  return "Salut, " + nume + "!";
};

Versiune prescurtată

Dacă funcția are un singur parametru și returnează direct o valoare, poți scrie și mai scurt:

const salut = nume => "Salut, " + nume + "!";

Exemplu Live: Funcție săgeată

Diferențe față de funcțiile clasice

• Nu au propriul this — folosesc contextul din afară
• Nu pot fi folosite ca metode în obiecte dacă ai nevoie de this
• Nu pot fi apelate cu new — nu sunt funcții constructor

Iterație cu for, while și do...while

Buclele sunt folosite pentru a repeta o acțiune de mai multe ori. În JavaScript, cele mai comune tipuri de bucle sunt for, while și do...while. Fiecare are propriul mod de control al execuției.

Bucle for

Ideală când știi de câte ori vrei să repeți ceva.

for (let i = 0; i < 5; i++) {
  console.log("Pasul " + i);
}

Bucle while

Execută codul cât timp condiția este adevărată.

let i = 0;
while (i < 5) {
  console.log("Pasul " + i);
  i++;
}

Bucle do...while

Execută codul cel puțin o dată, apoi verifică condiția.

let i = 0;
do {
  console.log("Pasul " + i);
  i++;
} while (i < 5);

Exemplu: Generare pași cu buclă for

  document.getElementById("genereaza").addEventListener("click", function () {
    const lista = document.getElementById("lista");
    lista.innerHTML = "";
    for (let i = 0; i < 5; i++) {
      const item = document.createElement("li");
      item.textContent = "Pasul " + i;
      lista.appendChild(item);
    }
  });

De reținut

• for e ideal pentru număr fix de repetări
• while e bun când nu știi câte repetări vor fi
• do...while garantează cel puțin o execuție

Iterație prin Tablouri (Arrays) și Șiruri (Strings)

În JavaScript, poți parcurge elementele unui array sau caracterele unui string folosind bucle. Cele mai folosite metode sunt for, for...of, și forEach pentru arrays, iar pentru strings poți folosi for sau for...of.

Iterație prin array cu for

let fructe = ["mere", "pere", "prune"];

for (let i = 0; i < fructe.length; i++) {
  console.log(fructe[i]);
}

Iterație prin array cu for...of

for (let fruct of fructe) {
  console.log(fruct);
}

Iterație prin array cu forEach

fructe.forEach(function(fruct) {
  console.log(fruct);
});

Iterație prin string

let text = "Salut";

for (let litera of text) {
  console.log(litera);
}

Exemplu Live: Parcurgere array

De reținut

• for îți oferă control total asupra indexului
• for...of e mai simplu și mai clar pentru arrays și strings
• forEach e ideal pentru funcții callback și cod mai concis

Instrucțiuni de Control: break și continue

În bucle, poți controla fluxul execuției cu două instrucțiuni speciale:

• break — oprește complet bucla
• continue — sare peste o iterație și trece la următoarea

Exemplu cu break

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log("i este " + i);
}
// Se oprește când i ajunge la 5

Exemplu cu continue

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }
  console.log("i este " + i);
}
// Sare peste 2, dar continuă cu restul

Filtrare cu break și continue

  document.getElementById("filtreaza").addEventListener("click", function () {
    const lista = document.getElementById("listaNumere");
    lista.innerHTML = "";
    for (let i = 0; i < 10; i++) {
      if (i === 7) break;
      if (i % 2 === 0) continue;
      const item = document.createElement("li");
      item.textContent = "Număr impar: " + i;
      lista.appendChild(item);
    }
  });

De reținut

• break e util când vrei să oprești bucla la o condiție
• continue te ajută să ignori cazuri speciale fără să oprești bucla
• Folosește-le cu grijă — pot face codul mai greu de urmărit dacă sunt abuzate

Bucle Imbricate (Nested Loops)

O buclă imbricată este o buclă aflată în interiorul altei bucle. Se folosesc atunci când vrei să parcurgi structuri bidimensionale, cum ar fi tabele, matrici sau combinații de date.

Exemplu simplu

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 2; j++) {
    console.log("i = " + i + ", j = " + j);
  }
}

Rezultatul va fi:

i = 1, j = 1
i = 1, j = 2
i = 2, j = 1
i = 2, j = 2
i = 3, j = 1
i = 3, j = 2

Exemplu Live: Matrice de coordonate

  document.getElementById("genereazaCoordonate").addEventListener("click", function () {
    const lista = document.getElementById("listaCoordonate");
    lista.innerHTML = "";
    for (let x = 1; x <= 3; x++) {
      for (let y = 1; y <= 2; y++) {
        const item = document.createElement("li");
        item.textContent = "Coordonată: (" + x + ", " + y + ")";
        lista.appendChild(item);
      }
    }
  });

De reținut

• Fiecare buclă interioară se execută complet pentru fiecare pas al celei exterioare
• Poți avea mai multe niveluri de imbricare, dar atenție la complexitate
• Ideal pentru matrici, tabele, combinații de date sau generare de grile

🧠 Quiz - Funcții și Bucle în JavaScript