JavaScript - Objekti

Šta su objekti?

JavaScript je objektni jezik i u JavaScript je gotovo sve objekt ili se ponaša kao objekt. Dakle, da bismo učinkovito i efikasno radili sa JavaScript-om moramo razumjeti kako objekti funkcionišu, kao i kako stvoriti vlastite objekte i kako ih koristiti. JavaScript objekt je samo zbirka imenovanih vrijednosti. Navedene vrijednosti obično se nazivaju svojstvima objekta. Ako se sjećate iz lekcije JavaScript nizovi, niz je skup vrijednosti, gdje svaka vrijednost ima indeks (numerički ključ) koji počinje od nule i iznosi po jedan za svaku vrijednost. Objekt je sličan nizu, ali razlika je u tome što ćete sami definisati ključeve, poput imena, starosti, pola i tako dalje. U narednom dijelu detaljno ćemo saznati više o objektima.


Kreiranje objekta

Objekt se može kreirati s vitičastim zagradama {} sa opcionalnim popisom svojstava. Svojstvo je par "ključ:vrijednost (key: value)", gdje je ključ (ili ime svojstva) uvijek string, a vrijednost (ili vrijednost svojstva) može biti bilo koji tip podataka, kao što su: stringovi, brojevi, booleans ili složeni tip podataka kao što su: nizovi, funkcije i ostali objekti. Uz to, svojstva s funkcijama kao njihove vrijednosti često se nazivaju metodama za njihovo razlikovanje od ostalih svojstava. Tipični JavaScript objekt može izgledati ovako: 

var person = {
    name: "Miloš",
    age: 29,
    gender: "Muško",
    displayName: function() {
        alert(this.name);
    }
};
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Kreiranje objekata u JavaScript</title>
</head>
<body>
    <script>
    var person = {
        name: "Miloš",
        age: 29,
        gender: "Muško",
        displayName: function() {
            alert(this.name);
            }
    };
    
    document.write(person.name + "<br>"); // Ispisuje: Miloš
    document.write(person.age + "<br>"); // Ispisuje: 29
    document.write(person.gender); // Prints: Muško
    console.log(person); 
    </script>
</body>
</html>

Ovaj primjer stvara objekt zvan person koji ima tri svojstva ime, dob i pol, kao i jednu metodu displayName(). Metoda displayName() prikazuje vrijednost this.name, koja se rješava na person.name. Ovo je najlakši i najpoželjniji način kreiranja novog objekta u JavaScript, koji je poznat kao sintaksa objektnih literala. Imena svojstava uglavnom ne treba citirati ako nisu rezervisane riječi ili ako sadrže razmake ili posebne znakove (sve osim slova, brojeva i znakova _ i $ karaktera) ili ako počinju s brojem, kao što je prikazano u sljedećem primjeru: 

var person = {
    "first name": "Miloš",
    "current age": 29,
    gender: "Muško"
};

Pristup svojstvima objekta

Da biste pristupili ili dobili vrijednost svojstva objekta, možete upotrijebiti notaciju tačke (.) ili uglaste zagrade ([]), kao što je prikazano u sljedećem primjeru: 

var book = {
    "name": "Harry Potter and the Goblet of Fire",
    "author": "J. K. Rowling",
    "year": 2000
};

// Tačka notacija
document.write(book.author);  // Ispisuje: J. K. Rowling

// Uglaste zagrade notacije
document.write(book["year"]); // Ispisuje: 2000
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobijanje svojstva vrijednosti objekta</title>
</head>
<body>
    <script>
    var book = {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000
    };
    
    // Tačka notacija
    document.write(book.name + "<br>");  // Ispisuje: Harry Potter and the Goblet of Fire
    document.write(book.author + "<br>");  // Ispisuje: J. K. Rowling
    document.write(book.year);  // Ispisuje: 2000
    document.write("<hr>");
    
    // Uglaste zagrade notacija
    document.write(book["name"] + "<br>");  // Ispisuje: Harry Potter and the Goblet of Fire
    document.write(book["author"] + "<br>");  // Ispisuje: J. K. Rowling
    document.write(book["year"]);  // Ispisuje: 2000
    </script>
</body>
</html>

