
U ovom postu ćemo proći kroz CORS, šta je i za šta se koristi.

## Šta je CORS ?

Cross-Origin Resource Sharing (CORS) je HTTP-header-based mehanizam koji omogućava serveru da pokazuje bilo koje porijeklo (domena, schema ili port) kojem će browser dozvoliti da downloaduje resurse, ne ukljućujući samog sebe jer je to omogućeno defaultno. CORS se također oslanja na mehanizam kojim browser šalje "preflight" request serveru na kojem se nalazi cross-origin resurs, da bi provjerio da li će taj server prihvatiti request. U tom preflight requestu browser šalje headers koji sadrže HTTP metodu i headers koji će biti u pravom requestu.

Na primjer, ako želimo da download podatke sa stranice example-b.com, i pokušavamo da ih download sa stranice example-a.com, mi prvo moram da dozvolimo na stranici example-b.com ko može da pošalje requeste, kod nas je to example-a.com i nakon toga example-a.com može da šalje request na stranicu example-b.com. Ovo moramo da uradimo jer browser defaultno ne dozvoljava da se šalju request na stranice koje nisu dali dozvolu za to. Imamo dvije vrste requesta koji šaljemo sa browser: two types of requests on frontend:

### - **Simple**

### - **Preflight**

<br />

**Simple** je tip requesta koji se koristi kada želimo da pošaljemo određene HTTP Metode (GET, HEAD, POST) koji ne zahtjevaju dodatni "preflight" request (OPTIONS) da se pošalje da provjeri da li je request dovoljen prije nego pošalje naš request. Ukoliko dodamo custom headers u nas request, taj request više nije simple tipa, i prije njega browser mora da pošalje "preflight" da bi provjerio sa serverom da li imamo dozvolu za naš request. Ovo je animacija simple requesta:

<div className="gif-container">
  <img src="/simple-get-request.webp" />
  <p className="gif-credentials">
    Animation by{" "}
    <a
      target="_blank"
      rel="noopener noreferrer"
      href="http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a"
    >
      Fatima Trtak
    </a>
  </p>
</div>

**Preflight** je tip requesta koji koristi dodatni OPTIONS request koji browser pošalje automatski prije nego se pošalje naš request da bi se provjerilo sa serve da li imamo dozvolu i da li taj server podržava HTTP metodu koju pokušavamo izvršiti. Neke od metoda koje koriste ovaj tip requesta su (DELETE, PATCH, PUT, ...). Ispod je slika koja prikazuje preflight request:

<div className="gif-container">
  <img src="/preflight-get-request.webp" />
  <p className="gif-credentials">
    Animation by{" "}
    <a
      target="_blank"
      rel="noopener noreferrer"
      href="http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a"
    >
      Fatima Trtak
    </a>
  </p>
</div>

U ovim slikama iznad može se vidjeti par headera koji se koriste sa CORS: **Access-Control-Allow-Origin**, **Access-Control-Request-Method** i
**Access-Control-Request-Headers**. Njih ćemo objasniti kasnije u ovom postu.

