Web-Dev-For-Beginners/translations/ro/2-js-basics/2-functions-methods

Bazele JavaScript: Metode și Funcții

Sketchnote de Tomomi Imura

Quiz înainte de lecție

Quiz înainte de lecție

Scrierea aceluiași cod în mod repetat este una dintre cele mai frecvente frustrări ale programării. Funcțiile rezolvă această problemă, permițându-vă să împachetați codul în blocuri reutilizabile. Gândiți-vă la funcții ca la piesele standardizate care au revoluționat linia de asamblare a lui Henry Ford – odată ce creați o componentă fiabilă, o puteți folosi oriunde este nevoie, fără să o reconstruiți de la zero.

Funcțiile vă permit să grupați bucăți de cod pentru a le putea reutiliza în întregul program. În loc să copiați și să lipiți aceeași logică peste tot, puteți crea o funcție o singură dată și să o apelați ori de câte ori este necesar. Această abordare vă ajută să vă organizați codul și face actualizările mult mai ușoare.

În această lecție, veți învăța cum să creați propriile funcții, să transmiteți informații către ele și să obțineți rezultate utile înapoi. Veți descoperi diferența dintre funcții și metode, veți învăța abordări moderne de sintaxă și veți vedea cum funcțiile pot lucra împreună cu alte funcții. Vom construi aceste concepte pas cu pas.

🎥 Faceți clic pe imaginea de mai sus pentru un videoclip despre metode și funcții.

Puteți parcurge această lecție pe Microsoft Learn!

Funcții

O funcție este un bloc de cod autonom care îndeplinește o sarcină specifică. Ea încorporează logica pe care o puteți executa ori de câte ori este necesar.

În loc să scrieți același cod de mai multe ori în programul dvs., îl puteți împacheta într-o funcție și să o apelați ori de câte ori aveți nevoie. Această abordare menține codul curat și face actualizările mult mai ușoare. Gândiți-vă la provocarea de a modifica logica care este răspândită în 20 de locații diferite din codul dvs.

Este esențial să denumiți funcțiile într-un mod descriptiv. O funcție bine denumită comunică clar scopul său – când vedeți cancelTimer(), înțelegeți imediat ce face, la fel cum un buton etichetat clar vă spune exact ce se va întâmpla când faceți clic pe el.

Crearea și apelarea unei funcții

Să examinăm cum să creăm o funcție. Sintaxa urmează un model consecvent:

function nameOfFunction() { // function definition
 // function definition/body
}

Să descompunem acest lucru:

• Cuvântul cheie function îi spune JavaScript-ului "Hei, creez o funcție!"
• nameOfFunction este locul unde îi dați funcției un nume descriptiv
• Parantezele () sunt locul unde puteți adăuga parametri (vom ajunge la asta în curând)
• Acoladele {} conțin codul propriu-zis care rulează atunci când apelați funcția

Să creăm o funcție simplă de salut pentru a vedea acest lucru în acțiune:

function displayGreeting() {
  console.log('Hello, world!');
}

Această funcție afișează "Hello, world!" în consolă. Odată ce ați definit-o, o puteți folosi de câte ori este necesar.

Pentru a executa (sau "apela") funcția, scrieți numele acesteia urmat de paranteze. JavaScript vă permite să definiți funcția înainte sau după ce o apelați – motorul JavaScript va gestiona ordinea execuției.

// calling our function
displayGreeting();

Când rulați această linie, se execută tot codul din funcția displayGreeting, afișând "Hello, world!" în consola browserului. Puteți apela această funcție în mod repetat.

Notă: Ați folosit metode pe parcursul acestor lecții. console.log() este o metodă – practic o funcție care aparține obiectului console. Diferența cheie este că metodele sunt atașate obiectelor, în timp ce funcțiile sunt independente. Mulți dezvoltatori folosesc acești termeni interschimbabil în conversațiile informale.

Cele mai bune practici pentru funcții

