Variabile și tipuri de date în JavaScript. Partea 3 Curs JavaScript de la începător la avansat în 10 postări de blog

Aceasta este partea 3 a seriei de postări de blog JavaScript, care vă va ajuta să explorați subiectul variabilelor și tipurilor de date în JavaScript. Până la sfârșitul acestei serii, veți cunoaște toate elementele de bază pe care trebuie să le cunoașteți pentru a începe să codificați în JavaScript. Fără prea mult timp, să începem cu al treilea tutorial.

Variabile și tipuri de date în JavaScript – cuprins:

1. Variabile
2. Tipuri de date de bază în JavaScript

În această postare de blog vom continua cu locul în care am plecat de la a doua postare de blog. În această etapă, ar trebui să aveți browserul Google Chrome deschis și, mai precis, să aveți deschisă consola JavaScript. Dacă din anumite motive le-ați închis, ar fi un moment bun să le deschideți înapoi.

Dacă sunteți pe un Mac, comanda rapidă de la tastatură pentru a deschide consola este să apăsați „Option + Command + J”, după ce deschideți Chrome. Dacă utilizați un dispozitiv Windows, puteți utiliza comanda rapidă de la tastatură „Control + Shift + J”, pentru a deschide Consola JavaScript, odată ce deschideți Chrome. Sau puteți accesa și meniul din partea de sus și accesați Vizualizare -> Dezvoltator -> Consola JavaScript.

Variabile

Variabilele din JavaScript sau din orice alt limbaj de programare sunt extrem de comune. Și este pentru un motiv întemeiat. Variabilele au un rol foarte critic în programare. Pe scurt, variabilele vă permit să stocați unele date pentru a muta datele, a le modifica, a le actualiza sau a le șterge în programul dvs. De fapt, este un concept atât de important încât există 3 moduri prin care poți crea variabile. Lingoul de programare pentru crearea variabilelor se numește „declararea variabilelor”, ceea ce înseamnă practic că declarăm o variabilă în memoria computerului.

Pentru a crea variabilele vom folosi unul dintre cele 3 cuvinte cheie și acestea sunt: ​​„var”, „let” și „const”. Unul dintre primele lucruri pe care ar trebui să le știi despre aceste 3 cuvinte cheie este că până în 2015 se folosea doar cuvântul cheie „var”, iar cuvintele cheie „let” și „const” au fost introduse cu un standard JavaScript numit ES6 sau ES2015.

Dacă habar n-ai ce ES6 sau ES2015, iată ce ar trebui să știi despre el. Când JavaScript a apărut pentru prima dată, diferite companii au implementat diferite versiuni de JavaScript și trebuia să existe un standard, pentru ca codul tău să ruleze previzibil și fiabil în toate browserele majore. Așa că o organizație numită ECMA (Asociația Europeană pentru Producția de Calculatoare) a venit cu un set de standarde JavaScript pe care browserele ar trebui să le implementeze. Astfel încât, atâta timp cât urmați acele standarde atunci când scrieți JavaScript, codul dvs. ar trebui să ruleze previzibil în conformitate cu aceste standarde. Acest standard se numește EcmaScript și au lansat standardele actualizate din 1997. Și din 2015, ei au lansat aceste standarde anual și, prin urmare, cel mai recent standard lansat se numește ES2021 de la scrierea acestei postări pe blog.

Dar nu toate versiunile sunt la fel, unele diferențe de versiuni nu sunt la fel de mari, în timp ce unele introduc schimbări destul de majore în limbaj. Ultimele schimbări majore au avut loc cu ES2015 numit și ES6, deoarece era lansarea versiunii șase a standardizării ECMAScript. Una dintre schimbările semnificative a venit la declarațiile variabilelor.

