IT TUTORIJALI | jQuery

JavaScript - Tipovi podataka

Vrste podataka u JavaScript-u

Vrste podataka u osnovi određuju kakve se vrste podataka mogu pohraniti i kako se sa njima manipulisati unutar programa. Postoji šest osnovnih tipova podataka u JavaScript-u koji se mogu podijeliti u tri glavne kategorije: primitivne (ili primarne), kompozitne (ili referentne) i posebne vrste podataka. String, Number i Boolean su primitivni tipovi podataka. Objekt, niz i funkcija (koji su sve vrste objekata) (eng. Object, Array, and Function) su složeni tipovi podataka. Dok su Undefined i Null posebne vrste podataka. Primitivni tipovi podataka mogu da sadrže samo jednu vrijednost odjednom, dok složene vrste podataka mogu da sadrže zbirke vrijednosti i složenije cjeline. U nastavku ćemo se detaljno upoznati o svakom od njih.

Vrsta string podataka

Vrsta string podataka koristi se za predstavljanje tekstualnih podataka (tj. niza znakova). Stringovi se stvaraju pomoću jednostrukih ili dvostrukih navodnih znakova koji okružuju jedan ili više znakova, kao što je prikazano u nastavku:

var a = 'Pozdrav!';  // koristi jednostruke navodnike
var b = "Pozdrav!";  // koristi dvostruke navodnike

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript String tipovi podataka</title>
</head>
<body>
    <script>
    // Kreiranje varijable
    var a = 'Pozdrav!';  // koristi jednostruke navodnike
    var b = "Pozdrav!";  // koristi dvostruke navodnike
    
    // Ispisivanje vrijednosti varijable
    document.write(a + "<br>");
    document.write(b);
    </script>
</body>
</html>

Možete uključiti citate u string sve dok se ne podudaraju sa navodima koji se isporučuju.

var a = "Let's have a cup of coffee."; // jedan jednostruki navodni znak unutar dvostrukih
var b = 'He said "Hello" and left.';  // dvostruki navodni znaci unutar jednostrukih
var c = 'We\'ll never give up.';     // bježanje od pojedinačnih citata s kosom crte

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Uključivanje citata unutar JavaScript stringa</title>
</head>
<body>
    <script>
    // Kreiranje varijavbli
    var a = "Let's have a cup of coffee.";
    var b = 'He said "Hello" and left.';
    var c = 'We\'ll never give up.';
    
    // Ispisivanje vrijednosti varijabli
    document.write(a + "<br>");
    document.write(b + "<br>");
    document.write(c);
    </script>
</body>
</html>

Više o stringovima naučićete u lekciji o stringovima u JavaScript.

Tip podataka (Number) broja

Tip brojčanih podataka koristi se za predstavljanje pozitivnih ili negativnih brojeva sa ili bez decimalnog mjesta ili brojeva napisanih eksponencijalnom notacijom, npr. 1,5e-4 (ekvivalentno 1,5x10-4).

var a = 25;         // integer
var b = 80.5;       // floating-point broj
var c = 4.25e+6;    // eksponencijalna notacija, ista kao 4.25e6 ili 4250000
var d = 4.25e-6;    // eksponencijalna notacija, ista kao 0.00000425

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Tip podataka broja</title>
</head>
<body>
    <script>
    // Kreiranje varijabli
    var a = 25;
    var b = 80.5;
    var c = 4.25e+6;
    var d = 4.25e-6;
    
    // Ispisivanje vrijednosti varijabli
    document.write(a + "<br>");
    document.write(b + "<br>");
    document.write(c + "<br>");
    document.write(d);
    </script>
</body>
</html>

Tip podataka broja takođe uključuje neke posebne vrijednosti kao što su: Beskonačnost,-Beskonačnost i NaN (eng. Infinity, -Infinity and NaN). Beskonačnost predstavlja matematičku beskonačnost ∞, koja je veća od bilo kog broja. Beskonačnost je rezultat dijeljenja broja sa 0, kao što je prikazano u nastavku:

alert(16 / 0);  // Ispisuje: Infinity
alert(-16 / 0); // Ispisuje: -Infinity
alert(16 / -0); // Ispisuje: -Infinity

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Beskonačnost</title>
</head>
<body>
    <script>
    document.write(16 / 0);
    document.write("<br>");
    document.write(-16 / 0);
    document.write("<br>");
    document.write(16 / -0);
    </script>
