For det meste behøver en JavaScript applikation at arbejde med infromation. Her er to eksempler:

1. En online-butik – her vil informationen inkludere varer der sælges og hvad der er i indkøbskurven.
2. En chat applikation – her vil informationen inkludere brugere, beskeder og meget mere.

Du bruger variable til at gemme disse informationer.

En variabel

En variabel er et “navngivet lager” til data. Du kan bruge variable til at opbevare information om produkter, besøgende o.lign.

For at oprette en variabel i JavaScript bruger du nøgleordet let.

Udtrykket nedenfor opretter (også kaldet deklareres eller defineres) en variabel med navnet “message”:

let message;

Nu kan du putte data ind i lageret med = kaldet en tildelingsoperator (på engelsk assignment operator):

let message;

message = 'Hallo'; // gemmer tekststrengen Hallo

Tekststrengen er nu gemt i hukommelsen og knyttet til variablen. Du kan nu tilgå den ved at skrive variabelnavnet:

let message;
message = 'Hallo!';

alert(message); // viser indholdet af variablen

Du kan samle det hele – både dekleration og tildeling i én enkelt linje:

let message = 'Hallo!'; // deklarerer variablen og tildeler den en værdi

alert(message); // Hello!

Du kan også oprette flere variable på én linje:

let user = 'John', age = 25, message = 'Hallo';

Det virker umiddelbart kortere, men er ikke anbefalet. For læsbarhedens skyld vil det ofte være bedre at have en variabel på hver sin linje.

Udgaven på flere linjer er lidt længere, men nemmere at læse:

let user = 'John';
let age = 25;
let message = 'Hello';

Nogle foretrækker at skrive variable over flere linjer således:

let user = 'John',
  age = 25,
  message = 'Hallo';

… eller endda i en “komma-først” stil:

let user = 'John'
  , age = 25
  , message = 'Hallo';

Teknisk set gør alle tre udgaver det samme. Det er mere et spørgsmål om personlig stil.

var message = 'Hello';

Et eksempel fra virkeligheden

Du kan måske nemmere forstå konceptet omkring variable, hvis du forestiller dig en “kasse” til data med et unikt klistermærke på.

For eksempel kan variablen message ses som en kasse kaldet "message" med værdien "Hello!" i:

Du kan putte hvilken som helst værdi i kassen.

Du kan også ændre indholdet. Indholdet kan ændres så tit du vil:

let message;

message = 'Hello!';

message = 'World!'; // indholdet i kassen ændres

alert(message);

Når indholdet ændres, fjernes den gamle værdi fra kassen og den nye lægges ned i:

Du kan også deklarere to variable og kopiere data fra en kasse til en anden.

let hello = 'Hello world!';

let message;

// kopier 'Hello world' fra kassen hello til kassen message
message = hello;

// Nu indeholder de to variable det samme data
alert(hello); // Hello world!
alert(message); // Hello world!

Navngivning af variable

Der er to begrænsninger for navngivning af variable i JavaScript:

1. Navnet må kun indeholde bogstaver, tal og symbolerne $ og _.
2. Den første karakter må ikke være et tal.

Gyldige navne er f.eks:

let userName;
let test123;

Når navnet indeholder flere ord, vil du normalt skrive dem som camelCase. Det betyder: Alle ord skrives uden mellemrum og alle ord, undtaget det første, skrives med stort begyndelsesbogstav: myVeryLongName.

En interessant detalje – the dollartegn '$' og understreg '_' kan også bruges i navne. De er symboler, men optræder på lige fod med bogstaver uden nogen særskilt betydning.

Disse navne er også gyldige:

let $ = 1; // Deklarerer en variabel med navnet "$"
let _ = 2; // og her en variabel med navnet "_"

alert($ + _); // 3

Eksempler på ugyldige navne:

let 1a; // kan ikke starte med et tal

let my-name; // en bindestreg er ikke tilladt i navnet

let имя = '...';
let 我 = '...';

let let = 5; // kan ikke kalde en variabel "let"!
let return = 5; // heller ikke "return"!

// note: ingen "use strict" ii dette eksempel

num = 5; // variablen "num" bliver automatisk oprettet fordi den ikke fandtes

alert(num); // 5

"use strict";