Înainte de ES6, era folosit doar cuvântul cheie „var” și era singura modalitate de a declara variabile, de unde și numele „var”. Cuvântul cheie var a venit cu flexibilități care ar putea cauza probleme nedorite. Deoarece a fost semnificativ flexibil în utilizare, era mai ușor să faci greșeli cu variabile dacă erai mai puțin atent decât ar trebui să fii. De exemplu, dacă ați declarat o variabilă numită „user1”, nu puteți re-declara o variabilă numită user1 cu noile cuvinte „let” și „const”, dar puteți face acest lucru cu cuvântul cheie „var”. Și dacă uitați că aveți deja un user1 în programul dvs., a doua oară când declarați user1 cu informații despre alt utilizator, ați suprascrie informațiile reale ale primului utilizator, ceea ce ar șterge efectiv informațiile primului utilizator.

// this can cause confusion
var user1 = "John";
var user1 = "Jack";
// if you try to do the same thing 
// with let or const you will get an error
let user1 = "John";
let user1 = "Jack";
// likewise you will also get an error
// if you try to do the same thing with the const keyword
const user1 = "John";
const user1 = "Jack";

Dar nu este ca și cum nu veți vedea cuvântul cheie „var” folosit nicăieri, cu siguranță îl veți vedea în special la unele cursuri JavaScript de nivel începător. Mai ales dacă au câțiva ani, există o mulțime de tutoriale care vă vor arăta în continuare vechiul mod de a scrie JavaScript. Dar realitatea este că, pur și simplu, nu mai este cea mai bună practică să mai folosești asta. În schimb, cea mai bună practică este să folosiți cuvinte cheie „let” sau „const” atunci când declarați variabile, în funcție de nevoile dvs. Dar despre ce nevoi vorbim? Pe scurt, dacă intenționați să schimbați valoarea într-o variabilă, veți dori să utilizați cuvântul cheie „let”, dacă știți că nu veți schimba valoarea într-o variabilă, veți dori să mergeți cu „const” in schimb. Să vedem câteva exemple de declarații de variabile folosind atât let, cât și const.

// we can use "let" when we want to track the game level of the user
// because we know that it will change
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// we can use the "const" keyword when declaring user ID
// because we know that we won't change it
const userId = 1010101999;

Dacă ați observat și din codul de mai sus, cu cele mai recente bune practici, scriem cuvintele cheie de declarare o singură dată și facem asta atunci când declarăm prima dată variabila. Când vrem să schimbăm valoarea din interiorul variabilei mai târziu, nu folosim niciun cuvânt cheie înainte de numele variabilei.

Când dorim să accesăm datele pe care le dețin aceste variabile sau constante, putem pur și simplu să le folosim numele. De exemplu, dacă vrem să arătăm utilizatorului nivelul de joc și id-ul de utilizator, vom folosi următorul cod:

// we can add the userID to the end of the sentence with a plus sign
// we will explain this later on in the tutorial
alert("Your user ID is: " + userId);
// we can also show the user their game level like the following
alert("Your current game level is: " + gameLevel);
// alternatively we can directly display 
// the contents of the variables by showing them inside an alert
alert(userId);
alert(gameLevel);

Rularea ultimelor două blocuri de cod ar oferi următoarele rezultate:

Cum să-ți denumești variabilele?

Când vă denumiți variabilele, există anumite reguli și convenții pe care ar trebui să le luați în considerare. Prima considerație este că ce caractere pot folosi pentru a-ți denumi variabilele? Pot începe sau se termină cu un număr? Există un adevăr comun nespus în denumirea variabilelor dvs.? Să răspundem la toate acestea și la multe altele.

Diferite limbaje de programare au convenții diferite pentru denumirea variabilelor. În JavaScript convenția este de a le numi cu ceea ce se numește „carcasa de cămilă” și merge așa. Dacă numele variabilei are un singur cuvânt, atunci scrieți acel cuvânt cu litere mici. Dacă în numele variabilei sunt mai multe cuvinte, atunci scrieți primul cuvânt cu majusculele mai mici și scrieți cu majuscule toate cuvintele ulterioare și le scrieți fără spații sau alte semne. De exemplu, dacă facem un joc, am putea numi variabilele ca atare:

