Variabilele sunt un concept fundamental în orice limbaj de programare. În JavaScript, puteți declara variabile utilizând cuvintele cheie var, const sau let.

În acest articol, veți afla de ce folosim variabile, cum să le utilizați și diferențele dintre const, let și var.

Pentru ce sunt utilizate variabilele în JavaScript?

În contextul codării, datele sunt informații pe care le folosim în programele noastre de computer. De exemplu, numele dvs. de utilizator Twitter este o bucată de date.

O mare parte din programare este despre manipularea sau afișarea datelor. Pentru a face acest lucru, programatorii au nevoie de un mod de stocare și evidență a datelor. Să demonstrăm acest lucru cu un exemplu.

Mai întâi vom deschide consola noastră JavaScript. Pentru a lansa consola JavaScript pe Chrome, puteți utiliza comanda rapidă Ctrl + Shift + J pe Windows și Linux. Pentru Mac, utilizați Cmd + Opțiune + J.

Odată ce consola a fost lansată, gândiți-vă la vârsta actuală a câinelui sau pisicii (sau la orice număr similar dacă nu aveți animale de companie) și introduceți-o în consolă.

4

Acum, dacă vrem să ne referim din nou la acest număr? Va trebui să o tastăm pentru a doua oară.

Avem nevoie de o modalitate de a ne referi la această bucată de date, astfel încât să o putem refolosi în tot programul nostru.

Introducerea variabilelor în JavaScript

O analogie utilă este să ne gândim la variabile ca la etichete pentru valorile noastre. Gândiți-vă la un recipient cu afine cu o etichetă pe ea marcată cu afine. În acest exemplu, variabila, afine, indică o valoare, care este afinele în sine.

Să declarăm o variabilă, vârstă și să folosim operatorul de atribuire (semnul egal) pentru a atribui valoarea noastră, 4, acestei variabile. Vom folosi cuvântul cheie var.

var age = 4

Variabilele sunt modul în care programatorii dau un nume unei valori, astfel încât să o putem reutiliza, actualiza sau pur și simplu să o urmărim. Variabilele pot fi utilizate pentru a stoca orice tip JavaScript.

Acum că am atribuit această valoare vârstei variabile, ne putem referi la această valoare mai târziu. Dacă introduceți acum vârsta variabilă în consolă, veți avea valoarea 4 returnată înapoi.

Cum se utilizează cuvântul cheie var în JavaScript

Cuvintele cheie din JavaScript sunt cuvinte rezervate. Când utilizați cuvântul cheie var, îi spuneți JavaScript că veți declara o variabilă.

Atunci când utilizați cuvântul cheie var, variabilele pot fi realocate. Vom demonstra acest lucru declarând mai întâi o nouă variabilă, un nume și atribuindu-l valorii lui Madison.

var name="Madison"

Apoi, vom reatribui această variabilă pentru a indica valoarea unui alt nume, Ben.

name="Ben"

Acum dacă alergi console.log(name) veți obține rezultatul lui Ben.

Când utilizați cuvântul cheie var, variabilele pot fi declarate și fără valoare inițială.

var year

Aici, am declarat o variabilă year dar nu indică nicio valoare. Mai târziu, dacă vrem să indice o valoare, putem folosi operatorul de atribuire pentru a face acest lucru.

Year = 2020

Acum, anul nostru variabil va indica valoarea anului 2020.

Când a fost creat pentru prima dată JavaScript, singura modalitate de a declara o variabilă a fost folosind cuvântul cheie var.

În actualizările recente la JavaScript (ECMAScript2015), const și let au fost create ca alte cuvinte cheie pentru variabile declarate.

Pentru a explica de ce erau necesare, vom analiza problemele cu cuvântul cheie var. Pentru a analiza aceste probleme, vom afla ce anvergură are.

Ce este domeniul de aplicare?

Domeniul de aplicare se referă la locul în care sunt disponibile variabile în cod. Când o variabilă este cu scop global, asta înseamnă că este disponibil oriunde în programul dvs. Să vedem un exemplu.

Luați următorul cod și introduceți-l în consola dvs.

var name = ‘Bob’
function printName() {
    console.log(name)
}
printName()

Aici am creat și am numit o funcție, printName, care va imprima valoarea numelui var, Madison. Veți vedea acest lucru tipărit în consola dvs.

Deoarece varul nostru a fost creat în afara funcției, acesta este cuprins la nivel global. Aceasta înseamnă că este disponibil oriunde în codul dvs., inclusiv în interiorul oricărei funcții. Acesta este motivul pentru care funcția noastră, printName, are acces la numele var.

Să creăm acum o variabilă cu funcții. Aceasta înseamnă că variabila este accesibilă numai în interiorul funcției în care a fost creată. Următorul exemplu va fi foarte asemănător cu codul de mai sus, dar cu o plasare diferită a variabilei.

