JavaScript-datatyper

Indholdsfortegnelse

JavaScript har 8 datatyper

1. Streng
2. Nummer
3. Bigint
4. Boolean
5. Udefineret
6. Nul
7. Symbol
8. Objekt

Objektdatatypen

Objektdatatypen kan indeholde:

1. Et objekt
2. En matrix
3. En date

Eksempler

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

Bemærk

En JavaScript-variabel kan indeholde enhver type data.

Begrebet datatyper

Inden for programmering er datatyper et vigtigt begreb.

For at kunne operere på variable er det vigtigt at vide noget om typen.

Uden datatyper kan en computer ikke sikkert løse dette:

let x = 16 + "Volvo";

Giver det nogen mening at tilføje "Volvo" til seksten? Vil det producere en fejl eller vil det give et resultat?

JavaScript vil behandle eksemplet ovenfor som:

let x = "16" + "Volvo";

Bemærk

Når du tilføjer et tal og en streng, vil JavaScript behandle nummeret som et snor.

Eksempel

let x = 16 + "Volvo";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a number and a string, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Eksempel

let x = "Volvo" + 16;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a string and a number, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript evaluerer udtryk fra venstre mod højre. Forskellige sekvenser kan give forskellige resultater:

JavaScript:

let x = 16 + 4 + "Volvo";

Resultat :

20Volvo

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript:

let x = "Volvo" + 16 + 4;

Resultat :

Volvo164

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

I det første eksempel behandler JavaScript 16 og 4 som tal, indtil det når "Volvo".

I det andet eksempel, da den første operand er en streng, er alle operander behandlet som strenge.

JavaScript-typer er dynamiske

JavaScript har dynamiske typer. Det betyder, at den samme variabel kan bruges at holde forskellige datatyper:

Eksempel

let x;       // Now x is undefined
x = 5;       // Now x is a Number
x = "John";  // Now x is a String

JavaScript-strenge

En streng (eller en tekststreng) er en række tegn som "John Doe".

Stryge er skrevet med anførselstegn. Du kan bruge enkelte eller dobbelte anførselstegn:

Eksempel

// Using double quotes:
let carName1 = "Volvo XC60";

// Using single quotes:
let carName2 = 'Volvo XC60';

Du kan bruge anførselstegn inde i en streng, så længe de ikke matcher anførselstegnene omkring strengen:

Eksempel

// Single quote inside double quotes:
let answer1 = "It's alright";
 

// Single quotes inside double quotes:
let answer2 = "He is called 'Johnny'";

// Double quotes inside single quotes:
let answer3 = 'He is called "Johnny"';

Du vil lære mere om strenge senere i denne øvelse.

JavaScript-numre

Alle JavaScript-numre gemmes som decimaltal (flydende komma).

Tal kan skrives med eller uden decimaler:

Eksempel

// With decimals:
let x1 = 34.00;

 
// Without decimals:
let x2 = 34;

Eksponentiel notation

Ekstra store eller ekstra små tal kan skrives med videnskabelig (eksponentiel) notation:

Eksempel

let y = 123e5;    // 12300000
let z = 123e-5;   // 0.00123

Bemærk

De fleste programmeringssprog har mange taltyper:

Heltal (heltal):
byte (8-bit), kort (16-bit), int (32-bit), lang (64-bit)

Reelle tal (flydende komma):
flydende (32-bit), dobbelt (64-bit).

Javascript-numre er altid én type:
dobbelt (64-bit flydende komma).

Du vil lære mere om numre senere i dette selvstudie.

JavaScript BigInt

Alle JavaScript-numre er gemt i et 64-bit flydende komma-format.

JavaScript BigInt er en ny datatype (ES2020), der kan bruges til at gemme heltalsværdier, der er for store til at blive repræsenteret med et normalt JavaScript-nummer.

Eksempel

let x = BigInt("123456789012345678901234567890");

Du vil lære mere om BigInt senere i denne øvelse.

JavaScript Booleans

Booleans kan kun have to værdier: true eller false.

Eksempel

let x = 5;
let y = 5;
let z = 6;
(x == y)       
  // Returns true
(x == z)       // Returns 
  false

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Booleans</h2>

<p>Booleans can have two values: true or false:</p>

<p id="demo"></p>

<script>
let x = 5;
let y = 5;
let z = 6;

document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>

</body>
</html>

Booleans bruges ofte i betinget test.

Du vil lære mere om booleans senere i denne øvelse.

JavaScript-arrays

JavaScript-arrays er skrevet med firkantede parenteser.

Array-elementer er adskilt af kommaer.

Følgende kode erklærer (opretter) et array kaldet biler, der indeholder tre varer (bilnavne):

Eksempel

const cars = ["Saab", "Volvo", "BMW"];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Array indexes are zero-based, which means the first item is [0].</p>

<p id="demo"></p>

<script>
const cars = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Array-indekser er nul-baserede, hvilket betyder, at det første element er [0], det andet er [1] og så videre.

Du vil lære mere om arrays senere i denne øvelse.

JavaScript objekter

JavaScript-objekter er skrevet med krøllede klammeparenteser {}.

Objekt egenskaber skrives som navn:værdi-par, adskilt af kommaer.

Eksempel

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Objektet (personen) i eksemplet ovenfor har 4 egenskaber: fornavn, efternavn, alder og øjenfarve.

Du vil lære mere om objekter senere i denne øvelse.

Typen af operatør

Du kan bruge JavaScript-operatoren typeof til at finde typen af en JavaScript-variabel.

Operatoren typeof returnerer typen af en variabel eller et udtryk:

Eksempel

typeof ""             // Returns 
 "string"
typeof "John"         // Returns 
 "string"
typeof "John Doe"     // Returns 
 "string"

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof "" + "<br>" +
typeof "John" + "<br>" + 
typeof "John Doe";
</script>
</body>
</html>

Eksempel

typeof 0              // Returns 
 "number"
  typeof 314            // Returns 
 "number"
  typeof 3.14           // Returns 
 "number"
  typeof (3)            // Returns 
 "number"
typeof (3 + 4)        // Returns 
 "number"

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof 0 + "<br>" + 
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>

</body>
</html>

Du vil lære mere om typeaf senere i denne øvelse.

Udefineret

I JavaScript har en variabel uden en værdi værdien undefined. Typen er også udefineret.

Eksempel

let car;    // Value is undefined, 
    type is undefined

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>

</body>
</html>

Enhver variabel kan tømmes ved at sætte værdien til undefined. Typen vil også være udefineret.

Eksempel

   car = undefined;    // Value is undefined, 
    type is undefined

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car = "Volvo";
car = undefined;

document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>

</body>
</html>

Tomme værdier

En tom værdi har intet at gøre med undefined.

En tom streng har både en juridisk værdi og en type.

Eksempel

let car = "";    // The value is  "", the typeof is "string"

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>An empty string has both a legal value and a type:</p>

<p id="demo"></p>

<script>
let car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>

</body>
</html>