Visa källa för Komplexa variabler

Komplexa, eller sammansatta, variabler är en typ av variabler som kan innehålla flera olika värden.  Den vanligaste typ av sammansatta variabler är arrayer. Vilket är en typ av variabel där vi kan ange ett index för att tala om vilket värde vi vill komma åt.

Har du programmerat i något annat språk, t.ex. C#, kan det vara bra att veta att i JavaScript så är arrayer och listor ungefär samma sak. Arrayerna kan användas mer dynamiskt än i många andra språk.

== Skapa en array ==
En array skapas så här:
<syntaxhighlight lang="JavaScript">
let värden = [ 1, 2, 3, 4 ];
</syntaxhighlight>

I exemplet ovan skapas en array som innehåller fyra element. Elementen har värdena från <code>1</code> till <code>4</code>.

== Läsa ifrån en array ==
För att komma åt ett specifikt element i en array använder vi oss av <code>[</code>''index''<code>]</code>. Där ''index'' talar om vilket specifikt värde vi vill komma åt.  Ett exempel på detta.

<syntaxhighlight lang="JavaScript">
let ettVärde = värden[0];
</syntaxhighlight>

Ovanstående kod kommer att plocka ut det ''första'' värdet i arrayen. I programmering brukar vi oftast börja att räkna ifrån noll. Arrayen <code>värden</code> innehåller fyra element. Elementen är indexerade ifrån <code>0</code> till <code>3</code>. Sista elementet är alltså element nummer <code>3</code>,  dvs ett mindre än antalet element. Detta är på grund av att vi räknar ifrån noll.

Vill vi ändra på innehållet i ett element, gör vi som ovan men med den skillnad att vi gör en tilldelning till elementet, t.ex.:
<syntaxhighlight lang="JavaScript">
värden[2] = 42;
</syntaxhighlight>

Liksom "vanliga" variabler, kan man ändra på datatypen vid en tilldelning.

== Gå igenom en array ==
Vi vill ofta gå igenom hela, eller delar av, arrayen och göra nåt med elementen som den innehåller. Det kan man göra på lite olika sätt...

(Som vi kommer att se så är det lite skillnad på hur dessa två sätt beter sig)

=== <code>for</code>-loop ===
<code>for</code>-loopar är en metod som vi kan använda oss av om vi vill gå igenom elementen i en array.

Varje array har en egenskap som heter <code>length</code>, den är satt till det antal element som finns i arrayen. Genom att använda oss av <code>length</code> kan vi göra en <code>for</code>-loop på följande vis:

<syntaxhighlight lang="JavaScript">
for(let i = 0; i < värden.length; i++) {
   let ettVärde = värden[ i ];

   console.log(ettVärde);
}
</syntaxhighlight>

I exemplet skriver vi alltså ut alla element i <code>värden</code>.

Lägg märke till att loopens test-del använder "<code>&lt;</code>", dvs loopen avslutas när den är ett steg under <code>length</code>. Vi konstaterade ju tidigare att elementen i arrayer indexeras ifrån <code>0</code> till och med <code>length - 1</code>. Vilket innebär att vi vill avsluta loopen ett steg under <code>length</code>.  När vi använder oss av <code>&lt;</code>, så avslutas loopen efter man nått sista elementet.

Då man kör en <code>for</code>-loop för att gå igenom arrayen, kan man använda sig av de vanliga <code>continue</code> och <code>break</code>. Vi kan alltså skippa steg och fortsätta med nästa element och vi kan bryta oss ur loopen helt och hållet. Det senare kan vara bra om vi t.ex. gjort allt som behöver göras och därmed inte behöver fortsätta igenom hela arrayen. Ett exempel på detta kunde vara att vi söker efter ett specifikt värde i arrayen, när vi hittar på det kanske vi vill bryta oss ur loopen istället för att gå igenom den helt och hållet.