Iată câteva sfaturi pentru a vă ajuta să scrieți funcții excelente:

• Dați funcțiilor nume clare și descriptive – viitorul vostru vă va mulțumi!
• Folosiți camelCasing pentru nume compuse din mai multe cuvinte (cum ar fi calculateTotal în loc de calculate_total)
• Fiecare funcție să fie concentrată pe realizarea unui singur lucru bine

Transmiterea informațiilor către o funcție

Funcția noastră displayGreeting este limitată – poate afișa doar "Hello, world!" pentru toată lumea. Parametrii ne permit să facem funcțiile mai flexibile și mai utile.

Parametrii acționează ca niște locuri rezervate unde puteți introduce valori diferite de fiecare dată când utilizați funcția. În acest fel, aceeași funcție poate lucra cu informații diferite la fiecare apel.

Listați parametrii în interiorul parantezelor atunci când definiți funcția, separând mai mulți parametri cu virgule:

function name(param, param2, param3) {

}

Fiecare parametru acționează ca un loc rezervat – când cineva apelează funcția, va furniza valori reale care vor fi introduse în aceste locuri.

Să actualizăm funcția noastră de salut pentru a accepta numele cuiva:

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Observați cum folosim ghilimele inversate (`) și ${} pentru a introduce numele direct în mesajul nostru – aceasta se numește un literal de șablon și este o modalitate foarte utilă de a construi șiruri de caractere cu variabile amestecate.

Acum, când apelăm funcția, putem transmite orice nume:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

JavaScript ia șirul 'Christopher', îl atribuie parametrului name și creează mesajul personalizat "Hello, Christopher!"

Valori implicite

Ce se întâmplă dacă dorim să facem unii parametri opționali? Aici intervin valorile implicite!

Să presupunem că dorim ca oamenii să poată personaliza cuvântul de salut, dar dacă nu specifică unul, vom folosi "Hello" ca opțiune implicită. Puteți seta valori implicite folosind semnul egal, la fel ca atunci când setați o variabilă:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Aici, name este încă necesar, dar salutation are o valoare de rezervă 'Hello' dacă nimeni nu oferă un alt salut.

Acum putem apela această funcție în două moduri diferite:

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

În primul apel, JavaScript folosește implicit "Hello", deoarece nu am specificat un salut. În al doilea apel, folosește "Hi", personalizat de noi. Această flexibilitate face funcțiile adaptabile la diferite scenarii.

Valori returnate

Funcțiile noastre de până acum doar au afișat mesaje în consolă, dar ce se întâmplă dacă doriți ca o funcție să calculeze ceva și să vă dea rezultatul înapoi?

Aici intervin valorile returnate. În loc să afișeze ceva, o funcție poate să vă înapoieze o valoare pe care o puteți stoca într-o variabilă sau folosi în alte părți ale codului.

Pentru a trimite o valoare înapoi, folosiți cuvântul cheie return urmat de ceea ce doriți să returnați:

return myVariable;

Iată ceva important: când o funcție ajunge la o instrucțiune return, se oprește imediat din rulare și trimite acea valoare înapoi celui care a apelat-o.

Să modificăm funcția noastră de salut pentru a returna mesajul în loc să-l afișeze:

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Acum, în loc să afișeze salutul, această funcție creează mesajul și ni-l înapoiază.

Pentru a folosi valoarea returnată, o putem stoca într-o variabilă, la fel ca orice altă valoare:

const greetingMessage = createGreetingMessage('Christopher');

Acum greetingMessage conține "Hello, Christopher" și îl putem folosi oriunde în codul nostru – pentru a-l afișa pe o pagină web, a-l include într-un e-mail sau a-l transmite unei alte funcții.

Funcții ca parametri pentru funcții

Funcțiile pot fi transmise ca parametri altor funcții. Deși acest concept poate părea complex la început, este o caracteristică puternică ce permite modele flexibile de programare.

Acest model este foarte comun atunci când doriți să spuneți "când se întâmplă ceva, execută acest alt lucru". De exemplu, "când cronometrul se termină, rulează acest cod" sau "când utilizatorul face clic pe buton, apelează această funcție."

Să analizăm setTimeout, care este o funcție încorporată ce așteaptă o anumită perioadă de timp și apoi rulează un cod. Trebuie să îi spunem ce cod să ruleze – un caz perfect pentru transmiterea unei funcții!

Încercați acest cod – după 3 secunde, veți vedea un mesaj:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Observați cum transmitem displayDone (fără paranteze) către setTimeout. Nu apelăm funcția noi înșine – o predăm lui setTimeout și spunem "apelează aceasta în 3 secunde."

Funcții anonime

Uneori aveți nevoie de o funcție doar pentru un singur lucru și nu doriți să îi dați un nume. Gândiți-vă – dacă folosiți o funcție doar o dată, de ce să vă aglomerați codul cu un nume suplimentar?

JavaScript vă permite să creați funcții anonime – funcții fără nume pe care le puteți defini exact acolo unde aveți nevoie.

Iată cum putem rescrie exemplul nostru cu cronometrul folosind o funcție anonimă:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Acest lucru obține același rezultat, dar funcția este definită direct în apelul setTimeout, eliminând necesitatea unei declarații separate a funcției.

Funcții săgeată

JavaScript modern are o modalitate și mai scurtă de a scrie funcții, numită funcții săgeată. Acestea folosesc => (care arată ca o săgeată – nu-i așa?) și sunt foarte populare printre dezvoltatori.

Funcțiile săgeată vă permit să săriți peste cuvântul cheie function și să scrieți cod mai concis.

Iată exemplul nostru cu cronometrul folosind o funcție săgeată:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

Parantezele () sunt locul unde ar merge parametrii (goale în acest caz), apoi urmează săgeata =>, și în final corpul funcției în acolade. Acest lucru oferă aceeași funcționalitate cu o sintaxă mai concisă.

Când să folosiți fiecare strategie

Când ar trebui să folosiți fiecare abordare? O regulă practică: dacă veți folosi funcția de mai multe ori, dați-i un nume și definiți-o separat. Dacă este pentru o utilizare specifică, luați în considerare o funcție anonimă. Atât funcțiile săgeată, cât și sintaxa tradițională sunt alegeri valabile, deși funcțiile săgeată sunt predominante în bazele de cod moderne.

---

🚀 Provocare

Puteți explica într-o propoziție diferența dintre funcții și metode? Încercați!

Provocarea Agentului GitHub Copilot 🚀

Utilizați modul Agent pentru a finaliza următoarea provocare:

Descriere: Creați o bibliotecă de utilități matematice care demonstrează diferite concepte de funcții acoperite în această lecție, inclusiv parametri, valori implicite, valori returnate și funcții săgeată.

Cerere: Creați un fișier JavaScript numit mathUtils.js care să conțină următoarele funcții:

1. O funcție add care primește doi parametri și returnează suma lor
2. O funcție multiply cu valori implicite pentru parametri (al doilea parametru are valoarea implicită 1)
3. O funcție săgeată square care primește un număr și returnează pătratul acestuia
4. O funcție calculate care acceptă o altă funcție ca parametru și două numere, apoi aplică funcția acestor numere
5. Demonstrați apelarea fiecărei funcții cu cazuri de testare adecvate

Aflați mai multe despre modul agent aici.

Quiz după lecție

Quiz după lecție

Recapitulare și studiu individual

Merită să citiți puțin mai mult despre funcțiile săgeată, deoarece sunt din ce în ce mai utilizate în bazele de cod. Exersați scrierea unei funcții, apoi rescrierea acesteia cu această sintaxă.

Temă

Distracție cu Funcții

---

Declinare de responsabilitate:
Acest document a fost tradus folosind serviciul de traducere AI Co-op Translator. Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de oameni. Nu ne asumăm responsabilitatea pentru neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.