Datové typy JavaScriptu

Obsah

JavaScript má 8 datových typů

1. Řetězec
2. Číslo
3. Bigint
4. Logická hodnota
5. Nedefinováno
6. Null
7. Symbol
8. Objekt

Datový typ objektu

Datový typ objektu může obsahovat:

1. Předmět
2. Pole
3. Rande

Příklady

// 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");

Poznámka

Proměnná JavaScriptu může obsahovat jakýkoli typ dat.

Koncept datových typů

V programování jsou datové typy důležitým pojmem.

Aby bylo možné pracovat s proměnnými, je důležité o nich něco vědět typ.

Bez datových typů nemůže počítač toto bezpečně vyřešit:

let x = 16 + "Volvo";

Má vůbec smysl přidávat k šestnáctce „Volvo“? Bude to vyrábět chyba nebo to přinese výsledek?

JavaScript bude výše uvedený příklad považovat za:

let x = "16" + "Volvo";

Poznámka

Při přidávání čísla a řetězce bude JavaScript považovat číslo za a tětiva.

Příklad

let x = 16 + "Volvo";

Zkuste to sami →

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

Příklad

let x = "Volvo" + 16;

Zkuste to sami →

<!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 vyhodnocuje výrazy zleva doprava. Mohou různé sekvence přinést různé výsledky:

JavaScript:

let x = 16 + 4 + "Volvo";

Výsledek :

20Volvo

Zkuste to sami →

<!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;

Výsledek :

Volvo164

Zkuste to sami →

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

V prvním příkladu JavaScript považuje 16 a 4 za čísla, dokud nedosáhne „Volvo“.

Ve druhém příkladu, protože první operand je řetězec, všechny operandy jsou považovány za struny.

Typy JavaScriptu jsou dynamické

JavaScript má dynamické typy. To znamená, že lze použít stejnou proměnnou držet různé typy dat:

Příklad

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

JavaScriptové řetězce

Řetězec (nebo textový řetězec) je řada znaků jako "John Doe".

Řetězce jsou psány s uvozovkami. Můžete použít jednoduché nebo dvojité uvozovky:

Příklad

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

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

Uvozovky můžete použít uvnitř řetězce, pokud se neshodují s uvozovkami obklopující řetězec:

Příklad

// 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"';

Více o řetězcích se dozvíte později v tomto tutoriálu.

JavaScriptová čísla

Všechna čísla JavaScriptu jsou uložena jako desetinná čísla (s plovoucí desetinnou čárkou).

Čísla lze psát s desetinnými místy nebo bez nich:

Příklad

// With decimals:
let x1 = 34.00;

 
// Without decimals:
let x2 = 34;

Exponenciální zápis

Extra velká nebo extra malá čísla lze psát vědecky (exponenciální) zápis:

Příklad

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

Poznámka

Většina programovacích jazyků má mnoho typů čísel:

Celá čísla (celá čísla):
byte (8-bit), short (16-bit), int (32-bit), long (64-bit)

Reálná čísla (s plovoucí desetinnou čárkou):
float (32-bit), double (64-bit).

Čísla JavaScriptu jsou vždy jednoho typu:
double (64bitové s plovoucí desetinnou čárkou).

Více o číslech se dozvíte později v tomto tutoriálu.

JavaScript BigInt

Všechna čísla JavaScriptu jsou uložena v 64bitovém formátu s plovoucí desetinnou čárkou.

JavaScript BigInt je nový datový typ (ES2020), který lze použít k ukládání celočíselných hodnot, které jsou příliš velké na to, aby byly reprezentovány pomocí normálního čísla JavaScript.

Příklad

let x = BigInt("123456789012345678901234567890");

Více o BigInt se dozvíte později v tomto tutoriálu.

JavaScript Booleans

Logické hodnoty mohou mít pouze dvě hodnoty: true nebo false.

Příklad

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

Zkuste to sami →

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

V podmíněném testování se často používají booleovské hodnoty.

Více o booleancích se dozvíte později v tomto tutoriálu.

Pole JavaScriptu

Pole JavaScriptu se zapisují s hranatými závorkami.

Položky pole jsou odděleny čárkami.

Následující kód deklaruje (vytváří) pole nazvané auta obsahující tři položky (názvy aut):

Příklad

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

Zkuste to sami →

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

Indexy pole jsou založeny na nule, což znamená, že první položka je [0], druhá je [1] a tak dále.

Více o polích se dozvíte později v tomto tutoriálu.

Objekty JavaScriptu

Objekty JavaScript se zapisují se složenými závorkami {}.

Objekt vlastnosti se zapisují jako dvojice název:hodnota, oddělené čárkami.

Příklad

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

Zkuste to sami →

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

Objekt (osoba) ve výše uvedeném příkladu má 4 vlastnosti: jméno, příjmení, věk a barva očí.

Více o objektech se dozvíte později v tomto tutoriálu.

Typ Operátora

K vyhledání typu můžete použít JavaScriptový operátor typeof proměnné JavaScriptu.

Operátor typeof vrací typ proměnné nebo výrazu:

Příklad

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

Zkuste to sami →

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

Příklad

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

Zkuste to sami →

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

Více o typeof se dozvíte později v tomto tutoriálu.

Nedefinováno

V JavaScriptu má proměnná bez hodnoty hodnotu undefined. Typ je také undefined.

Příklad

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

Zkuste to sami →

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

Libovolnou proměnnou lze vyprázdnit nastavením hodnoty na undefined. Typ bude také undefined.

Příklad

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

Zkuste to sami →

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

Prázdné hodnoty

Prázdná hodnota nemá nic společného s undefined.

Prázdný řetězec má právní hodnotu i typ.

Příklad

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

Zkuste to sami →

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