Komplexa variabler - Versionshistorik

PGJ den 30 juni 2021 kl. 10.00

2021-06-30T10:00:56Z

← Äldre version		Versionen från 30 juni 2021 kl. 10.00
Rad 68:		Rad 68:
	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.		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>.		Man kan ''inte'' använda sig av <code>break</code> eller <code>continue</code> med <code>forEach</code>.

	== Oväntade beteenden ==		== Oväntade beteenden ==

PGJ den 30 juni 2021 kl. 10.00

2021-06-30T10:00:15Z

← Äldre version		Versionen från 30 juni 2021 kl. 10.00
Rad 68:		Rad 68:
	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.		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>.		Man kan __inte__ använda sig av <code>break</code> eller <code>continue</code> med <code>forEach</code>.

	== Oväntade beteenden ==		== Oväntade beteenden ==

PGJ den 30 juni 2021 kl. 09.57

2021-06-30T09:57:50Z

← Äldre version		Versionen från 30 juni 2021 kl. 09.57
Rad 105:		Rad 105:
	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.		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> ==		==== 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.		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.

PGJ den 30 juni 2021 kl. 09.40

2021-06-30T09:40:00Z

@@ Rad 68: / Rad 68: @@
 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.
-== Skillnad på <code>for</code>-loop och <code>forEach</code> ==
+Man kan _inte_ använda sig av <code>break</code> eller <code>continue</code> med <code>forEach</code>.
 == Oväntade beteenden ==
@@ Rad 126: / Rad 104: @@
 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.

PGJ den 30 juni 2021 kl. 09.35

2021-06-30T09:35:43Z

← Äldre version		Versionen från 30 juni 2021 kl. 09.35
Rad 57:		Rad 57:

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

	värden.forEach(~~SkrivUt~~);		värden.forEach(skrivUt);
	</syntaxhighlight>		</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.		<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.		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.

	== Skillnad på <code>for</code>-loop och <code>forEach</code> ==		== Skillnad på <code>for</code>-loop och <code>forEach</code> ==

PGJ den 30 juni 2021 kl. 09.32

2021-06-30T09:32:43Z

← Äldre version		Versionen från 30 juni 2021 kl. 09.32
Rad 22:		Rad 22:
	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.:		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">		<syntaxhighlight lang="JavaScript">
	värden[2] = ~~"Ett värde"~~;		värden[2] = 42;
	</syntaxhighlight>		</syntaxhighlight>

PGJ den 31 oktober 2020 kl. 12.59

2020-10-31T12:59:53Z

← Äldre version		Versionen från 31 oktober 2020 kl. 12.59
Rad 5:		Rad 5:
	== Skapa en array ==		== Skapa en array ==
	En array skapas så här:		En array skapas så här:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	let värden = [ 1, 2, 3, 4 ];		let värden = [ 1, 2, 3, 4 ];
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	I exemplet ovan skapas en array som innehåller fyra element. Elementen har värdena från <code>1</code> till <code>4</code>.		I exemplet ovan skapas en array som innehåller fyra element. Elementen har värdena från <code>1</code> till <code>4</code>.
Rad 16:		Rad 14:
	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.		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.

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	let ettVärde = värden[0];		let ettVärde = värden[0];
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	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.		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.:		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.:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	värden[2] = "Ett värde";		värden[2] = "Ett värde";
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Liksom "vanliga" variabler, kan man ändra på datatypen vid en tilldelning.		Liksom "vanliga" variabler, kan man ändra på datatypen vid en tilldelning.
Rad 43:		Rad 37:
	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:		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:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	for(let i = 0; i < värden.length; i++) {		for(let i = 0; i < värden.length; i++) {
Rad 51:		Rad 44:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	I exemplet skriver vi alltså ut alla element i <code>värden</code>.		I exemplet skriver vi alltså ut alla element i <code>värden</code>.
Rad 64:		Rad 56:
	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.		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.

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	function SkrivUt(n) {		function SkrivUt(n) {
Rad 72:		Rad 63:
	värden.forEach(SkrivUt);		värden.forEach(SkrivUt);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	<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.		<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.
Rad 81:		Rad 71:
	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.		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.

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	for(let i = 0; i < värden.length; i++) {		for(let i = 0; i < värden.length; i++) {
Rad 88:		Rad 77:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	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.		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.
Rad 94:		Rad 82:
	Nu provar vi med en <code>forEach</code>-loop istället.		Nu provar vi med en <code>forEach</code>-loop istället.

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	function SkrivUt(n) {		function SkrivUt(n) {
Rad 102:		Rad 89:
	värden.forEach(SkrivUt);		värden.forEach(SkrivUt);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	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!		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!
Rad 109:		Rad 95:
	Hur JavaScript hanterar arrayer kan ibland vara lite "konstigt". Vi ska gå igenom några exempel...		Hur JavaScript hanterar arrayer kan ibland vara lite "konstigt". Vi ska gå igenom några exempel...

	~~<h3>~~Läsa utanför arrayen~~</h3>~~		===Läsa utanför arrayen===
	~~<div class~~=~~"well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	let värden = [ 1, 2, 3, 4 ];		let värden = [ 1, 2, 3, 4 ];
Rad 116:		Rad 101:
	console.log(värden[10]);		console.log(värden[10]);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	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.		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.
Rad 123:		Rad 107:

	Vad händer om vi gör följande:		Vad händer om vi gör följande:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	let värden = [ 1, 2, 3, 4 ];		let värden = [ 1, 2, 3, 4 ];
Rad 131:		Rad 114:
	console.log(värden[10]);		console.log(värden[10]);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	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:		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:

	~~<div class="well well-cyanide-light">~~

	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
Rad 144:		Rad 124:
	console.log(värden[9]);		console.log(värden[9]);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	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.		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.

PGJ: /* Skillnad på for-loop och forEach */

2018-10-01T07:31:38Z

Skillnad på for-loop och forEach

← Äldre version		Versionen från 1 oktober 2018 kl. 07.31
Rad 83:		Rad 83:
	<div class="well well-cyanide-light">		<div class="well well-cyanide-light">
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	for(i = 0; i < värden.length; i++) {		for(let i = 0; i < värden.length; i++) {
	let ettVärde = värden[ i ];		let ettVärde = värden[ i ];
	console.log(ettVärde);		console.log(ettVärde);

PGJ den 15 september 2018 kl. 15.46

2018-09-15T15:46:05Z

@@ Rad 77: / Rad 77: @@
 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.
 == Oväntade beteenden ==
@@ Rad 119: / Rad 147: @@
 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.

PGJ: /* Skillnad på for-loop och forEach */

2018-09-15T15:44:43Z

Skillnad på for-loop och forEach

← Äldre version		Versionen från 15 september 2018 kl. 15.44
Rad 120:		Rad 120:
	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.		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> ===		== 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.		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.