// a single word variable
let strength = 50;
// a descriptive name that includes multiple words
let numberOfArrowsLeft = 145;

Pe lângă utilizarea caracterelor alfabetice, putem folosi și numere, semnul dolar și semnul de subliniere în numele variabilelor. Este important să rețineți că nu puteți începe numele variabilei cu un număr, dar îl puteți încheia cu un număr.

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

Rețineți că doar pentru că este posibil, nu vrem să ne denumim variabilele cu nume neclare sau cu simboluri. Și acesta este un alt subiect în sine. La denumirea variabilelor, convenția este de a avea nume clare și descriptive. De exemplu, dacă vom numi o variabilă pentru a denota câte săgeți au rămas într-o pungă de arcași, ar trebui să folosim un nume descriptiv precum cel folosit în exemplul de mai sus. Dacă ar fi să folosim doar:

let x = 145;

Acest nume nu ne-ar spune nimic despre valoarea pe care o deține. Și chiar și la câteva zile după ce am scris acest cod, ar trebui să citim codul din jur pentru a înțelege ce ar putea însemna acea variabilă. De aceea, atât pentru claritatea dvs. atunci când scrieți codul, cât și pentru viitorul vostru care ar putea revizui codul, este foarte important să vă obișnuiți să vă numiți variabilele într-un mod clar și descriptiv. Acest lucru va deveni și mai important atunci când începeți să lucrați cu alte persoane și le arătați codul dvs.

În acest moment, poate vă gândiți că: Este grozav că putem muta datele și chiar le putem schimba folosind variabile. Dar despre ce date vorbim aici? De ce am pus piesele in cotatie si unele piese nu sunt in cotatie? Pentru a răspunde la toate acestea și la multe altele, să vedem tipurile de date de bază în JavaScript.

Tipuri de date de bază în JavaScript

Diferite tipuri de date sunt bune pentru a face lucruri diferite. În acest tutorial despre tipurile de date de bază în JavaScript, vom vedea cele mai elementare 3 tipuri de date care sunt utilizate în mod obișnuit în JavaScript. Mai târziu în serie vom afla despre alte tipuri de date în JavaScript. Odată ce învățați aceste primele 3 tipuri de date de bază, va fi mult mai ușor să învățați celelalte tipuri de date. Cele 3 tipuri de date pe care le vom vedea în acest tutorial sunt: ​​șiruri, numere și booleeni. Fără alte prelungiri, să începem cu primul.

Siruri de caractere

Dacă ați urmat de la început tutorialul, ați lucrat deja cu tipul de date șir! Când am scris o alertă care spunea „Bună, lume!” care folosea tipul de date șir pentru a stoca textul pe care l-am scris. În JavaScript există 3 moduri de a reprezenta șiruri. Prima este să vă înconjurați textul cu ghilimele duble. Al doilea este să vă înconjurați textul cu ghilimele simple. Iar al treilea este să vă înconjurați textul cu căpușe din spate. Toate trei arată astfel:

const string1 = "Some text here.";
const string2 = 'Some text here.';
const string3 = `Some text here.`;

După cum puteți vedea, cel cu „căpușele din spate” arată destul de asemănător cu ghilimele unice, dar este ușor relaxat. Utilizarea tick-urilor din spate pentru a crea șiruri este o caracteristică care este introdusă cu ES6, pentru a facilita lucrul cu date textuale. Oferă multiple avantaje față de celelalte două anterioare. Prin convenție, puteți vedea că ghilimelele duble sau căpușele din spate sunt folosite mai des. Puteți găsi bifoanele din spate pe tasta din stânga a numărului 1, pe tastatură.

Utilizarea ghilimelelor duble pare mai familiară și este mai ușor de înțeles la prima vedere, dar ghilimelele din spate vin cu mai multe avantaje în general. În acest exemplu, toate cele 3 funcționează în același mod, deoarece este un exemplu simplu. Pentru a le afișa pe toate trei în același timp, sau chiar în aceeași linie, un lucru pe care îl putem face este să le scriem numele și să folosim semnul plus între ele, într-un fel adăugând șirurile unul altuia.