</body>
</html>

Dok NaN predstavlja posebnu vrijednost bez broja. To je rezultat nevaljane ili nedefinisane matematičke operacije, poput uzimanja kvadratnog korijena od -1 ili dijeljenja 0 sa 0, itd.

alert("Neki tekst" / 2);       // Ispisuje: NaN
alert("Neki tekst" / 2 + 10);  // Ispisuje: NaN
alert(Math.sqrt(-1));         // Ispisuje: NaN

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript NaN</title>
</head>
<body>
    <script>
    document.write("Neki tekst" / 2);
    document.write("<br>");
    document.write("Neki tekst" / 2 + 10);
    document.write("<br>");
    document.write(Math.sqrt(-1));
    </script>
</body>
</html>

Saznačete više o brojevima u lekciji JavaScript brojevi.

Boolean tipovi podataka

Booleov tip podataka može da sadrži samo dvije vrijednosti: true ili false. Obično se koristi za spremanje vrijednosti poput da (istina) ili ne (lažno), uključeno (istina) ili isključeno (lažno), itd. kao što je prikazano u sljedećem primjeru:

var isReading = true;   // da, ja čitam
var isSleeping = false; // ne, ja ne spavam

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Boolean tipovi podataka</title>
</head>
<body>
    <script>
    // Kreiranje varijable
    var isReading = true;   // da, ja čitam
    var isSleeping = false; // ne, ja ne čitam
    
    // Ispisivanje vrijednosti varijable
    document.write(isReading + "<br>");
    document.write(isSleeping);
    </script>
</body>
</html>

Boolove vrijednosti dolaze i kao rezultat poređenja u programu. Sljedeći primjer upoređuje dvije varijable i prikazuje rezultat u dijaloškom okviru upozorenja:

var a = 2, b = 5, c = 10;
 
alert(b > a) // Ispisuje: true
alert(b > c) // Ispisuje: false

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Upoređivanje</title>
</head>
<body>
    <script>
    var a = 2, b = 5, c = 10;
 
    document.write(b > a) // Ispisuje: true
    document.write("<br>");
    document.write(b > c) // Ispisuje: false
    </script>
</body>
</html>

Više o poređenjima saznaćete u lekciji o JavaScript else/if uslovi.

Nedefinisani tip podataka (undefined)

Nedefinisani tip podataka može imati samo jednu vrijednost - posebna vrijednost je nedefinisana (undefined). Ako je varijabla deklarisana, ali joj nije dodijeljena vrijednost, vrijednost je automatski nedefinisana (undefined).

var a;
var b = "Hello World!"
 
alert(a) // Ispisuje: undefined
alert(b) // Ispisuje: Hello World!

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Nedefinisani tip podatka</title>
</head>
<body>
    <script>
    // Kreiranje varijable
    var a;
    var b = "Hello World!"
    
    // Ispisivanje vrijednosti varijable
    document.write(a + "<br>");
    document.write(b);
    </script>
</body>
</html>

Null vrste podataka

Ovo je još jedan poseban tip podataka koji može imati samo jednu vrijednost - nultu vrijednost. Nulta vrijednost znači da nema vrijednosti. Nije ekvivalentna praznom stringu ("") ili 0, to jednostavno nije ništa. Varijabla se može izričito isprazniti njenim trenutnim sadržajem dodijelivši joj nultu vrijednost.

var a = null;
alert(a); // Ispisuje: null
 
var b = "Hello World!"
alert(b); // Ispisuje: Hello World!
 
b = null;
alert(b) // Ispisuje: null

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Null tip podatka</title>
</head>
<body>
    <script>
    var a = null;
    document.write(a + "<br>"); // Ispisuje: null
    
    var b = "Hello World!"
    document.write(b + "<br>"); // Ispisuje: Hello World!
    
    b = null;
    document.write(b) // Ispisuje: null
    </script>
</body>
</html>

Object (Objekat) vrste podataka

