Kako se upoznati s referencom i vrijednošću u JavaScript-u

Ovaj članak govori o ponašanju različitih tipova podataka JavaScript kada su dodijeljeni varijabli. Ovisno o vrsti podataka, memorija se drugačije raspoređuje za njezino pohranjivanje. Može rezervirati novi prostor za pohranu kopije vrijednosti, ili možda uopće neće stvoriti kopiju i samo ukazati na postojeću vrijednost (referenca).

Evo mojih bilješki snimljenih tijekom tečaja Javascripta30 od strane Wesa Bosa.

Brojevi, nizovi i logičke vrijednosti

U JavaScriptu, primitivne vrste kao što su undefined, null, string, number, booleana symboldonosi vrijednosti.

let name = ‘Marina’;let name2 = name;
console.log({name, name2}); >> { name: ‘Marina’, name2: ‘Marina’ }
name = ‘Vinicius’;
console.log({name, name2});>> { name: ‘Vinicius’, name2: ‘Marina’ }

Kad je varijabla namedodijeljena, 0x001rezervira se prostor u memoriji s adresom za pohranu te vrijednosti. Zatim varijabla namepokazuje na tu adresu. Tada se varijabla name2postavlja na jednaku name. 0x002Dodjeljuje se novi prostor u memoriji s novom adresom koji pohranjuje kopiju vrijednosti pohranjene na adresi na koju nameupućuje.

Dakle, kad god želimo izmijeniti vrijednost name, vrijednost pohranjena name2neće se mijenjati, jer je to kopija, pohranjena na drugom mjestu.

Objekti i nizovi

Objekti u JavaScript-u prosljeđuju se referencom. Kada je postavljeno više od jedne varijable za pohranu ili object, arrayili function, te će varijable ukazivati ​​na isti dodijeljeni prostor u memoriji.

const animals = ['Cat', 'Dog', 'Horse', 'Snake'];
let animals2 = animals;console.log({animals, animals2});>>{ animals: ['Cat', 'Dog', 'Horse', 'Snake'], animals2: ['Cat', 'Dog', 'Horse', 'Snake']}
animals2[3] = 'Wale';console.log(animals, animals2);>>{ animals: ['Cat', 'Dog', 'Horse', 'Wale'], animals2: ['Cat', 'Dog', 'Horse', 'Wale']}

Kada animalsje postavljeno za spremanje niza, dodjeljuje se memorija i adresa se pridružuje toj varijabli. Tada animals2se postavlja na jednako animals. Budući da animalssprema niz, umjesto stvaranja kopije tog polja i nove adrese u memoriji, animals2jednostavno je usmjeren na isti objekt na postojećoj adresi. Na taj će se način animals2odražavati sve promjene napravljene na animals, jer upućuju na isto mjesto.

Vidjet ćete isto ponašanje za objekte:

const person = { name: 'Marina', age: 29};
let femme = person;femme.age = 18;
console.log({person, femme});>>{ person: { name: 'Marina', age: 18 }, femme: { name: 'Marina', age: 18 }}

Kopiranje objekata i nizova

Budući da jednostavna dodjela nije dovoljna za izradu kopije predmeta, to se može postići drugim pristupima:

Nizovi

kriška()

let animals2 = animals.slice();animals2[3] = 'Shark';

concat ()

let animals3 = [].concat(animals);animals3[3] = 'Tiger';

širenje (ES6)

let animals4 = [...animals];animals4[3] = 'Lion';

Promjene će utjecati samo na izmijenjeni objekt:

console.log({animals, animals2, animals3, animals4});>>{ animals: ['Cat', 'Dog', 'Horse', 'Snake'], animals2: ['Cat', 'Dog', 'Horse', 'Shark'], animals3: ['Cat', 'Dog', 'Horse', 'Tiger'], animals4: ['Cat', 'Dog', 'Horse', 'Lion']}

Predmeti

dodijeliti()

let human = Object.assign({}, person, { age: 20 });
console.log(person, human);>>{ person: { name: 'Marina', age: 29 }, human: { name: 'Marina', age: 20 }}

Duboki klon

Važno je napomenuti da su te metode duboke samo jednu razinu. Za duboke klonove postoji namrgođena metoda. Koristite pažljivo.

let femme3 = JSON.parse(JSON.stringify(person));femme3.name = 'Leslie';
console.log(person, femme3);>>{ person: { name: 'Marina', age: 29 }, femme3: { name: 'Leslie', age: 29 }}

Reference

  • WesBos - Javascript 30
  • Ne znate JS: Opseg i zatvaranja, Kyle Simpson

Izvorno objavljeno na marina-ferreira.github.io.