Zabilješke tačake je lakše čitati i pisati, ali se ne može uvijek upotrijebiti. Ako ime svojstva nije valjano (tj. ako sadrži razmake ili posebne znakove), ne možete koristiti notaciju točaka. Moraćete koristiti notaciju uglaste zagrade, kao što je prikazano u sljedećem primjeru: 

var book = {
    name: "Harry Potter and the Goblet of Fire",
    author: "J. K. Rowling",
    "publication date": "8 July 2000"
};

// Uglaste zagrade notacija
document.write(book["publication date"]); // Ispisuje: 8 July 2000
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pristup svojstvima objekta pomoću uglastih zagrada</title>
</head>
<body>
    <script>
    var book = {
        name: "Harry Potter and the Goblet of Fire",
        author: "J. K. Rowling",
        "publication date": "8 July 2000"
    };
    
    // Uglaste zagrade notacija
    document.write(book["publication date"]); // Ispisuje: 8 July 2000
    </script>
</body>
</html>

Notacija uglaste zagrade nudi mnogo više fleksibilnosti od notacije tačake. Takođe vam omogućava da odredite imena svojstava kao varijable umjesto samo string literale, kao što je prikazano u sljedećem primjeru: 

var person = {
    name: "Miloš",
    age: 29,
    gender: "Muško"
};

var key = prompt("Unesite bilo koje ime svojstva da biste dobili njegovu vrijednost");
alert(person[key]); // Ispisuje: Miloš ("name")
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dinamički pristupa svojstvima objekta koristeći varijable</title>
</head>
<body>
    <script>
    var person = {
        name: "Miloš",
        age: 29,
        gender: "Muško"
    };
    
    var key = prompt("Unesite bilo koje ime svojstva da biste dobili njegovu vrijednost");
    alert(person[key]); // Ispisuje: Miloš (ako unesete "name")
    </script>
</body>
</html>

Pregledavanje kroz svojstva objekta

Možete ponoviti parove ključa i vrijednosti objekta pomoću petlje for...in. Ova petlja je posebno optimizovana za ponavljanje svojstava objekta. Pogledajmo primjer: 

var person = {
    name: "Miloš",
    age: 29,
    gender: "Muško"
};

