Osnove JavaScript programiranja: Od tipova podataka do ES6 klasa

JavaScript: Opšte karakteristike

JavaScript (JS) je skriptni, dinamički i slabo tipiziran jezik, univerzalan za klijentsku stranu i case-sensitive je (razlikuje velika i mala slova).

• Dinamički: Tipovi se dodeljuju u toku izvršenja, pa ista promenljiva može menjati tip.
• Slabo tipiziran: Dozvoljene su operacije između različitih tipova (npr. konkatenacija broja i stringa).

JS je prototipski baziran jezik sa funkcijama prve klase; podržava objektno-orijentisano, imperativno i funkcionalno programiranje. Tipovi podataka uključuju: Number, String, Boolean, Object (Function, Array, Date, RegExp), null i undefined. Standard jezika definiše ECMAScript (ECMA organizacija), dok se na serveru JS izvršava preko Node.js okruženja.

Tipovi podataka: Primitivni i Objekti

Podela tipova podataka u JavaScript-u je sledeća:

Primitivni tipovi

Vrednosti se čuvaju u brzom delu memorije koja se naziva stack i imaju nepromenljivu (immutable) vrednost. U njih spadaju:

• String
• Number
• Boolean
• Null
• Undefined
• Symbol (uveden u ES2015)

Objekti (Referentni tipovi)

Objekti su kolekcije svojstava (ključ–vrednost), gde vrednost može biti bilo koji tip, uključujući druge objekte. Kreiraju se putem objektnih literala, funkcija-konstruktora ili klasa. Referentni tip vrednosti se čuva u sporijem delu memorije koji se naziva heap. Za razliku od primitivnih tipova, referentni tipovi su promenljivi tokom vremena.

Promenljive i opseg (Scope)

JavaScript prepoznaje različite tipove podataka, ali nije strogo tipiziran jezik. Deklaracija se vrši ključnim rečima:

• var: Zastareo način, ima problem sa opsegom (scope).
• let: Blok opseg, uveden 2015. godine.
• const: Vrednost se ne menja nakon inicijalne dodele.

Ako promenljivoj nije dodeljena vrednost nakon deklaracije, ona ima vrednost undefined.

Funkcije u JavaScript-u

Funkcije se deklarišu ključnom rečju function i mogu imati globalni ili lokalni opseg. Poziv je moguć i pre same deklaracije zahvaljujući mehanizmu koji se zove hoisting.

Funkcijski izrazi (Function Expressions)

Nastaju kada se nekoj promenljivoj dodeli funkcija (ne može se pozvati pre te dodele):
let x = function(a1, a2){ ... }

Arrow funkcije (Lambda funkcije)

Uvedene u ES6 kao kraći zapis anonimnih funkcija: let f = (x) => x + 1;. Ako postoji samo jedan parametar, zagrade nisu obavezne: let f = x => x + 1;. Najčešće se koriste uz metode kao što su map(), filter() i reduce().

Razlika između deklaracije i izraza funkcije

• Deklaracija funkcije: Obrađuje se u fazi kompilacije i može se pozvati bilo gde u kodu.
• Izraz funkcije: Ponaša se kao promenljiva i može se pozvati tek nakon što je definisan.

Hoisting – Podizanje deklaracija

Hoisting je mehanizam kojim se deklaracije funkcija i promenljivih pomeraju na vrh opsega u kome se nalaze. var promenljive se odmah inicijalizuju na undefined, dok let i const ostaju neinicijalizovane u tzv. temporal dead zone – referenciranje pre inicijalizacije baca grešku.

Nizovi i ugrađene metode

Niz je specijalan tip objekta (typeof vraća "object"), ali se članovima pristupa preko indeksa. Može sadržati elemente različitih tipova. Kreira se pomoću [1, 2, 3] ili new Array(1, 2, 3).

Najčešće metode nizova:

• push/pop: Dodavanje/uklanjanje na kraju.
• shift/unshift: Dodavanje/uklanjanje na početku.
• slice/splice: Isecanje i modifikacija niza.
• sort: Podrazumevano leksikografski (po UTF-16 kodu).
• forEach: Obilazak svih elemenata.
• length: Svojstvo koje vraća broj elemenata niza.

DOM (Document Object Model)

DOM je hijerarhijsko (stablo) predstavljanje HTML/XML dokumenta preko koga JavaScript pristupa i menja elemente stranice. Svaki tag je čvor stabla.

Najčešće funkcije API-ja:

• document.getElementById(): Vraća element sa zadatim ID-jem.
• document.querySelector(): Vraća prvi element koji ispunjava CSS selektor.
• document.querySelectorAll(): Vraća sve elemente koji ispunjavaju uslov.
• element.addEventListener(): Dodavanje osluškivača događaja.
• document.createElement(tag): Kreiranje novog elementa.
• roditelj.appendChild(element): Dodavanje elementa u DOM stablo.

Closure i konteksti izvršenja

Closure (zatvorenje) je kombinacija funkcije i njenog leksičkog okruženja. Leksičko okruženje predstavlja skup svih identifikatora u scope-u u trenutku kreiranja funkcije. Ugnježdena funkcija zadržava pristup promenljivama roditeljske funkcije čak i nakon što se roditeljska funkcija završi sa izvršavanjem.

IIFE i Module šablon

IIFE (Immediately Invoked Function Expression) je funkcija koja se izvrši čim se deklariše: (function(a){ return a+1; })(5);. Koristi se za simulaciju Singleton obrasca i kreiranje privatnih članova.

Module Pattern

Ovaj šablon "umotava" skup promenljivih i funkcija u jedan opseg, razdvajajući javne i privatne članove. Privatni članovi nisu dostupni van funkcije, dok se javni izlažu kroz objekat koji funkcija vraća (return).

Objektni literali

Objekti se mogu kreirati direktno: let person = {firstName: "John", age: 50};. Pristup svojstvima vrši se preko tačke (person.firstName) ili zagrada (person["firstName"]). Metode unutar objekta koriste ključnu reč this da bi referencirale sam objekat.

Prototipovi i nasleđivanje

Svi JS objekti nasleđuju svojstva i metode od prototipa. Konstruktorska funkcija ima svojstvo prototype, dok instancirani objekti imaju __proto__. Ovo formira Prototype chain (lanac prototipova) koji se završava sa Object.prototype.

ES6 Klase

ES6 uvodi ključnu reč class i funkciju constructor. Upotreba this je obavezna za pristup atributima.

• Export/Import: Omogućava korišćenje klasa u različitim fajlovima.
• Static članovi: Definišu se rečju static i pozivaju se preko imena klase.
• Nasleđivanje: Ostvaruje se ključnom rečju extends, dok se super koristi za pristup konstruktoru i metodama nadklase.

Za razliku od funkcija, klase ne podržavaju hoisting, pa deklaracija mora stajati pre upotrebe u kodu.