alert(string1 + string2 + string3);

După cum puteți vedea, toate cele 3 sunt afișate imediat după ce una dintre ele se termină. Acest lucru se datorează faptului că tocmai i-a spus interpretului să adauge șirurile unul altuia. Dacă vrem să adăugăm spații între ele, putem întotdeauna adăuga acel spațiu cu un alt șir.

alert(string1 + " " + string2 + " " + string3);

De asemenea, putem verifica datele unei variabile scriind „typeof” în fața acesteia. De exemplu:

alert(typeof string1);

Numerele

Când lucrăm cu numere în JavaScript, folosim în general tipul de date „Număr”. Este cel mai simplu cu care să începeți și nu are aproape nicio curbă de învățare.

Când tastați un număr, acesta este reprezentat în tipul de număr. Și dacă atribuim acel număr unei variabile sau unei constante, vor avea și tipul de date al numărului.

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

Pe lângă numerele obișnuite pe care le avem, JavaScript oferă și alte funcții care ne pot ajuta să scriem un cod mai sigur și mai previzibil. De exemplu, în JavaScript putem avea ceva numit „Infinity” și este exact așa cum sună. Mai mult, poate fi infinit pozitiv și infinit negativ. Să vedem cum arată cu un exemplu.

// we can divide by zero and that does not throw an error
// instead it returns Inifinity
alert(13 / 0);

// similarly we can also get negative infinity
alert(-25 / 0);

După cum ați văzut deja cu câteva exemple, putem face și operații aritmetice cu numere. De la adunarea de bază, scăderea, înmulțirea, împărțirea până la și mai mult programarea operațiilor aritmetice specifice. Vom afla mai multe despre ele în următorul tutorial.

booleene

Booleanele sunt extrem de comune în programare. De cele mai multe ori nu le vom folosi în mod explicit numele, dar vom folosi proprietatea lor simplă sub capotă. Un boolean poate avea două valori: „adevărat” și „fals” și sunt exact așa cum sună. De mult timp te vei trezi să scrii cod pentru a face o comparație și o concluzie bazată pe rezultatul acelei comparații.

De multe ori aceste comparații sunt bazate pe scenarii din viața reală și urmează o logică simplă. Lumina este aprinsă sau stinsă? Plouă afară? Ți-e foame? Acest număr este mai mare decât celălalt număr? Este acest paragraf mai lung decât următorul? Utilizatorul este pe un ecran mare?

Sunt de multe ori în care nu doriți doar să aveți o valoare numerică sau o valoare de șir pentru lucruri, ci de fapt doriți un răspuns da sau nu. Pe scurt, în acele momente, vom folosi tipul de date boolean.

// is the first number bigger than the second one
alert(13 > 12);

// check the variable type
let isRainyOutside = true;
alert(typeof isRainyOutside);

Rularea acestui cod ne va oferi următoarea ieșire:

Acum știți despre variabile și tipuri de date în JavaScript. În următoarea postare pe blog vom folosi aceste tipuri de date pentru a începe să luăm decizii în codul nostru și multe altele!

Dacă vă place conținutul nostru, nu uitați să vă alăturați comunității Facebook!

Autor: Robert Whitney

Expert JavaScript și instructor care antrenează departamentele IT. Scopul său principal este de a crește productivitatea echipei, învățându-i pe alții cum să coopereze eficient în timp ce codifică.

Vizualizați toate postările

Curs JavaScript de la începător la avansat în 10 postări de blog:

1. Cum să începeți codarea în JavaScript?
2. Bazele JavaScript
3. Variabile și diferite tipuri de date în JavaScript
4. Fragmente și structuri de control
5. bucle while și bucle for
6. matrice Java
7. Funcții JavaScript
8. obiecte JavaScript
9. Metode JavaScript și multe altele
10. Rezumatul cursului JavaScript