> NOTE: CORS se koristi samo za requeste koji se upućuju na servere na drugim domenama, jer kada su na istoj domeni/serveru mi imamo kontrolu nad resursima i onda su manje šanse da se desi neki security propust. Tako da po default nemamo omogućen CORS na requestima koji su na istoj domen/serveru. Na primjer, ukoliko imamo frontend aplikaciju na localhost:3000 i backend podignut na localhost:5000, svaki request sa frontenda na backend imat ćemo CORS omogućen na tim requests jer su oba tretirana kao odvojene domene jer nisu na istim portovima. Da bi omogućili da se ti requesti šalju bez CORS mogžemo koristiti nešto kao što je NGINX koji će biti na portu npr. 80, i filtrirat će sve zahtjeve koje dobijemo, znaći kada pošaljemo zahtjev na localhost:80 NGINX će preusmjeriti frontend pozive na localhost:3000 a backend na localhost:5000 i tako nećemo dobiti CORS od browsera jer je sve na istoj domeni. Ukoliko želite proćitati više o NGINX i kako se namjesti posjetite ovaj [link](http://nginx.org/en/docs/)

## Kako riješiti CORS issue

Svi smo se mi morali susreti sa CORS tokom developmenta i vjerovatno smo pronašli rješenje na internetu i samo ga dodali bez da znamo šta ustvari to rješenje radi. Gledali smo samo da riješi CORS problem i nastavili dalje development. Ali generalno bi trebali praktikovati da razumijemo šta dodajemo u projekat da ne bi slučajno dodali neočekivane greške. CORS je veliki dio web developmenta i trebali bi ga općenito bolje razumjeti. Ne zahtjeva previše da ga naučimo ali ga ipak riješimo dodavanjem gotovih rješenja sa interneta. Kao što nas je većina uradila, našli slično rješenje ovome ispod i dodali ga u svoj code:

```js
res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
res.setHeader(
  "Access-Control-Allow-Methods",
  "GET, POST, OPTIONS, PUT, PATCH, DELETE"
);
res.setHeader("Access-Control-Allow-Headers", "X-Something,content-type");
res.setHeader("Access-Control-Allow-Credentials", true);
```

Ovo je standradno rješenje za CORS isse, gdje ga samo kopiramo u naš code, čak i ako naš code ima samo POST i GET metode, mi dodamo za PUT, PATCH i DELETE metode access bez ikakvog razloga za to. Access-Control-Allow-Credentials: true, znaći da želimo da dodamo kredencijale sa našim requestima.
Kredencijali mogu biti cookies ili authorization headers ili TLS client certificates. Ako dodamo **credentials** u naš request body onda ćemo imate preflight request koji će provjeriti da li server također ima omogućene credentials. Ako ima omogućene, browser će automatski dodati cookie za tu domenu koja pravi request i ako server odgovori sa **Access-Control-Allow-Credentials: true** onda mi dobijemo response sa našom datom koju smo tražili, a ako ne browser će reject taj request i baciti error. Simple GET requesti nemaju preflight provjeru ali ako dodamo credentials u naš request body onda ćemo imati provjeru koja će dobiti odgovor od servera da li su omogućeni kredencijali, ako jesu dobijemo response ako ne, browser će samo ignorisati response sa servera.

I kao što možete vidjeti mi šaljemo dosta headera sa servera iako ih ne trebamo, ukoliko ne trebaju credentials u requestima onda ne trebamo dodavati **Access-Control-Allow-Credentials** u code, i ako nemam neku od metoda na serveru onda ih trebamo ukloniti iz **Access-Control-Allow-Methods**, tako da naš code sadrži samo ono što nam je potrebno.

Sada kada smo vidjeli primjer gdje se rješenje kopira sa interneta, pogledajmo kako mi možemo da riješimo CORS bez da pretražujemo internet i da razumijemo šta se dešava u code.

Prvi header koji bi trebali dodati je Access-Control-Allow-Origin, onda Access-Control-Allow-Headers, Access-Control-Allow-Methods, i Access-Control-Allow-Credentials ovisno o tome da li imamo authorization na serveru ili nemamo.

**Access-Control-Allow-Origin**

Ovaj header kontroliše na serveru ko ustvari može da traži i dobije podatke, i ako nemamo na serveru ovaj header niko neće moći dobiti podatke i izbacivat će im CORS error.
Prvu vrijednost koju možemo da stavimo u ovaj i inače se koristi u večini slučajeva jeste wildcard _\*_. Kada dodamo  _Access-Control-Allow-Origin: \*_, znaći da bilo ko može da traži datu sa našeg servera i da je dobije. Inače datu koju dodajemo na server je dostupna svima tako da ovaj header to omogućava. Slijedeća opcija je da dodamo u ovaj header listu domena koje mogu da traže datu sa našeg servera. Na primjer ako stavimo _Access-Control-Allow-Origin: localhost:3000_,ovo znaći da jedino localhost:3000 može da pristupi našem serveru i dobije podatke i niko više, ovo je dobra opcija za kompanije koje žele da komuniciraju samo sa određenim domenama zbog dodatne sigurnosti.

**Access-Control-Allow-Headers**

Ovdje dodajemo listu headera koje naš server podržava i očekuje, npr. ako imamo authentikaciju "x-key" koji očekujemo na našem backend, onda ga dodamo u ovaj header tako da naš server može reći browseru da podržavamo ovaj header i da može da pošalje request koji ga sadrži. Ako imamo default headere, onda možemo da ne dodajemo ovaj header i browser će sam da handle ovaj header.

**Access-Control-Allow-Methods**

Ovdje dodajemo metode koje naš server podržava, tako da ukoliko pošalju metodu koju ne podržavamo izbacit će im CORS error. U ovaj header bi trebali dodati samo metode koje podržavamo tako da nam je lakše pratiti šta se dešava. Nemojte dodavati sve u slučaju da vam nekad neka zatreba, dodajte samo one koje podržava server.

**Access-Control-Allow-Credentials**

Ovaj header smo već spomenuli prije u ovom postu, ali ukratko ovaj header koristimo kada želimo da šaljemo kredencijale serveru. Cookies, authorization headers, ili TLS client certificates. Ovo trebamo samo kada šaljemo kredencijale, u svim ostalim ne trebamo ga dodati jer je po default vrijednot false za ovaj header.

Ovi headeri su najčešće korišteni da se enable CORS i da rade requests kao što je i planirano. U slučaju da vi imate drugačije zahtjeve na vašem projektu možete istražiti više o ovome, najbolje mjesto je [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) gdje možete naći skoro sve informacije koje vam trebaju.

## Zaključak

Sada bi trebali imati bolje razumijevanje CORS i kako da ga riješimo, sada nam ne treba kopirano rješenje sa interneta jer možemo sami da ga uradimo. Ukoliko vam je ova tema interesantna i ukoliko vam je pomogla, podijelite je i sa drugim pa da i onu mogu naućiti o ovoj temi.


Šta je CORS?


## Šta je code splitting ?

**Code splitting** je odvajanje upakovanog koda u manje komade koda da bi ih mogli download odvojeno i koristiti samo dijelove koda koji nam treba.
U React i Javascript frameworcima generalo kode je upoakovan u jedan veliki fajl. I to olasava da se doda u HTML koristeći samo jedan link. Ovo također umanjue pozive prema serveru, i u teoriji bi trebalo da ubrza otvaranje aplikacije i umanji saobračaj za tu aplikaciju. Ali ako radimo na toj aplikaciji i dodajemo nove fajlove taj jedan Javascript fajl vremenom postaje veći i veći, što znači da aplikacija postaje sporija i sporija. Inicijalno, jedan fajl je bio idealan, ali nakon što dodamo više fajlova, aplikacija usporava. Tako da moramo nađemo riješenje da ubrzamo otvaranje aplikacije i to nam omogučava **Code splittin**.

## Zašto nam treba code splitting ?

Mi koristimo **Code splitting** da razdvojimo kode i dependencies u više fajlova tako da možemo koristiti samo kod koji nam treba u određenom trenutku. Kada razmislite vidite da nam ustvari ne trebaju sve komponente odjednom, jer imamo više stranica, imamo više komponenti i download ih sve kada otvorimo našu aplikaciju, čak i ako korisnik neče posjetiti **admin** stranicu ili mozda **report** stranicu, ali ćemo ih ipak download sa tim jednim Javascript fajlom. Tako da kad aplikacije dođe do trenutka kada počne da usporava trebamo početi razmišljati o code splitting, ili razmišljati od početka. Možemo dinamički importovati komponente koje nam ne trebaju u određenom trenutku, kada npr. otvorimo home stranicu, download samo komponente i kode koji nam je potreban za home stranice. Tako da ne moramo download sve da bi prikazali samo par njih.

> **NOTE:** Više studija su pokazale da stranice koje imaju brz odaziv ostaljaju bolje impresije na korisnike, i da su veće šanse
> da će se taj korisnik ponovo vratiti na našu aplikaciju [Link studija](https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/)

## Kako možemo koristiti code splitting ?

Ukoliko koristimo create-react-app, Next.js ili Gatsby, ili neke slične alate, imamo code-splitting već namješten koristeći webpack. Ako koristite neki custom alat, ili ste sami kreirali svoj setup, možete dodati sami code-splitting u svoju aplikaciju. Ovdje je webpack [link](https://webpack.js.org/guides/code-splitting/) koji objašnjava kako postaviti code-splitting i lazy loading u vaš projekat. Ali može se postaviti koristeći bilo koji bundler kao npr. [Rollup](https://rollupjs.org/guide/en/#code-splitting), [Browersify](https://github.com/browserify/factor-bundle) ili [Parcel](https://parceljs.org/code_splitting.html) ili bilo koji drugi bundler.

Imamo par načina da dodamo code-splitting u naš React projekat:

**Dynamic import()**

Dynamic import je dodan u Javascript ES&, i podržava nativno code-splitting u našem Javascript kodu. Sa dynamic import je lako dodati code-splitting:

Prije:

```js App.js
import { Header } from './Header';

<Header />;
```

Poslije:

```jsx App.js
import React, { useState } from 'react';

export default function App() {
  const [Header, setHeader] = useState(null);

  React.useEffect(() => {
    import('./Header')
      .then((component) => {
        setHeader({ Component: component.default });
      })
      .catch((err) => {
        // Handle failure
      });
  }, []);

  return <div className='App'>{Header ? <Header.Component /> : null}</div>;
}
```

Ili sa async / await:

```jsx App.js
import React, { useState } from 'react';

export default function App() {
  const [Header, setHeader] = useState(null);

  React.useEffect(() => {
    (async () => {
      const component = await import('./Header');
      setHeader({ Component: component.default });
    })();
  }, []);

  return <div className='App'>{Header ? <Header.Component /> : null}</div>;
}
```

Ili ako želite koristiti Named Export umjesto Default Export kao u primjeru iznad, možete uraditi ovako:

```jsx App.js
import React, { useState } from 'react';

export default function App() {
  const [Header, setHeader] = useState(null);

  React.useEffect(() => {
    import('./Header')
      .then(({ Header }) => {
        setHeader({ Component: Header });
      })
      .catch((err) => {
        // Handle failure
      });
  }, []);

  return <div className='App'>{Header ? <Header.Component /> : null}</div>;
}
```

Ili sa async / await:

```jsx App.js
import React, { useState } from 'react';

export default function App() {
  const [Header, setHeader] = useState(null);

  React.useEffect(() => {
    (async () => {
      const { Header } = await import('./Header');
      console.log(Header);
      setHeader({ Component: Header });
    })();
  }, []);

  return <div className='App'>{Header ? <Header.Component /> : null}</div>;
}
```

Kako što možete vidjeti veoma je lako, samo je sintaksa malo čudna. I imamo također drugi način za code-splitting u React:

**React.lazy() and React.Suspense**

[React v16.6.0](https://reactjs.org/blog/2018/10/23/react-v-16-6.html) je dodao mogučnost da koristimo **code-splitting** u React, dodali su dva nova featura React.lazy() i React.Suspense koji nam omogučavaju da koristimo code-splittin direktno u React.

**React.lazy()**

> **NOTE:** U vrijeme pisanja ovoga bloga, Rreact.lazy() i Suspense nisu dostupni za server-side rendering, ali bi trebali biti nekad u budućnosti.
> Za sada možemo koristiti [Loadable Components](https://github.com/gregberge/loadable-components) da imamo code-splitting opcju za server-side rendering.

React.lazy na omogućava da dinamički importamo komponente, npr:

Prije:

```jsx App.js
import React from 'react';
import Header from './Header';

export default function App() {
  return (
    <div className='App'>
      <Header />
    </div>
  );
}
```

Poslije:

```jsx App.js
import React, { lazy, Suspense } from 'react';
const Header = lazy(() => import('./Header'));

export default function App() {
  return (
    <div className='App'>
      <Suspense fallback={<div>Loading stuff...</div>}>
        <Header />
      </Suspense>
    </div>
  );
}
```

Ovdje možete vidjeti koliko je lakše ovo koristiti nego Dynamic import, samo importamo lazy i Suspense iz React i koristimo ih da lazy importujemo komponente, i onda koristimo Suspense da prikažemo neku poruku dok čekamo da se load naše komponente. Nemojte zaboraviti staviti lazy importe unutar Suspense, jer React očekuje da ima neku pporuku dok se čeka. Također možemo koristit jedan Suspense za vise lazy loading komponenti:

```jsx App.js
import React, { lazy, Suspense } from 'react';
const Header = lazy(() => import('./Header'));
const Footer = lazy(() => import('./Footer'));

export default function App() {
  return (
    <div className='App'>
      <Suspense fallback={<div>Loading stuff...</div>}>
        <Header />
        <Footer />
      </Suspense>
    </div>
  );
}
```

> **NOTE:** ⚠️ U vrijeme kada se pisao ovaj post, React.lazy podržava samo **Default Exports**, i ako želite koristiti and **Named Exports** možete kreirati
> intermediate module koji moze da reexporta kao defaultnu komponentnu. Ovo omogučava da tree shaking radi kao što je očekivano i da se ne povuku nekorištene komponente.

```jsx Header.jsx
import React from 'react';

export const Header = () => {
  return <div>Header</div>;
};
```

```jsx ExportDefault.jsx
export { Header as default } from './Header';
```

```jsx App.jsx
import React, { lazy, Suspense } from 'react';
const Header = lazy(() => import('./ExportDefault'));
const Footer = lazy(() => import('./Footer'));

export default function App() {
  return (
    <div className='App'>
      <Suspense fallback={<div>Loading stuff...</div>}>
        <Header />
        <Footer />
      </Suspense>
    </div>
  );
}
```

Ovo postane malo naporno jer morate kreirati dodatnu komponentu samo da bi je export, moje mišljenje je da je bolje koristiti default export za komponente koje će se lazily loadirati.

**Error boundaries**

Kada koristimo lazy i Suspense postoji mogućnost da dođe do greške zbog greške u konekciji ili nekog drugog razloga i tada će lazy i Suspense baciti grešku. Tako da moramo da pokrijemo taj slučaj da nebi korisničko iskustvo išpastalo. Da bi ti spriječili koristimo ErrorBoundaries koji obuhvata Suspense i lazy, i riješava greške koje bi se mogle desiti dok se komponenta loada lazily. Ako želite da kreirate svoj ErrorBOundary možete posjetiti React oficijelnu dokumentaciju i koristiti njihove primjere, ali trenutno nema ekvivalentne opcije ErrorBoundary za Hooks, tako da se moraju pisati u class komponentama. Ja ću da koristim library koji se zove ,jer nisam ljubitelj class komponenti 😅.

```jsx App.js
import React, { lazy, Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
const Header = lazy(() => import('./ExportDefault'));
const Footer = lazy(() => import('./Footer'));

export default function App() {
  function ErrorFallback({ error, resetErrorBoundary }) {
    return (
      <div role='alert'>
        <p>Something went wrong:</p>
        <pre>{error.message}</pre>
        <button onClick={resetErrorBoundary}>Try again</button>
      </div>
    );
  }

  return (
    <div className='App'>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <Suspense fallback={<div>Loading stuff...</div>}>
          <Header />
          <Footer />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}
```

Mnogo lakše nego da se piše svoj ErrorBoundary koristeći class, ali to bi se trebalo promijeniti kada se napravi verzija koja koristi Hooks.

## Gdje koristimo code splitting 🤔

Jedan od načina gdje bi vjerovatno trebali koristiti code-splittin je u routama aplikacije. Kada razmislite o ovome, mnogi korisnici ne posječuju sve naše rute kada koriste našu aplikaciju, tako da nema razloga da usporavamo aplikaciju i povečavamo vrijeme čekanja samo da bi download kode koji nam vjerovatno neće trebati. Možemo odlućiti koje stranice se najčesće koriste i na osnovu tih informacija kreiramo code-splitting da bi napravili najbolje korisničko iskustvo.

```jsx App.js
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./Home'));
const Reports = lazy(() => import('./Reports'));

export default function App() {
  return (
    <div className='App'>
      <Router>
        <Suspense fallback={<div>Loading stuff...</div>}>
          <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/reports' component={Reports} />
          </Switch>
        </Suspense>
      </Router>
    </div>
  );
}
```

Ovako izgleda Javscript code brije code-splitting:

```text
main.chunk.js
main.12381831283.hot-update.js
bundle.js
0.chunk.js
```

A ovako izgleda nakon što dodamo code-splitting:

```text
main.chunk.js
main.12381831283.hot-update.js
bundle.js
0.chunk.js
2.chunk.js
```

Kao što možete vidjeti ovdje imamo dodatni fajl **2.chunk.js**, koji se kreirao kada smo otvorili npr. /home rutu i download se samo Home.js a ne sve ostalo komponente. Ako želite da provjerite kako izgledaju vaši fajlovi prije i poslije dodavanja code-splitting, možete otvoriti Inspect u Chrome i onda otići na Network tab, i iz filter toolbar, izabrati JS tako da nam se prikažu samo Javascript fajlovi. Još jedna korisna stvar u Chrome je Coverage tab, koji nam prikazuje sve Javascript fajlove na stranici koji su download i koliki procenat tog koda se ustvari koristi. Da bi otvorili Coverage tab u Chrome prvo otvorite Inspect i onda pritisnete Ctrl+Shift+P i ukucate **Show Coverage**
i pritisnete enter, i trebalo bi vam prikazati Coverage tab. Ovdje je je [link](https://developer.chrome.com/docs/devtools/coverage/) koji govori o tome kako se koristi Coverage tab da se vidi nekorišteni kode. Ja neću ulaziti dublje u ovu mogućnost jer je post o code-splitting.

Također, još jedan od primjera kada bi mogli koristiti code-splittin je u aplikacijama gdje imamo role admin, user itd. Npr. mi se logujemo u naššu aplikaciju kao normalni user, i kada se logujemo download kod od cijele aplikacije, uključujući i admin panel kojem mi nemamo pristup. Tako da mi download sav taj kod i usporimo aplikaciju a uopšte nemamo mogućnost da koristimo admin panel. Ovo je odličan razlog da se doda code-splitting i da se download samo dijelovi aplikacije koje možemo koristitii koji nam trebaju za rendanje te stranice. Ovo će nam ubrzati stranicu, a i zaustaviti radoznale ljude da istražuju po aplikaciji i razgledaju naš admin panel kode 🧐

> Ako želite da testirate brzinu svoje aplikacije možete koristiti tool u Chrome koji se zove Lighthouse, možete pristupiti tako što će te otvoriti Inspect i otići na
> Lighthouse tab. Ima opcija da se testiraju mnoge stvari na Mobile i Desktop verziji aplikacije

> **NOTE:** Kada testiramo brzinu nase aplikacije, bitno je da znamo da je development verzija aplikacije je mnogo sporija od produkcijske verzije jer se u development verziji > ne koriste metode sa čisćenja i smanjivanja koda kao npr. [minification](https://webpack.js.org/guides/production/#minification), [uglification](https://webpack.js.org/migrate/3/#uglifyjsplugin-sourcemap), itd. a i da bi nam olakšali debugging

## Zaključak

Da sumiramo, prošli smo kroz to šta je code-splitting, kako se koristi, i primjeri gdje bi ga možda mogli koristiti. Ovo bi trebao biti dobar početak za vas da počnete koristiti code-splitting u vašoj aplikaciji i pratiti kako se brizine pokretanja mijenjaju. Ako mislite da je ovaj post informativan i korista, molim vas podijelite i sa drugima da bi i oni mogli imati koristi od ovoga. Također nemojte stati na ovom postu, otvorite linkove koje sam dodao u ovom postu i posjetite i oficijelnu [React](https://reactjs.org/docs/code-splitting.html) dokumentatciju za više informacija


Code splitting u React


Postoje mnogi odgovori na ovu temu koji se kreću po internetu, ali mnogi od njih čine ga komplikovanim iz nekog razloga prilikom objašnjavanja. To ne bi trebalo biti tako teško razumjeti pa ću pokušati ispuniti praznine za ovu temu. Također sam primijetio da slike mogu pomoći pri pokušaju razumijevanja stvari,tako da ču koristiti jednostavne primjere da objanism **debounce** i **throttle** u JavaScript.

## Šta je **debounce**? ⚽

To je programski način koji koristimo da određeni taskovi ne pozivaju stalno. Ustvari zabranimo da se izvršavaju određene akcije jedna za drugom.
I to uspjevamo tako što odgodimo izvršavanje akcija, i svaki put kada pokušamo da izvršimo akciju odgodimo je za odredjeno vrijeme, i prethodna akcija se ukloni tako da nebi izvršili svaku akciju, nego samo posljednju.

Ispod je slika koja pokazuje debouncing:

![alt](/js-debounce.png)

<div className='gif-container'>
  <p className='gif-credentials'>
    Drawing by{' '}
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a'
    >
      Fatima Trtak
    </a>
  </p>
</div>

Kao što vidite, ako kliknemo dugme više puta, nečemo izvršiti akciju koju dugme poziva sve dok ne prestanemo kliktati na dugme, i dok ne prodje određeno vrijeme koje smo zadali mi. Kada vrijeme prođe. izvršimo akciju. Ispod je primjer kako to možemo napisati u Javascript:

```js debounce.js
const debounce = (fn, delay) => {
  let timeoutID;

  return function (...args) {
    if (timeoutID) {
      clearTimeout(timeoutID);
    }

    timeoutID = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

document.getElementById('btn').addEventListener(
  'click',
  debounce((e) => {
    console.count('click');
  }, 1000)
);
```

```html index.html
<button id="btn">SUBMIT</button>
```

Ovdje imamo event listener na dugmetu sa id "_btn_". Svaki put kada kliknemo na to dugme, pozvat će se akcija koja će upisati rijeć "click" u konzolu.
Kada kliknemo na to dugme pozivamo funkciju da uradi debounce i proslijedimo joj dva paremetra. Prvi parametar je funkcija koja će se izvršiti nakon što prodje vrijeme, a drugi parametar je vrijeme koje čekamo da prođe do idućeg klika na dugme. Svaki put kad je debounce funckija pozvana, kreira se varijabla timeoutID koja će čuvati vrijednost od _setTimeout_. Ta vrijednost nam treba jer svaki put kliknemo na dugme nova vrijednost _setTimeout_ će biti kreirana, a prethodnu _setTimeout_ čemo obrisati, tako da nam ne budu izvršene sve funckije osim posljednje koje kreiramo nakon klika na dugme. Onda vračamo funckiju koja se izvršava nakon svakog klika. Unutar funckije prvo provjeramo da li več postoji _setTimeout_, ako ima prvo je obrišemo i onda dodamo **timeoutID** novoj _setTimeout_ koja će čekati da prođe vrijeme koje smo proslijedili ili dok ne kliknemo ponovno na dugme.

Nakon što vrijeme prođe, izvršit će se funckija koju smo poslali debounce, u našem slučaju to je **console.count('click')**.
Ispod imamo komponentu na kojoj možete probati i vidjeti šta se dešava kada imamo debounce i kada nemamo, kliknite na oba dugmeta i vidite kako se vrijednosti mijenjaju:

<DebounceBtnExample />

Kao što možete vidjeti, imamo mnogo manje klikova na debounced dugmetu nego na normalnom dugmetu. Ovo može biti korisno u aplikacijima gdje možda imate submit dugme za plačanje, i ako korisnik slučajno klikne dugme dva puta za redom, a nismo hendlali te klikove, mogu se poslati dva zahtjeva za plačanje i oduzet će se dupla suma sa računa korisnika od one koja je prikazana na aplikaciji. Debounce je posebno koristan kada se koristi pretraživanje, ako ste implementirali reaktivano pretraživanje, debounce može pomoći da se pošalje zahtjev tek kada se završi kucanje umjesto da se šalje nakon svakog slova.

## Šta je **throttle** ? 🏍

Za razliku od debounce, throttle se izvršava između vremenskih intervala, znači kada kliknemo na dugme prvi put, odmah se izvrši akcije, i ako nastavimo kliktati na dugme, throttle će se izvršavati nakon svakog vremenskog intervala koje smo mi postavili. Ispod je slika koja prikazuje to ponašanje:

![alt](/js-throttle.png)

<div className='gif-container'>
  <p className='gif-credentials'>
    Drawing by{' '}
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a'
    >
      Fatima Trtak
    </a>
  </p>
</div>

Možete vidjeti na ovoj slici ( nadam se 😊) da kada kliknemo na dugme izvrši se akcija, i onda ako nastavimo kliktati, neće se ništa desiti sve dok vremenski interval ne prođe i onda će se akcija opet izvršiti. Ako smo uporni i nastavimo kliktati na dugme akcija će se izvršavati svaki put kad vremenski interval prođe. Evo primjer kako to možemo uraditi u JavaScript:

```js throttle.js
const throttle = (fn, delay) => {
  let last = 0;
  return (...args) => {
    const now = new Date();
    if (now - last < delay) {
      return;
    }
    last = now;
    return fn(...args);
  };
};

document.getElementById('btn').addEventListener(
  'click',
  throttle((e) => {
    console.count('click');
  }, 2000)
);
```

```html index.html
<button id="btn">SUBMIT</button>
```

Kao i sa debounce primjerom, imamo dugme u Html sa id "_btn_", i imamo throttle funkciju koja će biti pozvana na svaki klik. Onda ćemo kreirati varijablu gdje će se držati vrijednost od zadnje izvršene akcije. U slijedećem koraku, šaljemo nazad funkciju koja ce biti izvršena na svaki klik, i unutar te funkcije provjeravamo da li je prošao vremenski interval od posljednjeg klika. Ako je interval manji od zadanog vremena, nećemo raditi ništa, ali ako nije manji, dodamo novo vrijeme koje ćemo porediti sa idućim klikovima.Ako je vremenski interval prošao izvršavamo funkciju u našem slučaju (**console.count('click')**).ISto vrijedi i za pretraživanje, ukoliko unosimo neki tekst, throttle će se izvršavati svaki put kad interval prodje. Primjer ispod prikazuje normalno dugme i pretraživanje i sa throttle, pokušaj i prati šta se dešava:

<ThrottleBtnExample />

Nadam se da ste probali primjere iznad, i vidjeli ponašanje throttle, i da ste vidjeli razliku throttle i debounce. Throttle se ne koristi mnogo u praksi, ali dobro ga je znati, i ko zna mozda je on bolje rešenje za tvoj projekat nego debounce.

## Zaključak

Nije bilo teško zar ne ? Malo je zbunjujuće, ali sa crtežima i interaktivnim primjerima lakše je za shvatiti. Debounce se često koristi i sada se može koristiti još više 😉. U postu smo vidjeli sta su debounce i throttle u JavaScript, gdje se mogu koristiti i kako radi. Ako si React developer, bit će ti drago da čuješ da planiram napraviti post o Debounce i Throttle u Reactu koristeći hooks, koji su drugaćiji poredeći sa JavaScript. Isto ako možete da podijelite stranicu i ovaj post sa drugima, pa da i oni mogu imati koristi od ovoga.


Detaljno o Javascript Debounce i Throttle


_Šta su Event Bubbling, Event Capturing i Event Propagation i kako raditi sa njima_

## Event Propagation

**Event Propagation** je osobina eventa u Javascriptu. Propagation znaći širenje u Engleskom riječniku i to je upravo ono što radi **Event Propagation**, širi evente kroz elemente u svojoj hierarhiji. To širenje se dešava u tri faze, prva faza je **Capturing**, druga je **Target** a zadnja je **Bubbling**. Proći čemo detaljno šta su ove faze.
**Capturing** je kada krenemo od početka dokumenta (window object) to elementa na kojem je izvršen neki event, što je u našem slučaju "td" element koje je ustvari druga faza to je **Target**, onda ulazimo u treću fazu koja je **Bubbling** i vraća se od "td" elementa na početak dokumenta odakle smo i krenuli. Moram isto spomenuti da se propagacija eventa može zaustaviti da ostane na elementu na kojem je izvršena tako što ćemo koristiti funkciju **stopPropagation()**. Ovo će zaustaviti da se event širi na elemente iznad njega.

> NOTE: Veoma važno za znati je da ne svi eventi imaju propagaciju, na primjer **blur**, **focus** i **scroll** nemaju propagaciju. Ne šire evente na svoje parente, grandparente, etc.
> Također **Event Propagation** se nekad naziva i **Event Delegation** što je ustvari isto, samo drugi naziv.

Ispod je animacija koja prikazuje kako radi Event Propagation koristeći bubbling:

<div className='gif-container'>
  <img src='/bubbling-normal.webp' />
  <p className='gif-credentials'>
    Animation by{' '}
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a'
    >
      Fatima Trtak
    </a>
  </p>
</div>

Ovdje imamo "div" element i unutar tog elementa imamo tabelu sa redovima. I u tim redovima imamo checkbox, ako kliknemo na taj checkbox pokrenut će se porpagacija za taj element. I svaki element koji ima na sebi event će biti izvršen, krenut će od _checkbox > td > tr > table > div > ... > window_. Ovo može biti korisno kada npr. želimo da kreiramo event na svaki od redova u tabli, pa da ne bi kreirali za svaki red pojedinačno, kreiramo event na tabeli i tako ćemo imati jedan event za sve elemente u tabeli. Možda da kreiramo event koji će na klik na red dodati clasu "active", koja će promijeniti boju reda. Ovaj pristup nam može uštediti pisanje eventa za svaki red, a znamo da pisanje manje koda je bolje 😎 .

> NOTE: Ako ste možda ćuli o **preventDefault()** i pomislili zašto da ne koristimo nju za zaustavljanje propagation, razlog je da ova funkcija radi samo za elemente koje imaju default ponašanje
> kao što je form, ali ako kliknemo na div za njega nemamo default ponašanje pa zato koristimo **stopPropagation()** da zaustavimo propagating.

## Event Bubbling

Ovo je default ponašanje u modernim browserima, tako da ću prvo ovo preći. **Event Bubbling** je ponašanje koje izvršava evente od početka dokumenta, osim onih koji smo rekli da nemaju propagation (blur, focus, scroll). Ako kliknemo na posljednji element u dokumentu desit će se **bubble** tj. širenje eventa i izvršit će se svi eventi na parent elementima. Npr. ako kliknemo na checkbox u tabeli, to će uzrokovati izvršavanje eventa na tom checkbox (ako ga ima) i onda će pokušati izvršiti "tr" pa "table" i sva tako do vrha dokumenta. Ispod je animacija koja prikazuje ovo ponašanje:

<div className='gif-container'>
  <img src='/bubbling-tree.webp' />
  <p className='gif-credentials'>
    Animation by{' '}
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a'
    >
      Fatima Trtak
    </a>
  </p>
</div>

Kao što možete vidjeti klik na checkbox uzrokuje bubbling eventa sve do vrha. Tako da ako elementi iznad imaju na sebi event, npr. tabela div izvršit će i njihove evente. Ovo ponašanje se može sprijećiti ukoliko ne želimo da se izvrše svi eventi iznad možemo koristiti **stopPropagation()** i do će uzrokovati da bude izvršen event samo od checkbox i nijedan drugi. Ovo može biti korisno na tabelama gdje svaki red ima dugme za brisanje reda ili editovanje, a imamo i event na redu, pa bi klik na edit uzrokovao i izvršavanje eventa na redu ili bilo koji event iznad, što nije željeno ponašanje. I ukoliko ne iskoristimo stop propagation, izvršit će se otvaranje prozora za edit npr. i odmah če se izvršiti event na redu koji npr. otvara novu stranicu sa detaljima tog reda. Znaći naš klik na edit će biti kratko prikazan i uklonjen, tako da korisnik nebi mogao ni pristupiti edit prozoru.

```html Bubbling.html 🎈
<div>
  div
  <table>
    <tr>
      <th>table</th>
    </tr>

    <tr>
      <td id="checkbox">
        <input type="checkbox" />
      </td>
      <td>input</td>
    </tr>
    <tr>
      <td id="checkbox">
        <input type="checkbox" />
      </td>
      <td>input</td>
    </tr>
    <tr>
      <td id="checkbox">
        <input type="checkbox" />
      </td>
      <td>input</td>
    </tr>
  </table>
</div>

<script>
  function clicked() {
    alert(this.tagName);
  }

  var elems = document.querySelectorAll('div, table, input');
  for (let elem of elems) {
    elem.addEventListener('click', clicked);
  }
</script>
```

Iznad imamo code koji možete kopirati i sami probati. Veoma je jednostavan, imamo _div_ i _table_ sa _rows_, također imamo _click_ evente na div, table i inputs. Također imamo na dnu posta primjer koji možete koristiti da vidite kako ovaj code izgleda i ponaša se.

## Event Capture

Ovaj event je dosta sličan Bubbling, ali za razliku od Bubbling kada kliknemo na checkbox u redu ono bi izvršilo evente od vrha dokumenta pa svo do targeta koji je checkbox, znaći event na checkbox bi se izvršio posljednji umjesto prvi. Ovo npr. može biti korisno kada želimo da obavjestimo prvo parenta i izvršimo event i onda da izvršimo child event. Ova faza mora biti enabled jer Bubbling je default ponašanje u browseru, a to možemo uraditi sa _addEventListener("click", function(e){},**true**)_. Ova vrijednost **true** je vrijednost parametra **useCapture** koji ima default vrijednost false, zato se Bubbling koristi jer je Capture isključen po default. Nakon što stavimo vrijednost na **true** imamo Capture ponašanje u browseru:

<div className='gif-container'>
  <img src='/capturing-tree.webp' />
  <p className='gif-credentials'>
    Animation by{' '}
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a'
    >
      Fatima Trtak
    </a>
  </p>
</div>

Vidite da je slično ponašanje kao kod Bubbling ali se eventi izvršavaju obrnuto, ispod je code koji je isti kao za bubbling ali smo uključili caputre fazu umjesto bubbling:

```html Capturing.html 📷
<script>
  function clicked() {
    alert(this.tagName);
  }

  var elems = document.querySelectorAll('div, table, input');
  for (let elem of elems) {
    // We added third parameter 'true' to enable capturing
    elem.addEventListener('click', clicked, true);
  }
</script>
```

A ovo je primjer kako da zaustavimo event bubbling ili capture koristeći stopPropagation:

```html StopPropagation.html
<script>
  function clicked(e) {
    alert(this.tagName);
    //Prevent event propagation
    e.stopPropagation();
  }

  var elems = document.querySelectorAll('div, table, input');
  for (let elem of elems) {
    elem.addEventListener('click', clicked, true);
  }
</script>
```

Ovo je primjer sa kojim se možete igrati, možete koristiti dugme iznad da promijeniti ponašanje iz "_bubbling_" u "_capturing_" i onda klikajte na elemente checkbox, div, table itd. da vidite koji se eventi izvršavaju. Nakon klika dobit će te alert za svaki izvršeni event.I

<EventPropagationExample />

## Zaključak

Ovo je bila interesantna tema za pisati, i nadam se da je ponašanje evenata sada jasnije. Ako mislite da je ovo bio koristan post, podijelite ga i sa drugima da i oni mogu vidjeti i naučiti iz njega.


Šta su Event Bubbling, Capturing i Propagation


_Šta trebate znati o Git, i Git komandama koji će te svakodnevno koristiti_

Kao što večina zna _git_ je veliki dio programiranja i koristi se svugdje i u svakom projetku. Tako da učenje komandi i kako ih koristiti je veoma bitno i korisno. Svaki projekat na kojem budete radili će imati neku vrstu gita: "Github", "GitLab", "BitBucket" ili bilo koji drugi. U ovom postu ćemo proći kroz komande koje se koriste svakodnevno i šta je to _git_.

> **NOTE:** Ako koristite neku vrstu GUI za git kao **SourceTree**, **Github Desktop** ili neki VSCode extenziju, pokušajte koristiti git konzolu za komande
> jer će to pomoći da se bolje razumije šta se dešava iza klikova na dugmad, a bit će i korisno ako negdje zapnete sa git i treba da shvatite šte se desilo.

## Šta je Git?

Git je vrsta version control system koji nam omogućava praćenje promjena u dokumentima. Na primjer, ako promijeniš neki fajl, git može da pokaže tačno koji fajl je promijenjen, ko je mijenjao fajl, i zašto je promijenjen. Git prati sve promjene na projektu tako da se može pogledati ko je mijenjao, kada i zašto, čak i promjene koje je uradio neko drugi na projektu.

Ovo može biti od velike koristi na projektu, ako se napravi greška u codu može se vratiti unazad i provjeriti sve promjene i vidjeti kada se i gdje desila greška. Samo zamislite svijet 🌍 bez gita, i napravili ste grešku u projektu koji ima mnogo fajlova i mnogo ljudi koji rade na njemu. Bilo bi veome teško da se pronađe greška, isto na šta još taj bug ima utjecaj. Zato alat kao što je git nam olakšava život i uzrokuje manje stresa 😄.

<div className='gif-container'>
  <iframe
    src='https://giphy.com/embed/susHG0bM68Poc2SAnI'
    className='giphy-embed'
    allowFullScreen
  ></iframe>

  <p className='gif-credentials'>
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='https://giphy.com/gifs/susHG0bM68Poc2SAnI'
    >
      via GIPHY
    </a>
  </p>
</div>

Kada inicijalizirmo git u našem projektu kreira se **local working directory**, što znaći da sve promjene se spašavaju na lokalnu mašinu i vi ste jedini koji možete pristupiti tom projektu. I u slučaju da se desi nešto toj mašini gdje se projekat nalazi i ne može se restore onda će se izgubiti sve sa njega uključujući i git projekat. Zato su Github i Gitlab alati koji nam pomažu da svoje projekte i fajlove spasimo bez obzira šta se desi sa našom mašinom. Šta ustvari ti alati rade jeste da kipiraju fajlove na internet i onda im možemo pristupati sa bilo koje mašine i kad god nam trebaju. Isto daju nam opciju da izabremo da li će projekat biti javni ili privatni, u slučaju da radimo sa više osoba na projetku ili ako radimo na nekom tajnom projektu i stavimo private 🔏 da niko ne može pristupiti osim nas. To se naziva **remote working directory** i imamo komande koje nam olkašavaju da pošaljemo svoje lokalne promjene na remote.

## Komande u Git 💻

> ## git add && git commit

Jedna od najčešće korištenih naredbi svakodnevno je ** _ git add _ ** i ** _ git commit _ **, koristimo ih za dodavanje promijenjenih fajlova u staged changes, što znači da ako imamo više datoteka promijenjenih u projetku, ali želimo samo neke fajlove u local repository, onda koristimo ** _git add_ ** i dodamo ih u staged changes i pripremimo ih za slijedeci korak koji je commiting.

```git
git add file.js
```

Koristeći ovu komandu možemo dodati jedan ili više fajlova i onda možemo ići na slijedeći korak koji je commitanje tih fajlova na local repository. Ako želite da dodate sve fajlove odjednom, umjesto da dodajete jedan po jedan sa git add možete koristiti git add . i dodati sve promijenjene fajlove odjednom.

```git
git add .
```

Nakon sto dodamo fajlove, možemo ići na idući korak commit i commitati ih sa ovom komandom:

```git
git commit -m "Commit message"
```

Onda commitamo fajlove na repository sa nekom kratkom porukom koja opisuje promjene u fajlovima i onda možemo nastaviti raditi bez straha da ćemo izgubiti promjene. Ako želimo da dodamo promjene fajlova u staged changes i da ih komitamo bez provjere koji fajlovi su promjenjeni, onda možemo kombinovati dvije komande i dodati i commit fajlove sa ovom komandom:

```git
git commit -am "Commit message"
```

> **NOTE:** Bolja opcija bi bila da se prvo dodaju fajlovi u staged chages i onda da se provjere fajlovi da nebi slučajno commit nešto što smo možda testirali ili provjeravali.
> Nakon što provjerimo fajlove onda ih možemo commit na repository.

> ## git status && git log

Iduce komande koje se četo koriste su **git status** i **git log**, ove dvije komande se koriste za provjere status fajlova.
**git status** nam prikazuje koji fajlovi su promjenjeni i koji od njih su dodani u staged changes. A **git log** nam prikazuje našu commit historiju sa njenim detaljima kao što su poruka, datum, ime osobe koja je napravila commit ...Ove dvije komande su korisne jer nam daju uvid u to šta je promijenjeno, šta je u staged changes i da provjerimo šta je i kada commit i šta se dešava na trenutnom branchu.

```git
git status
```

Probajte ovu ovu komandu u git konzoli i pratite šta se desi, ako imate promijenjenih fajlova pokazat će vam se u konzoli, i možda se igrajte sa **git add** komandom, dodajte fajlove u stage changes i vidite kako to izgleda.

```git
git log
```

Kada se izvrši ova komanda iznad **git log**, vidjet će te listu svih komita na lokalnom branchu, svi komiti će imate _commit id_ i _commit author_, također bi trebala i biti commit message koju je dodao autor kada je commitao promjenu. A ako ne želite da vidite sve te informacije možete koristiti komandu koja će vam vratiti samo osnvne informacije, i bit će preglednija lista:

```git
git log --oneline
```

Ima više varijanti za **git log** a i za ostale kommande, najbolje mjesto da ih vidite i informišete je officijelna Git dokumentacija [Git](https://git-scm.com/doc) i [ProGit](https://git-scm.com/book/en/v2) knjiga koja je besplatna, i ide mnogo dublje o git nego što je u ovom postu. Definitivno provjerite, vidite koje sve opcije, možda nađete nešto korisno.

> ## git branch && git checkout

Ove komande se također često koriste, ali ne toliko ako ove iznad što smo prošli. Koristimo ih kada želimo dodati nove stvari u aplikaciju ili ako želimo nešto testirati a nećemo da diramo ostatak aplikacije da nebi nešto pokvarili. Takve stvari se rade na posebnom branchu, koji ima iste fajlove kao i ostatak aplikacije, ali promjene nad njima ne utiču na ostale brancheve. Ovako možemo raditi šta god želimo bez straha da čemo pokvariti aplikaciju. Zbog toga imamo i **main branch** koji sadrži testiran code, a kreiramo druge branchve za testiranje i dodavanje novih featura u aplikaciju. Da bi kreirali novi branch i dali mu ime koristimo kommandu **git branch _branch-name_**, i kada to izvršimo možemo provjeriti da li je kreiran branch sa komandom **git branch**.

```git
git branch test-branch
```

```git
git branch
```

Kada provjerimo da je branch kreiran, koristimo komandu **git checkout _branch-name_** da se prebacimo na taj branch, i kada se prebacimo na novi branch, sve promjene koje budemo pravili bit će na tom branch i neće imati efekta na druge brancheve.

```git
git checkout test-branch
```

Kao i sa drugim komandama i ovdje mozemo koristiti skraćenu verziju sa kojom možemo spojiti **git branch branch-name** i **git checkout branch-name** koja će kreirati branch i odmah se prebaciti na njega, ta komanda izgleda ovako:

```git
git checkout -b test-branch
```

Ova komanda će kreairati novi branch _test-branch_ i prebaciti se na njega, tako da se ne mora ručno prebacivati. Ove skraćene verzije mogu uštediti vremena, a i spasiti kada ste u žurbi da komitate promijenjene fajlove na trenutni branch jer ste zaboravili uraditi checkout nakon što se kreirali novi branch (što se meni desilo 😌).

> ## git merge && git stash

Ove komande se ne koriste toliko često, ali su korisne. Npr. ako imamo neke promjene na našem repository, i možda se desi da imamo grešku na nekom drugom branchu koji trebamo odmah pogledati, ali smo u pola posla na trenutnom branchu i ne želimo da komitamo da bi lakše vidjeli promjene. Ne možemo samo preći na drugi branch sa **checkout** jer možda imaju iste fajlove promijenjene i onda dodje do konflikta da se utvrdi koje promjene su ispravne. U tom slučaju možemo koristiti komandu **git stah** koja spasi trenutne promjene na neko mjesto u memorji, i oslobodi nam trenutni branch, ukloni sve promjene. Uradimo stash pređemo na drugi branch, fixamo bug, i vratimo se na trenutni branch i uradimo apply fajlova koje smo stash i nastavimo gdje smo stali. Da bi uradili stash promijenjenih fajlova koristimo komadnu:

```git
git stash
```

Sa ovom komandom kreiramo stash fajlove koje možemo kasnije vratiti kada nam zatrebaju, ili u slućaju da odlučimo da odbacimo te promjene, možemo ih samo obrisati. Ako koristimo ovu komadnu svaki stash će se dodavati u stash listu označenu za brojem. Kada želimo da provjerimo koje sve stash imamo, možemo koristiti ovu komandu da ih vidimo:

```git
git stash list
```

I ako želimo da apply neku od stash vrijednosti, moramo koristiti index od stash kojeg želimo, index možemo naći kada ukucamo komandu iznad **git stash lsit** i možemo ih apply promjene ovako:

```git
git stash apply stash@{3}
```

Sada ćemo apply sve promjene u naš branch koje su bile stashed, ovo je korisno kada prelazimo između različitih brancheva. Iduča komanda je **git merge**, a nju koristimo kada želimo da spojimo brancheve, i dodamo promjene sa jednog na drugi. Inače se ovo koristi da se spoje branchevi na kojima se radi sa main branch ili ako je bila neka promjena na main branch merge je sa trenutnom na kojoj radimo da bi imali nove promjene kod sebe. Nakon sto završimo na njima i tesitramo ih da rade kako treba. Brancheve spojimo tako sto odemo na branch na koji želimo dodati fajlove sa drugog brancha i ukucamo komandu za merge, možda zvući komplivano ali je ustvari lagano 😎

```git
git merge test-branch
```

Znaći ako smo na _main_ branch i izvršimo ovu komandu, spojit ćemo promjene sa _test-branch_ na main, i onda ćemo imati sve na _master_ branch.

> ## git push && git pull

Sve prethodne komande koje smo spomenuli se koriste za rad na lokalnom repository, što znaći da smo mi jedini koji vidimo ove promjene i jedini koji radimo na projektu. Ali ako odlučimo da stavimo naš projekat na Internet, tako da sa nama mogu raditi kolege ili prijatelji, ili u slučaju da želimo napraviti backup našeg projekta. Kada napravimo neke promjene i commit ih na lokalni repository i kada su spremne da ih pošaljemo na remote repository koristimo komandu **git push** da dodamo te promjene na remote repository. Mi samo izvršimo komandu a git uradi svoju magiju i stavi sve na Internet, jednostavno.

```git
git push
```

Sada smo napravili smo backup našeg projekta i promjena na njemu i ne moramo živjeti u strahu da ćemo izgubiti sve ako na mašina poludi jedan dan

<div className='gif-container'>
  <iframe
    src='https://giphy.com/embed/xUPGcEliCc7bETyfO8'
    className='giphy-embed'
    allowFullScreen
  ></iframe>
  <p className='gif-credentials'>
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='https://giphy.com/gifs/producthunt-cat-developer-xUPGcEliCc7bETyfO8'
    >
      via GIPHY
    </a>
  </p>
</div>

Komandu **git pull** koristimo da povučemo zadnje promjene sa remote repository na naš lokalni. Ako neko doda neke promjene na remote repository, a nama trebaju da ih koristimo, izvršimo ovu komandu i povučemo sve promjene na naš lokalni repo.

```git
git push
```

Sada kada imamo sve promjene na našem local repo, možemo da nastavimo raditi i koristiti fajlove sa remote repository.

> **NOTE:** Ove komande koje smo prošli su korisne i dobro je da znamo šta rade i kako se koriste,
> ali nemojte samo stati na njima, posjetite Git stranicu i prođite kroz dokumentaciju i knjigu da bi proširli svoje znanje i dodali dodatne stvari u svoj skill

Neke od komandi koje nismo pokrili ovdje a vrijedne su da se spomenu, **git reset** koji koristimo da resetujemo commite, ako napravimo grešku u commit ili dodamo pogrešne fajlove ili šta god, onda koristimo **git reset** da ih vratimo i uklonimo taj commit sa git log liste. **git rebase** je također dobra kommanda koja ima dosta mogučnosti, definitivno pročitajte o njoj na officijelnoj dokumentaciji [git](https://git-scm.com/doc)

<br />
<br />

![alt](/git-flow.png)

<div className='gif-container'>
  <p className='gif-credentials'>
    Drawing by{' '}
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a'
    >
      Fatima Trtak
    </a>
  </p>
</div>

<br />
<br />

### Local repository

- **git add** (Dodaje promijenjene fajlove u staged changes, i priprema ih za commit)
- **git commit** (Dodaje promjenjene fajlove u local repository)
- **git status** (Provjerava koji fajlovi su promjenjeni, a koji su dodani u staged changes)
- **git log** (Ispisuje listu commita na trenutnom branchu sa njihovim detaljima)
- **git stash** (Spašava promjene kada se mijenjamo branch i dozvoljava da ih poslije vratimo)
- **git merge** (Kombinuje brancheve sa jednog branch na drugi i spaja fajlove)
- **git branch** (Kreira novi branch i dozvoljava rad bez efekta na druge brancheve i fajlove)
- **git checkout** (Prebacuje se na drugi branch sa liste)

### Remote repository

- **git pull** (Pull changes from a remote repository)
- **git push** (Push your local changes to the remote, and create a backup for them)

## Zaključak

Prošli smo kroz ovaj dugi post, sa mnogo dobijenog korisnog znanja. Sada imamo više samopouzdanja kada radimo sa git. Prešli smo dodavanje fajlove i spašavanje na local repository, također smo prošli kako da provjerimo šta je promijenjeno a šta je spašeno. Naučili smo kako kreirati nove brancheve i kako ih koristiti da razdvojimo zadatke, i naučili smo kako dodati sve promjene na remote repository. Sada možemo da dijelomo naše projekte sa drugim, i moža i da radimo na njima zajedno.


Sve to što trebate znati o Git


> **NOTE:** Svi ovi ES2021 featuri su dostupni u večini večih browsera, dok su ostali u procesu dodavanja.
> Tako da sve ove primjere možete isprobati u bilo kojem većem browseru, ali ja preporučujem Brave i Google Chrome

Prije nego što počnemo moram spomenuti da iako su ovi featuri dodani u browsere i možemo ih koristiti, i na dan kada pišem ovaj blog 24 Aprila, 2021 nisu postali dio standarda Javascript. To bi se trebalo desiti u Junu 2021 kada bi trebali biti dodani u standard [ECMAScript](https://tc39.es/ecma262/) (EDIT: U Junu 2021 svi ovi feturi su dodani u standard EMCAScript)
Ako želite da vidite i pročitate o ovim featurima ili o novim, možete posjetiti oficijelni GitHub repository gdje se ovi featuri prezentuju, diskutuju i odobravaju za dodavanje u Javascript [TC39](https://github.com/tc39/proposals).

Imamo pet novih featura u Javascript a oni su:

- **String.prototype.replaceAll()**
- **Promise.any()**
- **Logical Assignment Operators**
- **Numeric spearators**
- **WeakRefs**

## String.prototype.replaceAll()

Prvi je **replaceAll()** koji možemo koristiti da zamijenimo sve instance u stringu. Već imamo sličnu funkciju **replace()** koja mijenja samo prvu instancu ali ne sve. Rješenje za to je bilo koristenje regexa. Ali već znamo da je regex zbunjijući a i sintaksa je čudna. Također ne koristimo regex toliko često tako da moramo osvježiti naše pamćenje prije nego ga koristimo, ili da kopiramo neko rješenje sa interneta koje nam može stvoriti probleme ako ne razumijemo šta tačno radi to. Tako da je **replaceAll()** odličan dodatak u Javascript, tako da se ne moramo mučiti sa regex. Evo primjer kako možemo koristiti **replaceAll()**:

```js
const text = 'This text should be replaced with a different text';

const replaceFn = text.replace('text', 'name');

const replaceAllFn = text.replaceAll('text', 'name');

console.log(replaceFn);
// This name should be replaced with a different text

console.log(replaceAllFn);
// This name should be replaced with a different name
```

Ako probate ovaj primjer iznad, vidjet će te da _replaceFn_ mijenja samo prvu instancu riječi _"text"_, ali funkcija _replaceAllFn_ mijenja sve instance riječi _"text"_ u stringu. Kao što možete vidjeti ovaj feature je dobar i korista, ne moramo više da radimo sa regex barem za ovakve stvari 🎉. Ukoliko želite detaljnije da provjerite ovaj feature, možete posjetiti oficijelni GitHub repo gdje se ovi feturi prezentuju i diskutuju [String.prototype.replaceAll()](https://github.com/tc39/proposal-string-replaceall).

## Promise.any()

Slijedeći feature je dodan u Promise metode i prima listu promisa _Promise.any([first, second, third])_, i onda čekamo prvi uspješni promise ili sve promise da ne uspiju. Ako je _first_ promise uspješan, prekinemo ostale promise, ali ako je prvi neuspješan a _second_ je uspješan, onda prekidamo promise nakon _second_. Isto važi ako su _first_ i _second_ neuspješni ali _third_ je uspješan, prekidamo nakon _third_. Ovo je optimistični Promise, koji se neče prekinuti sve dok barem jedan uspije, ili dok svi neuspiju. Sada ću da pokažem na primjeru kako da se koristi, i kako se razlikuje od ostalih Promise metoda:

```js
// We use delay to simulate response from an API
const delay = () => Math.floor(Math.random() * 1000);

const first = new Promise((resolve, reject) => {
  setTimeout(() => resolve('First'), delay());
});

const second = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Second'), delay());
});

const third = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Third'), delay());
});

const promiseAny = async () => {
  try {
    const firstResponse = await Promise.any([first, second, third]);

    //First one to be successfull will be the value of firstResponse
    console.log(firstResponse);
  } catch (error) {
    console.log(error);
  }
};

promiseAny();
```

U ovom primjeru svi se promisi izvršavaju, i prvi koji se izvrši bit ce dodan u _firstResponse_. Ali ako jedan od njih ili dva se ne izvrši, onda čemo dobiti onaj koji se uspješno izvrši:

```js
// We use delay to simulate response from an API
const delay = () => Math.floor(Math.random() * 1000);

const first = new Promise((resolve, reject) => {
  setTimeout(() => reject('First'), delay());
});

const second = new Promise((resolve, reject) => {
  setTimeout(() => reject('Second'), delay());
});

const third = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Third'), delay());
});

const promiseAny = async () => {
  try {
    const firstResponse = await Promise.any([first, second, third]);

    //Third one will be the value of firstResponse
    console.log(firstResponse);
  } catch (error) {
    console.log(error);
  }
};

promiseAny();
```

Ovdje imamo _first_ i _second_ neuspješan promise. Ali _third_ je uspješno izvršen, zato ćemo uvijek dobiti _third_ kao rezultat Promise. A ako su svi neuspješni Promise, onda ćemo dobiti grešku koja kaže **AggregateError: All promises were rejected**. Evo primjer tog slučaja:

```js
// We use delay to simulate response from an API
const delay = () => Math.floor(Math.random() * 1000);

const first = new Promise((resolve, reject) => {
  setTimeout(() => reject('First'), delay());
});

const second = new Promise((resolve, reject) => {
  setTimeout(() => reject('Second'), delay());
});

const third = new Promise((resolve, reject) => {
  setTimeout(() => reject('Third'), delay());
});

const promiseAny = async () => {
  try {
    const firstResponse = await Promise.any([first, second, third]);

    //This will not be executed since our Promise throws error
    console.log(firstResponse);
  } catch (error) {
    // Here we will get our error: AggregateError: All promises were rejected
    console.log(error);
  }
};

promiseAny();
```

Ovdje možete pročitati više o ovom featuru [Promise.any()](https://github.com/tc39/proposal-promise-any)

```js
// Here we wait for all promises to finish but if one fails, we throw an error
Promise.all([first, second, third]);

// Here we wait for first promise to finish, failed or sucessfull
Promise.race([first, second, third]);

// Here we wait for all promises to finish, and array of all promises is returned
// with their status and values or reason if it's rejected
Promise.allSettled([first, second, third]);

//Here we wait for the first that is succefull or all of them failed
Promise.all([first, second, third]);
```

And here is where you can read more about this feature [Promise.any()](https://github.com/tc39/proposal-promise-any)

## Logical Assignment Operators

Ovaj feature je inspirisan Ruby programskim jezikom, i koristimo ga da pisemo uslovne provjere u kraćim formama.
Ovdje nemamo baš puno za objasniti jer ove feature smo već imali u Javascript, samo su sada napravljeni da se koriste u kraćem obliku. Evo primjer kako se koriste:

````js
// x = x || 0
// x ||= 0
// x = x ?? 0
// x ??= 0
// x = x && 0
// x &&= 0

const multiply = (dot) => {
  dot.x ??= 2;
  dot.y ??= 2;
  return dot;
};
multiply({ x: 0 }); // 4


Za **dot.x ??=2**, ako **dot.x** nije `null` ili `undefiend` ostavit ćemo vrijednost koja je bila u **dot.x**, ali ako je njegova vrijednost `null` ili `undefiend` onda ćemo dodijeliti vrijednost 2. Ovaj znak ?? se zove **Nullish Coalescing operator** i on provjerava da li su vrijednosti `null` or `undefined`. On je dodan u ES2020.

Ako želite da pročitate više o ovom feature, posjetite oficijelni GitHub repo [Logical Assignment Operators](https://github.com/tc39/proposal-logical-assignment).

## Numeric separators

Ovaj feature je dodan u Javasript da bi olakšao čitanje brojeva. Ako imamo veliki broj, teško je na prvu vidjeti koji je tačno broj, pogotovo kada imamo puno cifri. Ukoliko napišemo veliku broj, i teško je na prvu pročitati koja veličina je upitanju, mozemo koristiti ovaj feature da razdvojimo, desetine, hiljade ...
Primjer kako koristimo:

```js
const largeNumer = 12000000000;

const largeNumberFormated = 12_000_000_000;
````

Vidite da pomogne kod čitanja brojeva kao što su milioni, milijarde, trilioni. Za detaljnije informacije posjetite GitHub repo [Numeric separators](https://github.com/tc39/proposal-numeric-separator)

## WeakRefs

Prije nego kažem bilo šta o ovom feature, moram da kažem da je mogućnost da ga koristimo je veoma mala. Ovo je malo veći nivo Javascripta, ali pokušat ću ga objasniti svakako, možda ga budemo koristili jedan dan 🤣.

I Javscript imamo Garbage Collectore(GC), što znaći da Javascript engine čisti nekorištene vrijednosti tako da bi oslobodio memoriju i možda stavio nešto drugo na ta mjesta. Znači ako imamo variablu **let person** kojoj je dodan neki objekat, ona ima jaku referencu na taj objekat, a to znači da taj objekat neće biti obrisan od starne Garbage Collectora, i neće biti izbrisan iz memorije.

Ako imamo objekat u moemoriji na kojeg niko ne pokazuje, onda postoji mogučnost da će biti pokupljen sa GC. A zašto kažem možda je zbog non-obvious načina na koji Javascript engine radi, jer ne zna se tačno kada će se desiti GC, i da li će se desiti uopšte, to engine sam odlučuje u kojem trenutku će se izvršiti GC. Također imamo više verzija Javscript engina i večina njih radi drugaćije, tako da Google Crome V8 će imati drugačiji GC od Firefox koji koristi Spider monkey engine.

> NOTE: U Javascriptu samo Object i Strings su Garbage Collected!

**WeakRefs** su slabe reference na objekte u memoriji, to znaći da nemamo jaku referencu na taj objekat i ukoliko dođe do GC onda nećemo pokazivati ni na šta, i varijabla kojoj je dodan **WeakRef** će postati undefiend. Mi možemo provjeriti da li **WeakRef** ima vrijednost tako što ćemo pozvati **deref()** funkciju i ako dobijemo _undefiend_ znaći da je vrijednost varijable uklonjena sa GC, ali ako dobijemo vrijednost to znaći da je objekat još uvijek u memoriji i da ga nije uklonio Garbage Collector. Primjer kako to možemo uraditi:

```js
const value = {
  name: 'Vehid Trtak',
  city: 'Sarajevo'
};

//Create weak reference to the value
const weakRef = new WeakRef(value);

//Check if values still exists
const maybeValue = weakRef.deref();
if (maybeValue === undefiend) {
  // Value was removed by GC
} else {
  // Value is still available
}
```

Imamo još jednu stvar koju možemo koristiti sa **WeakRefs** a to je FinalizationRegistry. Koristeći ovu funkciju dobit ćemo notifikaciju kada naša vrijednost bude uklonjena sa Garbage Collectorom, tako da ne moramo stalno pozivati **deref()** da provjerimo da li objekat još uvijek postoji. Ovaj code pokazuje kako to možemo uraditi:

```js
const notify = new FinalizationRegistry((value) => {
  // Do something when you get notified
});
```

> NOTE: Kada **FinalizationRegistry** callback se izvrši to znači da je vrijednost već izbrisana i da ne postoji više u memoriji!

Pošto je ovo kompleksinja tema, a i ljudi koji su predložili da ovaj feature bude dodan u Javascript govore da ne koristimo ovo osim ako znamo šta se tačno dešava. Tako da neću dalje objašnjavati ovu temu, ako želite možete više pročitati na GitHub repo [WeakRefs and FinalizationRegistry](https://github.com/tc39/proposal-weakrefs).

## Zaključak

Prošli smo kroz pet novih dodataka, neke od njih su korisne, neka ne baš toliko. Nadam se da vam je ovaj post bio koristan, i ako možete podjieliti i sa drugim da i oni mogu naučiti o ovome.


Novi ES2021 Javascript features


_Kako imutabilnost radi u Javascript, i kako ispravno da se koristi_

> **NOTE:** Pokušajte sami primjere iz ovog posta, i istražite ovu materiju dublje da bi dobili
> bolje razumjevanje

Jedna od bitnijih tema za Javascript je ponašanje objekata jer sam Javascript je object-based i objekti se mnogo koriste. Razumjevanje kako objekti rade će biti od velike koristi kada budete radili sa Javascript. Razumjet ce te code bolje i moći če te izbjeći mnoge bugove. Tako da ću u ovom postu objasniti kako ustvari objekti rade u Javascript i kako ih pravilno koristiti.

> Ima više načina da se kreira imutablini objekat, ali ja cu objasniti one koji se najviše koriste:
>
> **ES6 Spread operator** i
> **ImmerJS library**

Ako kreirate objekat kao što je ovaj ispod, kreirat ce se objekat u memoriji i varijabla će pokazivati/referencirati na taj objekat. Onda možete raditi sa tim objektom isto što možete sa bilo kojom varijablom, mijenjati, čitati...

```js Example.js
const name = {
  first: 'Vehid',
  last: 'Trtak'
};
```

Ali zakomplikuje se kada želite kreirate novi objekat koji ima iste vrijednost kao ovaj iznad. Uzimte u razmatranje slijedeći primjer:

```js Example.js
const name = {
  first: 'Vehid',
  last: 'Trtak'
};
const secondName = name;
secondName.first = 'Vedad';
```

Šta mislite da ce ovaj **`console.log(name)`** ispisati?
Ako ste pomislili da je **"Vehid"** onda ste pogriješili. Razlog za to je da kad smo kreirali varijablu _secondName_ dodali smo referencu objekta _name_ a ne vrijednost tog objekta. To znaći da obje varijable pokazuju na isti objekat, i ako promijeniti vrijednost jednog to će se odraziti i na drugi objekat.Na primjer:

<div className='gif-container'>
  <img src='/js-imute.webp' />
  <p className='gif-credentials'>
    Animation by{' '}
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a'
    >
      Fatima Trtak
    </a>
  </p>
</div>

```js Example.js
const name = {
  first: 'Vehid',
  last: 'Trtak'
};

const secondName = name;
secondName.first = 'Vedad';

console.log(name);
/* const name
{
first: "Vedad",
last: "Trtak"
}
*/
console.log(secondName);
/* const secondName
{
first: "Vedad",
last: "Trtak"
}
*/
```

Kao što možete vidjeti ovdje, nakon što smo promijenili _secondName_ objekat to je promijenilo i _name_, zato sto oba pokazuju na isto mjesto u memoriji.

> Pokušajte kopirati ovaj primjer iznad u konzolu i promijenite neke vrijednosti i vidite sta se dešava, to će vam pomoći da dobijete osjecaj šta se dešava kada se mijenja vrijednost varijable

Vjerovatno su vaša pitanja sada: _Dobro, šta sada? Razumijem da imamo reference, i da više objekata moze pokazivati na isto mjesto u memoriji, i kada promijenimo jedan od njih, odrazit će se na sve ostale. Ali kako da to sprijećimo, kako da kreiramo objekat i mijenjamo ga a da se ne odrazuje na ostale_

Imamo vise načina da to uradimo. Prvi, koji se vjerovatno najviše koristi se zove spread operator.

```js spread-object.js
const name = {
  first: 'Vehid',
  last: 'Trtak'
};

const secondName = { ...name };

secondName.first = 'Vedad';

console.log(name);
/* const name
{
  first: "Vehid",
  last: "Trtak"
}
*/
console.log(secondName);
/* const secondName
{
  first: "Vedad",
  last: "Trtak"
}
*/
```

<div className='gif-container'>
  <img src='/js-imute-shallow.webp' />
  <p className='gif-credentials'>
    Animation by{' '}
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a'
    >
      Fatima Trtak
    </a>
  </p>
</div>

Kao što možete vidjeti, prilično je jednostavno, koristite tri tačke prije varijable*name*, i kreairat će se nova referenca u memoriji sa istim vrijednostima kao i _name_. To je važno za library poput ReactJS koja ovisi o objektima koji mijenjaju reference, a ne samo vrijednosti, jer promjena će ustvari uzrokovati re-render, dok promjena vrijednosti bez reference neće. Više o ovoj temi možete pročitati u postu o [ReactJS Immutability and Mutability](http://vehidtrtak.com/blog/reactjs-immutability-mubtability).

> **NOTE:** Korištenje spread operatora će samo kreairati **shallow copy** objekta, što znaći da ce se samo kopirati
> prvi nivo objekta, a djeca u objektu će i dalje pokazivati na prethodni objekat ℹ️

Primjer objekta koji je shallow copied:

```js shallow-copy.js
const name = {
  first: 'Vehid',
  last: 'Trtak',
  address: {
    street: 'First avenu',
    number: '123A'
  }
};

const secondName = {
  ...name
};
secondName.first = 'Vedad';
secondName.address.street = 'Second avenu';

console.log(name);
/* const name
{
  address: {
    number: "123A",
    street: "Second avenu"
  },
  first: "Vehid",
  last: "Trtak"
}
*/
console.log(secondName);
/* const secondName
{
  address: {
    number: "123A",
    street: "Second avenu"
  },
  first: "Vedad",
  last: "Trtak"
}
*/
```

Kao što možete vidjeti ovdje, mijenjanje _address_ vrijednosti će uzrokovati promjenu _address_ ostalih objekata koji pokazuju na istu referencu.
Desilo mi se par puta na početku moje karijere i uzrokovalo mi je bugove, iz tok razloga to spominjem ovdje da bi pomogao drugim da budu svjesni ovoga ponašanja i da bi spriječili potenijalne bugove 😊

Idući korak je da shvatimo kako da kopiramo cijeli objekat sa svom njegovom djecom i da kreiramo nove reference za svakog od njih.

Jedan od načina je da koristimo spread operator i za kopiju djece objekta:

```js deep-copy.js
const name = {
  first: 'Vehid',
  last: 'Trtak',
  address: {
    street: 'First avenu',
    number: '123A'
  }
};

const secondName = {
  ...name,
  address: { ...name.address }
};
secondName.first = 'Vedad';
secondName.address.street = 'Second avenu';

console.log(name);
/* const name
{
  address: {
    number: "123A",
    street: "First avenu"
  },
  first: "Vehid",
  last: "Trtak"
}
*/
console.log(secondName);
/* const secondName
{
  address: {
    number: "123A",
    street: "Second avenu"
  },
  first: "Vedad",
  last: "Trtak"
}
*/
```

<div className='gif-container'>
  <img src='/js-imute-deep.webp' />
  <p className='gif-credentials'>
    Animation by{' '}
    <a
      target='_blank'
      rel='noopener noreferrer'
      href='http://www.linkedin.com/in/fatima-abdel-monem-trtak-09a39012a'
    >
      Fatima Trtak
    </a>
  </p>
</div>

Sada imamo deeply copied objekte, možemo sa njima da radimo šta god želimo, bez da mijenjamo druge objekte.
Ali možete da vidite da ovaj način kreiranje deep copy brzo postane ružan i nepregledan, i teško se vidi šta se ustvari dešava.

Ispod je primjer koji pokazuje kako izgleda deep copy objekat kada se koristi spread operator:

```js
const name = {
  first: 'Vehid',
  last: 'Trtak',
  address: {
    home: {
      street: 'First avenu',
      number: '123A'
    },
    work: {
      street: 'Second avenu',
      number: '123A'
    }
  }
};

const secondName = {
  ...name,
  address: {
    ...name.address,
    home: {
      ...name.address.home
    },
    work: {
      ...name.address.work
    }
  }
};
secondName.first = 'Vedad';
secondName.address.work.street = 'Third avenu';

console.log(name);
/* const name
{
    "first": "Vehid",
    "last": "Trtak",
    "address": {
        "home": {
            "street": "First avenu",
            "number": "123A"
        },
        "work": {
            "street": "Second avenu",
            "number": "123A"
        }
    }
}
*/
console.log(secondName);
/* const secondName
{
    "first": "Vedad",
    "last": "Trtak",
    "address": {
        "home": {
            "street": "First avenu",
            "number": "123A"
        },
        "work": {
            "street": "Third avenu",
            "number": "123A"
        }
    }
}
*/
```

Ovaj način brzo postane komplikovan. Kopiranje svakog dijeteta u objektu na ovaj način uzrokuje ponavljanje i može lako da uzrokuje bugove. Šta ja inače radim je da koristim spread operator za objekte koji nisu duboki i nemaju puno elemenata. Ako ima puno elemenata i objekat je dubok, ili ako radim sa Redux, onda koristim library kao što je [Immer](https://immerjs.github.io/immer/).
Šta je ustvari baš dobro u vezi Immer, posebno kada se radi sa Redux je da nam omogućava mutabilni rad sa objektima, i onda Immer u pozadini to odradi na imutabilni način. Tako da ne moramo komplikovati koristeći spread operator.

Ispod je primjer sa korištenjem ImmerJS, koji pokazuje kako je lakše raditi sa njim:

```js immer.js
import produce from 'immer';

const name = {
  first: 'Vehid',
  last: 'Trtak',
  address: {
    home: {
      street: 'First avenu',
      number: '123A'
    },
    work: {
      street: 'Second avenu',
      number: '21st'
    }
  }
};

const secondName = produce(name, (newName) => {
  newName.first = 'Michael';
  newName.last = 'Johnes';
  newName.address.home.street = 'New street';
  newName.address.work.street = 'Old avenu';
});

console.log(name);
/* const name
{
    "first": "Vehid",
    "last": "Trtak",
    "address": {
        "home": {
            "street": "First avenu",
            "number": "123A"
        },
        "work": {
            "street": "Second avenu",
            "number": "21st"
        }
    }
}
*/
console.log(secondName);
/* const secondName
{
    "first": "Michael",
    "last": "Johnes",
    "address": {
        "home": {
            "street": "New street",
            "number": "123A"
        },
        "work": {
            "street": "Old avenu",
            "number": "21st"
        }
    }
}
*/
```

Također želim da spomenem da se mogu koristi i druge library kao npr. Immutable ili neke druge. Ali ovaj post je bio o objektima u Javascript, njihovom ponašanju, kako ih koristiti i immutabilno mijenjati njihovu vrijednost, pa ako želite provjeriti i druge library možete potražiti na Google.

## Zaključak

Prošli smo kroz imutabilnost i mutabilnost u Javascript, kako radi i kako raditi sa njima. Također smo objasnili kako objekti rade, kako ih koristiti i na šta paziti kada radimo sa objektima.

Čestitam na pređenom postu, usvojili ste vrijedno znanje ovdje. Slijedeći korak je da testirate ovdje naućeno da dobijete jos bolje razumijevanje. Pokušajte više načina, različiti situacija i pratite sta se dešava sa objektima. I ako ste React developer pogledajte moj post o [ReactJS Immutability and Mutability](http://vehidtrtak.com/blog/reactjs-immutability-mubtability)