function printYear() {
 var year = 2020
}
console.log(year)

Acum, în consola noastră vom primi o eroare: year is not defined. Acest lucru se datorează faptului că var var este funcțional. Adică, există doar în interiorul funcției în care a fost creată. Nu avem acces la ea în afara funcției, care este locul în care încercăm să o accesăm atunci când rulăm console.log.

Variabilele cu funcție sunt utile pentru programatori, deoarece de multe ori dorim să creăm variabile care sunt utile sau necesare numai în cadrul unei anumite funcții. Crearea variabilelor globale poate duce, de asemenea, la erori sau greșeli.

Acum, că avem o înțelegere de bază a domeniului de aplicare, putem reveni la discuția noastră despre problemele cu cuvântul cheie var.

Probleme cu cuvântul cheie var din JavaScript

Să ne uităm la un alt exemplu.

Vom crea o variabilă, age. Apoi vom scrie o declarație if care verifică dacă vârsta are o valoare și, dacă are, returnează un console.log cu numărul care este dublu față de această vârstă.

Acesta este un exemplu simplificat, dar vom verifica mai întâi dacă vârsta are o valoare, deoarece vrem să ne asigurăm că adăugăm la o valoare validă.

var age = 27
If (age) {
 var doubleAge = age + age
 console.log(`Double your current age is ${yearPlusTwenty}`)
}

Acum, în consola noastră, veți vedea Double your current age is 47.

Variabila noastră, doubleAge, este acum o variabilă globală. Dacă intri doubleAge în consola dvs., veți vedea că aveți acces la ea.

doubleAge
47

Așa cum s-a discutat anterior, variabilele create cu cuvântul cheie var sunt cuprinse în funcție. Variabilele cu scop funcțional există doar în interiorul funcției în care au fost create.

Dar din moment ce doubleAge variabila nu se află în interiorul unei funcții, ceea ce înseamnă că a fost cuprinsă la nivel global. Adică doubleAge variabila este acum disponibilă oriunde în codul nostru.

Problema este că, doubleAge este doar o variabilă pe care am folosit-o odată în interiorul nostru if statementși nu avem neapărat nevoie de acesta disponibil peste tot în codul nostru. A „scurs” în afara declarației if în care a fost creată, chiar dacă nu am avut nevoie de ea.

var age = 27
if (age) {
 //We need our doubleAge var only in this block of code in between our curley brackets. 
    var doubleAge = age + age
    console.log(`Double your current age is ${yearPlusTwenty}`)
    
}

doubleAge
47
//our doubleAge var is available outside of these curly brackets, on the global sbope.

Ar fi grozav dacă am avea un mod de a crea o variabilă care * numai * exista în instrucțiunea if în care a fost creată. Cu alte cuvinte, blocul de cod care există între parantezele buclate.

var age = 27
If (age) {
 //We want our variable to only exist here, where we will use it
 var doubleAge = age + age
 console.log(`Double your current age is ${yearPlusTwenty}`)
}

Pentru a rezolva această problemă, cuvintele cheie const și let au fost introduse în JavaScript.

Cum se utilizează cuvântul cheie const în JavaScript

const funcționează similar cu var, dar cu câteva diferențe mari.

Primul, const este bloc-coped, în timp ce var este funcţie-scoped.

Ce este un bloc?

A bloc se referă la orice spațiu dintre un suport de deschidere și de închidere. Acest lucru ar putea părea confuz la început. Să scriem exemplul nostru anterior, dar de data aceasta folosind const în loc de let atunci când declarăm al nostru doubleAge variabil.

var age = 27
If (age) {
 const doubleAge = age + age
 console.log(`Double your current age is ${yearPlusTwenty}`)
}

Acum, tastați doubleAge în consola dvs. și apăsați Enter. Ar trebui să primiți o eroare, doubleAge is not defined. Acest lucru se datorează faptului că const are un domeniu de blocare: există doar în blocul în care a fost definit.

doubleAge variabila este „prinsă” în interiorul celor două paranteze în care a fost definit. Codul care se află și în interiorul acelor paranteze poate accesa doubleAge, dar niciun cod în afara acestuia nu poate.

Prin utilizarea const in loc de var, problema noastră anterioară este rezolvată. Al nostru doubleAge var nu mai „scapă” inutil în sfera noastră globală. În schimb, există doar în interiorul blocului în care a fost creat.

Cum funcționează variabilele cu scop de bloc în contextul funcțiilor? Pentru a afla despre acest lucru, să creăm și apoi să apelăm o funcție, returnX.

function returnX() {
 const x = 1
 return x
}
returnX()

Apelând această funcție returnX, putem vedea că funcția noastră returnează valoarea lui x, care este 1.