num = 5; // fejl: num er ikke defineret

Konstanter

Du kan oprette en konstant variabel (en variabel, der ikke kan ændres). Det gør du ved at bruge nøgleordet const i stedet for let:

const myBirthday = '23.08.1973';

Variable der deklareres med const kaldes “konstanter”. De kan ikke ændres og et forsøg på et vil resultere i en fejlmeddelelse:

const myBirthday = '23.08.1973';

myBirthday = '01.01.2001'; // fejl, kan ikke tildele ny værdi til en konstant!

Når en programmør vil være sikker på, at en værdi ikke bliver ændret kan han bruge const for derved også klart at signalere at den ikke må røres til andre der læser koden.

Bar store bogstaver til konstanter

Det er en udbredt praksis at bruge konstanter til værdier der kan være svære at huske eller forstå mens der udvikles.

Sådanne konstanter bliver skrevet med store bogstaver og underscore.

Sådan her:

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...når du skal bruge farven skriver du
let color = COLOR_ORANGE;
alert(color); // #FF7F00

Fordele:

• COLOR_ORANGE er meget lettere at læse end "#FF7F00".
• Det er nemmere at skrive fejl i "#FF7F00" end i COLOR_ORANGE.
• Når du læser koden vil COLOR_ORANGE give mere mening end #FF7F00.

Men, hvornår skal du bruge store bogstaver til konstanter og hvornår skal du skrive dem i camelcase? Lad mig prøve at forklare det på denne måde:

At være en “konstant” betyder, at indholdet aldrig kan ændres. Men, der er konstanter der kendes inden programmet afvikles (som hexadecimal værdien for farven rød) og der er konstanter der bliver regnet ud, når programmet startes, men ikke ændres så snart de er oprettet.

For eksempel:

const pageLoadTime = /* tid det tog at hente siden */;

Værdien af pageLoadTime kan ikke kendes inden siden hentes, så den navngives i camelcase. Men, det er stadig en konstant fordi den ikke kan ændres efterfølgende.

Med andre ord. Konstanter med store bogstaver (kapitæler) bruges kun til “hard-coded” værdier.

Giv variable de rigtige navne

Når vi nu taler om variable er der en anden meget vigtig pointe.

Giv variable nogle meningsfulde navne. Giv dig gerne lidt tid til at tænke over dem, hvis det er krævet.

Navngivning af variable er en meget vigtig og faktisk lidt svær færdighed at mestre i programmering. Et hurtigt blik på variabelnavne viser ofte om det er en begynder eller en mere erfaren udvikler.

I virkelige projekter bruges meget af tiden på at modificere og udvide den eksisterende kodebase, mere end at lave noget helt nyt fra bunden. Når du vender tilbage til en kode efter noget tid og arbejde med andet, er det nemmere at forstå og arbejde med, hvis det er navngivet ordenligt – når variable har gode navne.

Brug noget tid på at tænke over det rigtige navn, inden du opretter din variabel. Du vil takke dig selv senere.

Et par gode regler er:

• Skriv læsbare navne som userName eller shoppingCart.
• Hold dig fra forkortelser eller helt små navne som a, b, c, med mindre du virkelig ved, hvad du laver.
• Lav dem beskrivende men kortfattede. Dårlige navne er data og value – de siger ikke meget om indholdet. De er kun anbefalet, hvis det er åbenlyst i hvilken sammenhæng de skal læses og forstås.
• Sæt dig fast på retningslinjer – alene eller i din gruppe. Hvis en besøgende på et website kaldes “user” så fortsæt med variable som currentUser og newUser, ikke currentVisitor og newManInTown.

Det lyder simpelt, ikke? Det er det faktisk også, men det kræver en del øvelse at skrive gode beskrivende men korte variabelnavne.

Opsummering

Du kan deklarere variable for at gemme data. Det kan gøres med nøgleordet var, let eller const.

• let – er den nye måde at deklarere variable.
• var – er den gamle måde at deklarere variable. Du vil normalt ikke bruge den mere. Du vil lære om forskelle på varog leti kaptitlet Den gamle "var".
• const – virker som let, men værdien kan ikke ændres efter den er oprettet…

Variable skal navngives så det er nemt at forstå, hvilken infromation de indeholder.