Funcții și closure

Arrow functions, parametri, funcții ca valori, closure.

Actualizat 8 octombrie 2026

Ce este o funcție

O funcție e un bloc de cod cu nume, pe care îl scrii o dată și îl rulezi de câte ori vrei. Primește date (parametri), face ceva cu ele și, opțional, dă înapoi un rezultat (return).

Gândește-te la ea ca la o rețetă: rețeta (funcția) e scrisă o singură dată; de fiecare dată când gătești (apelezi funcția) poți folosi alte ingrediente (argumente).

function add(a, b) {   // a, b = parametri (ingredientele cerute)
  return a + b         // rezultatul
}

add(2, 3)              // 5  — 2 și 3 = argumente (ingredientele concrete)
add(10, 20)            // 30

Două momente diferite, de care trebuie să fii conștient:

	Definire	Apel
Cod	`function add(a, b) { ... }`	`add(2, 3)`
Ce se întâmplă	JS ține minte rețeta, nu o rulează	JS rulează corpul funcției
De câte ori	o dată	de câte ori vrei

De ce există funcții

Refolosire — nu copiezi același cod în 10 locuri.
Nume — calculateTotal(cart) spune ce face; 15 linii de calcule nu spun.
Izolare — variabilele din funcție nu se amestecă cu restul codului.
Testare — o funcție mică, cu input și output clar, se testează ușor.

Parametri și return

function greet(name = 'anonim') {   // valoare implicită
  return `Salut, ${name}`
}

greet()          // 'Salut, anonim'
greet('Ana')     // 'Salut, Ana'

return oprește funcția și dă rezultatul. Ce e după el nu mai rulează.
Fără return, funcția returnează undefined.
Parametrii lipsă sunt undefined (dacă nu au valoare implicită).

Rest parameters și destructuring

const total = (...nums) => nums.reduce((s, n) => s + n, 0)   // oricâte argumente → array
total(1, 2, 3)   // 6

function createUser({ name, role = 'user' }) {                 // primești un obiect, scoți câmpurile
  return { name, role }
}
createUser({ name: 'Ana' })

Mai mult de 3 parametri? Treci la un singur obiect — nu mai contează ordinea și apelul se citește singur.

Tipurile de funcții

1. Function declaration

function sum(a, b) {
  return a + b
}

2. Function expression

const sum = function (a, b) {
  return a + b
}

3. Arrow function

const sum = (a, b) => a + b          // return implicit, o singură expresie
const square = x => x * x            // un parametru — fără paranteze
const getUser = () => ({ id: 1 })    // returnezi obiect — pune paranteze
const log = msg => {                 // mai multe linii — acolade + return explicit
  console.log(msg)
}

4. Metodă (funcție într-un obiect sau clasă)

const cart = {
  items: [],
  add(item) { this.items.push(item) },
}

5. Async function

async function loadUser(id) {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
}

Returnează mereu un Promise — vezi Async.

Diferențele care contează

	Declaration	Expression	Arrow	Metodă
Hoisting — o poți apela înainte de linia în care e scrisă	da	nu	nu	—
Propriul `this`	da (depinde de apel)	da	nu — ia `this` de afară	da = obiectul
`arguments`	da	da	nu	da
Poate fi folosită cu `new`	da	da	nu	nu
Return implicit	nu	nu	da (o expresie)	nu

Pe care o folosești când

Situație	Alegerea
funcție principală într-un modul, utilitar, componentă React	declaration (`function Card() {}`) — se citește clar, are hoisting
callback-uri: `map`, `filter`, `onClick`, `setTimeout`, `then`	arrow — scurt și păstrează `this` din exterior
funcții mici stocate în variabile, transmise ca valori	arrow
comportament al unui obiect / clasă care folosește `this`	metodă
orice lucrează cu `await`	async (în orice formă)
function expression clasic	rar azi — arrow l-a înlocuit

Funcțiile sunt valori

În JS funcțiile sunt first-class: le poți pune în variabile, trimite ca argumente, returna din alte funcții.

const shout = text => text.toUpperCase()
['a', 'b'].map(shout)          // trimisă ca argument → ['A', 'B']

const multiplier = factor => x => x * factor   // returnează o funcție
const double = multiplier(2)
double(5)                      // 10

O funcție care primește sau returnează funcții se numește higher-order function (map, filter, addEventListener).

Closure

O funcție ține minte variabilele din locul unde a fost creată, chiar și după ce acel loc „s-a terminat”. Asta e closure.

function createCounter() {
  let n = 0                // trăiește în continuare, „închisă” în funcția returnată
  return () => ++n
}

const next = createCounter()
next()   // 1
next()   // 2 — n a fost ținut minte

const other = createCounter()
other()  // 1 — fiecare apel creează un n nou

Closure stă la baza lui useState, a handler-elor de evenimente din React, a debounce, a modulelor.

Funcții pure

O funcție e pură dacă:

pentru același input dă mereu același output;
nu are efecte secundare (nu modifică variabile din afară, nu face request-uri, nu scrie în DOM).

const withVat = price => price * 1.19          // ✓ pură

let total = 0
const addToTotal = price => { total += price } // ✗ modifică ceva din afară

Componentele React trebuie să fie pure. Logica de business, la fel — se testează trivial.

Greșeli frecvente

Uiți return (în special în funcții cu acolade) → undefined.
Arrow care returnează obiect fără paranteze: () => { id: 1 } returnează undefined.
Apelezi în loc să transmiți: onClick={save()} rulează imediat; corect onClick={save} sau onClick={() => save(id)}.

Pe scurt

Funcție = cod cu nume, definit o dată, apelat de oricâte ori; parametri → return.
Declaration pentru funcții principale, arrow pentru callback-uri, metodă pentru obiecte.
Funcțiile sunt valori; closure = funcția ține minte unde a fost creată.