=== <code>forEach</code> ===
Ett annat sätt på vilket vi kan gå igenom en array är att använda oss av metoden <code>forEach</code>. Det är en metod som ingår i alla array-variabler. Vi anropar den genom att ange arraynamnet följt av <code>.forEach()</code>. <code>forEach</code> går igenom en array, element för element, och anropar en funktion för varje element.

Så här skulle föregående exempel bli att se ut om vi använder oss av <code>forEach</code> istället för en <code>for</code>-loop.

<syntaxhighlight lang="JavaScript">
function skrivUt(n) {
  console.log(n);
}

värden.forEach(skrivUt);
</syntaxhighlight>

<code>forEach</code> plockar ut varje element var för sig. Varje element som plockas ut, kommer att skickas till funktionen <code>skrivUt</code>. Funktionen kommer att få det utplockade elementet som input, dvs <code>skrivUt</code>:s <code>n</code> kommer att sättas till ett element-värde.

I JavaScript behandlar man funktioner som "vanliga" variabler. Vi skickar <code>skrivUt</code> som parameter till <code>forEach</code> och eftersom den inte har <code>()</code> efter sig, så ses den som en variabel. Skulle vi haft <code>()</code> efter den, skulle funktionen körts direkt.

Man kan ''inte'' använda sig av <code>break</code> eller <code>continue</code> med <code>forEach</code>.

== Oväntade beteenden ==
Hur JavaScript hanterar arrayer kan ibland vara lite "konstigt". Vi ska gå igenom några exempel...

===Läsa utanför arrayen===
<syntaxhighlight lang="JavaScript">
let värden = [ 1, 2, 3, 4 ];

console.log(värden[10]);
</syntaxhighlight>

Vår array innehåller ju bara fyra värden, men vi försöker komma åt det elfte (kom ihåg att vi räknar ifrån noll). Vi kommer inte att få ett felmeddelande, istället får vi värdet <code>undefined</code>. JavaScript bryr sig alltså inte om att vi är "utanför" den array vi definierat. Däremot har vi ju inte satt något värde i det angivna elementet och vi får därför tillbaka <code>undefined</code>, vilket ju stämmer.

=== Skriva utanför arrayen ===

Vad händer om vi gör följande:
<syntaxhighlight lang="JavaScript">
let värden = [ 1, 2, 3, 4 ];

värden[10]=5;

console.log(värden[10]);
</syntaxhighlight>

I detta fall kommer koden att köras och vi får värdet <code>5</code> utskrivet. Vår array kommer alltså att göras större och bli att innehålla elva element. Men vad händer med de element som ligger på positionerna där vi inte angivit några värden? Vi provar:

<syntaxhighlight lang="JavaScript">
let värden = [ 1, 2, 3, 4 ];

värden[10]=5;

console.log(värden[9]);
</syntaxhighlight>

Vi får då utskriften <code>undefined</code>. Det blir ingen error, så elementet existerar. Men vi har inte satt det till något värde, därmed är det odefinierat.

==== Skillnad på <code>for</code>-loop och <code>forEach</code> ====
Om vi vill gå igenom alla element i arrayen,  så kommer vi i det här fallet att få olika resultat beroende på vilken loop-typ vi använder. Vi provar en <code>for</code>-loop först.

<syntaxhighlight lang="JavaScript">
for(let i = 0; i < värden.length; i++) {
   let ettVärde = värden[ i ];
   console.log(ettVärde);
}
</syntaxhighlight>

Siffrorna 1-4 skrivs ut som vi förväntat oss. Därefter följer en del <code>undefined</code>, ända tills vi  når femman. Det var väl vad vi förväntat oss.

Nu provar vi med en <code>forEach</code>-loop istället.

<syntaxhighlight lang="JavaScript">
function SkrivUt(n) {
  console.log(n);
}

värden.forEach(SkrivUt);
</syntaxhighlight>

Nu får vi enbart siffrorna 1-5 och vi ser inte något av de element vars värde är <code>undefined</code>. <code>forEach</code> skippar alltså över de element som inte är satta till något värde!