Objekt je složen tip podataka koji vam omogućava pohranjivanje zbirki podataka. Objekt sadrži svojstva, definisana kao par ključ-vrijednost (eng. key-value). Svojstveni ključ (ime) uvijek je niz, ali vrijednost može biti bilo koji tip podataka, poput stringa, brojeva, boola ili složenih tipova podataka poput nizova, funkcija i drugih objekata. Saznaćete više o objektima u narednim lekcijama. Sljedeći primjer će vam pokazati najjednostavniji način stvaranja objekta u JavaScript-i.

var emptyObject = {};
var person = {"name": "Miloš", "surname": "Mihaljica", "age": "29"};
 
// Za bolje čitanje
var car = {
    "modal": "BMW X3",
    "color": "Bijela",
    "doors": 5
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Object tipovi podataka</title>
</head>
<body>
    <script>
    var emptyObject = {};
    var person = {"name": "Miloš", "surname": "Mihaljica", "age": "29"};
 
// Za bolje čitanje
    var car = {
        "modal": "BMW X3",
        "color": "Bijela",
        "doors": 5
    }
    
    // Ispisivanje vrijdnosti varijabli u web borwser konzoli
    console.log(person);
    console.log(car);
    </script>
    <p><strong>Napomena:</strong> Provjerite konzolu 
    pretraživača pritiskom na tipku f12 na tastaturi.</p>
</body>
</html>

Automobil u gornjem primjeru može se napisati i kao:

var car = {
    modal: "BMW X3",
    color: "Bijela",
    doors: 5
}

Array (Niz) vrsta podataka

Niz je vrsta objekta koji se koristi za spremanje više vrijednosti u jednu varijablu. Svaka vrijednost (koja se naziva i element) u nizu ima numeričku poziciju, poznatu i kao njen indeks, a može da sadrži podatke bilo koje vrste podataka-brojeva, stringa, boolean-a, funkcija, objekata, pa čak i drugih nizova. Indeks polja započinje od 0, tako da je prvi element polja arr [0], a ne arr [1]. Najjednostavniji način kreiranja matrice je navođenje elemenata polja kao popis odvojen zarezom okružen uglastim zagradama, kao što je prikazano u sljedećem primjeru:

var colors = ["Crvena", "Žuta", "Zelena", "Narandžansta"];
var cities = ["London", "Pariz", "New York"];
 
alert(colors[0]);   // Ispisuje: Crvena
alert(cities[2]);   // Ispisuje: New York

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Array Tip podatka</title>
</head>
<body>
    <script>
    // Kreiranje niza
   var colors = ["Crvena", "Žuta", "Zelena", "Narandžansta"];
   var cities = ["London", "Pariz", "New York"];
    
    // Ispisivanje vrijednosti niza
    document.write(colors[0] + "<br>");   // Ispisuje: Red
    document.write(cities[2]);   // Ispisuje: New York
    </script>
</body>
</html>

O nizovima ćete saznati više u lekciji JavaScript nizovi.

Function (Funkcija) vrste podataka

Funkcija je objekt koji se može pozvati i koji izvršava blok koda. Budući da su funkcije objekti, moguće ih je dodijeliti varijablama, kao što je prikazano u sljedećem primjeru:

var greeting = function(){ 
    return "Hello World!"; 
}
 
// Provjera vrste varijable greeting
alert(typeof greeting) // Ispisuje: function
alert(greeting());     // Ispisuje: Hello World!

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Function topvi podataka</title>
</head>
<body>
    <script>
    var greeting = function(){ 
        return "Hello World!"; 
    }
     
    // Provjera vrste varijable greeting
    document.write(typeof greeting) // Ispisuje: function
    document.write("<br>");
    document.write(greeting());     // Ispisuje: Hello World!
    </script>
</body>
</html>

U stvari, funkcije se mogu koristiti na bilo kom mjestu, bilo koja druga vrijednost se može koristiti. Funkcije se mogu pohraniti u varijable, objekte i nizove. Funkcije se mogu prosljediti kao argumenti drugim funkcijama, a funkcije se mogu vratiti iz funkcija. Pogledajmo sljedeću funkciju:

function createGreeting(name){
    return "Pozdrav, " + name;
}
function displayGreeting(greetingFunction, userName){
    return greetingFunction(userName);
}
 
var result = displayGreeting(createGreeting, "Miloš");
alert(result); // Ispisuje: Pozdrav, Miloš

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Predaja funkcije kao argument drugoj funkciji</title>
</head>
<body>
    <script>
    function createGreeting(name){
    return "Pozdrav, " + name;
    }
    function displayGreeting(greetingFunction, userName){
        return greetingFunction(userName);
    }
 
    var result = displayGreeting(createGreeting, "Miloš");
    alert(result); // Ispisuje: Pozdrav, Miloš
    </script>
</body>
</html>

Saznaćete više o funkcijama u lekciji JavaScript funkcije.

Operatori tipa - typeof

Operator typeof može se koristiti za otkrivanje vrste podataka koja sadrži varijabla ili operande. Može se koristiti sa ili bez zagrada typeof(x) ili typeof x. Operator typeof posebno je koristan u situacijama kada vrijednosti različitih vrsta trebate obraditi različito, ali morate biti vrlo oprezni, jer može proizvesti neočekivani rezultat u nekim slučajevima, kao što je prikazano u sljedećem primjeru:

// Numbers
typeof 15;  // Vraća: "broj"
typeof 42.7;  // Vraća: "broj"
typeof 2.5e-4;  // Vraća: "broj"
typeof Infinity;  // Vraća: "broj"
typeof NaN;  // Vraća: "broj". Uprkos tome "što nije broj"
 
// Strings
typeof '';  // Vraća: "string"
typeof 'hello';  // Vraća: "string"
typeof '12';  // Vraća: "string". Broj unutar navodnika je typeof string
 
// Booleans
typeof true;  // Vraća: "boolean"
typeof false;  // Vraća: "boolean"
 
// Undefined
typeof undefined;  // Vraća: "undefined (nedefinisano)"
typeof undeclaredVariable; // Vraća: "undefined (nedefinisano)"
 
// Null
typeof Null;  // Vraća: "object"
 
// Objects
typeof {name: "Miloš", age: 18};  // Vraća: "object"
 
// Arrays
typeof [1, 2, 4];  // Vraća: "object"
 
// Functions
typeof function(){};  // Vraća: "function"

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript typeof operator</title>
</head>
<body>
    <script>
    // Numbers
    document.write(typeof 15 + "<br>");  // Ispisuje: "number"
    document.write(typeof 42.7 + "<br>");  // Ispisuje: "number"
    document.write(typeof 2.5e-4 + "<br>");  // Ispisuje: "number"
    document.write(typeof Infinity + "<br>");  // Ispisuje: "number"
    document.write(typeof NaN + "<br>");  // Ispisuje: "number". Iako je "nije broj"
     
    // Strings
    document.write(typeof '' + "<br>");  // Ispisuje: "string"
    document.write(typeof 'hello' + "<br>");  // Ispisuje: "string"
    document.write(typeof '12' + "<br>");  // Ispisuje: "string". 
    Broj unutar navodnika je document.write(typeof string)
     
    // Booleans
    document.write(typeof true + "<br>");  // Ispisuje: "boolean"
    document.write(typeof false + "<br>");  // Ispisuje: "boolean"
     
    // Nedefinisani (Undefined)
    document.write(typeof undefined + "<br>");  // Ispisuje: "undefined"
    document.write(typeof undeclaredVariable + "<br>"); // Ispisuje: "undefined"
     
    // Null
    document.write(typeof Null + "<br>");  // Ispisuje: "object"
     
    // Objects
    document.write(typeof {name: "Miloš", age: 18} + "<br>");  // Ispisuje: "object"
     
    // Niz (Arrays)
    document.write(typeof [1, 2, 4] + "<br>");  // Ispisuje: "object"
     
    // Funkcija (Functions)
    document.write(typeof function(){});  // Ispisuje: "function"
    </script>
</body>
</html>

Kao što jasno možete vidjeti u gornjem primjeru kada testiramo nultu vrijednost koristeći operator typeof, vratio je "objekt" umjesto "null". Ovo je dugogodišnja greška u JavaScript, ali s obzirom na to da je puno kodova na webu napisano oko takvog ponašanja i na taj način stvorilo bi puno više problema, pa je ideju o ispravljanju ovog problema odbio odbor koji dizajnira i održava JavaScript.