Dacă vom introduce în continuare x, ne vom întoarce referenceError: x is not defined. Acest lucru se datorează faptului că funcțiile sunt, de asemenea, considerate blocuri, astfel încât const x va exista doar în cadrul funcției.

Următorul lucru pe care trebuie să-l știți despre const este că nu poate fi declarat decât o singură dată. Introduceți acest cod în consola dvs.:

const y = 1
const y = 2

Ar trebui să vedeți o eroare, Identifier 'x' has already been declared.

Aceasta este o diferență între var și const. În timp ce const vă va da o eroare, anunțându-vă că ați declarat deja această variabilă, cuvântul cheie var nu.

var x = 1
var x = 2

Variabila x va indica valoarea 2 fără o eroare. Acest lucru vă poate provoca erori ca programator, deoarece probabil nu ați intenționat să vă reatribuiți valoarea la o nouă variabilă. Astfel, utilizarea const vă poate ajuta deoarece veți primi o eroare dacă încercați din greșeală să reatribuiți o variabilă.

Aceasta este o forță a const cuvânt cheie care a fost introdus ca un mod actualizat și mai bun de a crea variabile în JavaScript. Totuși, ce zici de vremurile în care tu do vrei să-ți actualizezi variabila?

Să vedem un exemplu care arată de ce am vrea să facem acest lucru.

Să declarăm o variabilă, adult, și setați-l la false. Vom crea, de asemenea, un age variabilă și setați-l la 20.

const adult = false

const age = 20.

Să presupunem că dorim să verificăm vârsta unui utilizator și să setăm variabila noastră adultă la fals dacă vârsta depășește 18 ani. Putem scrie o declarație if pentru a face acest lucru.

if (age > 18) {
 adult = true   
}

Ce se întâmplă când rulăm acest cod?

Aici vom vedea Error: Assignment to constant variable.

Acest lucru se datorează faptului că, în conformitate cu regulile din const, nu putem redeclara această variabilă. Adică variabila noastră age indică deja valoarea adevăratului și nu o putem îndrepta acum spre altceva.

Dacă imprimăm adult din nou, putem vedea că a rămas la fel și deține în continuare valoarea lui false.

Nu ne putem reatribui age variabilă și const funcționează așa cum era de așteptat. Totuși, ce se întâmplă dacă noi do doriți să reatribuiți această variabilă?

De multe ori programatorii vor dori să poată redeclara variabilele lor.

Aici intervine al treilea cuvânt cheie, let,

Cum se folosește cuvântul cheie let în JavaScript

Mai întâi să trecem în revistă cum let este similar cu const.

Let, ca const, are un domeniu de bloc. Dacă ați înlocuit const cu let in a noastră de mai sus doubleAge de exemplu, ar funcționa la fel.

In orice caz, let difera de const într-un mod fundamental. Variabile declarate cu let cuvântul cheie poate fi redeclarat, în timp ce variabilele create cu const cuvântul cheie nu poate. Să trecem peste un exemplu.

Folosind același exemplu de mai sus, înlocuiți const cu let. Ne vom păstra variabila vârstă ca const cu valoarea de 20.

let adult = false
const age = 20
if (age > 18) {
    adult = true
}

Acum, dacă scriem adult, în loc să obținem o eroare așa cum am făcut anterior, vom vedea rezultatul true.

Prin utilizarea let cuvânt cheie, ne-am actualizat variabila pentru a indica valoarea true cum am vrut. Uneori, în programare, vom dori să ne actualizăm variabila în funcție de anumite date pe care le primim. Putem folosi let pentru a face acest lucru.

Înfășurându-se

Pe scurt, am aflat că variabilele sunt utilizate pentru a urmări și reutiliza datele din programele noastre de computer. Domeniul de aplicare se referă la locul în care sunt disponibile variabile în cod pentru a fi utilizate.

Variabilele pot fi declarate folosind var, const sau let. Var este funcțional, în timp ce const și let sunt blocate. Variabilele Const nu pot fi realocate, în timp ce variabilele let pot fi.

Var, const și let pot fi confuze la început. Vă poate ajuta să citiți diferite tutoriale pe ele, precum și să vă testați propriul cod în diferite moduri pentru a vă consolida înțelegerea.

A avea o bază solidă de var, const și let vă va ajuta nu doar la începutul carierei dvs. JavaScript, ci pe întregul său.

Mulțumesc că ai citit!

Dacă ți-a plăcut această postare, înscrie-te pentru lista mea de e-mailuri unde trimit ultimele mele articole și anunț întâlniri pentru clubul meu de carte de codificare.

Dacă aveți feedback sau întrebări cu privire la această postare, nu ezitați să-mi trimiteți un Tweet @madisonkanna.