// Iteracija nad svojstvima objekta
for(var i in person) {  
    document.write(person[i] + "
"); // Ispisuje: name, age i gender (ime, godine, pol)
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Petlja kroz objekt</title>
</head>
<body>
    <script>
    var person = {
        name: "Miloš",
        age: 29,
        gender: "Muško"
    };
    
    // Iteracija nad svojstvima objekta
    for(var i in person)  {  
        document.write(person[i] + "<br>"); // Ispisuje: name, age i gender (ime, godine, pol)
    }
    </script>
</body>
</html>

Postavljanje svojstava objekta

Slično tome, možete postaviti nova svojstva ili ažurirati postojeće koristeći oznaku tačke (.) ili zagrade ([]), kao što je prikazano u sljedećem primjeru: 

var person = {
    name: "Miloš",
    age: 29,
    gender: "Muško"
};

// Postavljanje novog svojstva
person.country = "Bosna i Hercegovina";
document.write(person.country); // Ispisuje: Bosna i Hercegovina

person["email"] = "milosmihaljica@mail.com";
document.write(person.email); // Ispisuje: milosmihaljica@mail.com

// Ažuriranje postojećih svojstava
person.age = 30;
document.write(person.age); // Ispisuje: 30

person["name"] = "Miloš Mihaljica";
document.write(person.name); // Ispisuje: Miloš Mihaljica
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Postavite svojstva objekta</title>
</head>
<body>
    <script>
    var person = {
        name: "Miloš",
        age: 29,
        gender: "Muško"
    };
    
    // Postavljanje novog svojstva
    person.country = "Bosna i Hercegovina";
    document.write(person.country + "<br>"); // Ispisuje: Bosna i Hercegovina
    
    person["email"] = "milosmihaljica@mail.com";
    document.write(person.email + "<br>"); // Ispisuje: milosmihaljica@mail.com
    
    // Ažuriranje postojećih svojstava
    person.age = 30;
    document.write(person.age + "<br>"); // Ispisuje: 30
    
    person["name"] = "Miloš Mihaljica";
    document.write(person.name); // Ispisuje: Miloš Mihaljica
    </script>
</body>
</html>

Brisanje svojstava objekta

Operator brisanja može se koristiti za potpuno uklanjanje svojstava iz objekta. Brisanje je jedini način da stvarno uklonite svojstvo iz objekta. Postavljanje svojstva na nedefinisano ili nulto samo mijenja vrijednost svojstva. Ne uklanja svojstvo iz objekta. Pogledajmo sljedeći primjer: 

var person = {
    name: "Miloš",
    age: 29,
    gender: "Muško",
    displayName: function() {
        alert(this.name);
    }
};

// Brisanje svojstva
delete person.age;
alert(person.age); // Ispisuje: undefined
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Uklonanje svojstva s objekta</title>
</head>
<body>
    <script>
    var person = {
        name: "Miloš",
        age: 29,
        gender: "Muško",
        displayName: function() {
            alert(this.name);
        }
    };
    
    // Brisanje svojstva
    delete person.age;
    document.write(person.age); // Ispisuje: undefined
    </script>
</body>
</html>

Pozivanje metode objekta

Metodi objekta možete pristupiti na isti način kao što pristupate svojstvima - koristeći notaciju tačake ili koristeći notaciju u obliku zagrade. Pogledajmo primjer: 

var person = {
    name: "Miloš",
    age: 29,
    gender: "Muško",
    displayName: function() {
        alert(this.name);
    }
};

person.displayName(); // Ispsuje: Miloš
person["displayName"](); // Ispsuje: Miloš
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pozivanje metode objekta</title>
</head>
<body>
    <script>
    var person = {
        name: "Miloš",
        age: 29,
        gender: "Muško",
        displayName: function() {
            document.write(this.name);
        }
    };
    
    person.displayName(); // Ispisuje: Miloš
    document.write("<br>");
    person["displayName"](); // Ispisuje: Miloš
    </script>
</body>
</html>

Manipulisanje prema vrijednosti u odnosu na referencu

JavaScript objekti su referentni tipovi koji znače kad ih napravite, zapravo kopirate reference na taj objekt. Dok se primitivne vrijednosti poput stringova i brojeva dodjeljuju ili kopiraju kao cjelovite vrijednost. Da biste bolje razumjeli sve ovo, pogledajmo sljedeći primjer: 

var message = "Hello World!";

var greet = message; // Dodijeljivanje promjenjivu poruku novoj varijabli
greet = "Ćao svima!";

document.write(message);  // Ispisuje: Hello World!
document.write(greet);  // Ispisuje: Ćao svima!
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Kopiranje vrijednosti</title>
</head>
<body>
    <script>
    var message = "Hello World!";

    var greet = message; // Dodijeljivanje promjenjivu poruku novoj varijabli
    greet = "Ćao svima!";
    
    document.write(message + "<br>");  // Ispisuje: Hello World!
    document.write(greet);  // Ispisuje: Ćao svima!
    </script>
</body>
</html>

U gornjem primjeru smo napravili kopiju varijable poruke i promijenili vrijednost te kopije (tj. varijabla pozdrav variable greet). Dvije varijable ostaju različite i odvojene, ali ako učinimo istu stvar s nekim objektom, dobićemo drugačiji rezultat, kao što ćete viditi u sljedećem primjeru: 

var person = {
    name: "Miloš",
    age: 29,
    gender: "Muško"
};

var user = person; // Dodijeljivanje varijabli person novu varijablu
user.name = "Marko";

document.write(person.name);  // Ispisuje: Marko
document.write(user.name);  // Ispisuje: Marko
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Kopija reference</title>
</head>
<body>
    <script>
    var person = {
        name: "Miloš",
        age: 29,
        gender: "Muško"
    };
    
    var user = person; // Dodijeljivanje varijabli person novu varijablu
    user.name = "Marko";
    
    document.write(person.name + "<br>");  // Ispisuje: Marko
    document.write(user.name);  // Ispisuje: Marko
    </script>
</body>
</html>

Jasno možete vidjeti, bilo kakve promjene napravljene na varijabli user, takođe mijenjaju varijablu person. To se događa, jer obe varijable upućuju na isti objekt. Dakle, jednostavno kopiranje objekta zapravo ga ne klonira, već kopira referencu na taj objekt.