als JavaScript nieuw voor u is, is de kans groot dat u al een deel van het grappige gedrag van deze taal te bieden heeft (bewijsstuk a). In het begin lijken deze rare eigenaardigheden misschien belachelijk en frustrerend, maar ik beloof je dat er een methode achter al die waanzin zit.
een van de moeilijkste hindernissen om te overwinnen, naar mijn bescheiden mening, is het verschil tussen het passeren door waarde versus het passeren door referentie. Waarom is dit concept zo lastig? Om te beginnen, kunt u zeker vrij ver komen zonder echt te begrijpen hoe JavaScript samenwerkt met primitieve waarden en referentiewaarden. Dit kan, en vaker wel dan niet, resulteren in een ton van bugs die moeilijk op te sporen en vervelend op te lossen zijn. Ten tweede, dit is een concept dat zal komen in technische interviews, dus niet begrijpen het zal tellen als een enorme rode vlag tegen je.
Vrees niet, medelezer! Laat de opleiding beginnen …
primitieve gegevenstypen
in JavaScript kunnen we gegevenstypen verdelen in twee verschillende emmers, primitieve gegevenstypen en objecten.
er zijn zes primitieve gegevenstypen in JavaScript: string, number, boolean, undefined, null, en symbol vanaf ES6.
primitieve gegevenstypen worden doorgegeven, of gekopieerd, door waarde en zijn onveranderlijk, wat betekent dat de bestaande waarde niet kan worden gewijzigd zoals een array of een object dat kan. Laten we eens kijken naar de code hieronder om dit in actie te zien.
hier hebben we twee variabelen gecreëerd, x = 10 en y = x. Omdat 10 een getal en een primitieve waarde is, kopiëren we bij het instellen van y = x de waarde, dat wil zeggen 10, en toewijzen we deze aan y. We kunnen dit ook visualiseren met behulp van de grafiek hieronder.
als we de waarde van x zouden veranderen, zouden we zien dat y de waarde van 10behoudt. Nogmaals, dit komt omdat primitieve waarden worden gekopieerd, dus de waarde van yis onafhankelijk van de waarde van x. Zie het als het maken van een fotokopie van een foto. Na het maken van de kopie heb je twee identieke foto ‘ s: een origineel en een facsimile. Als je het origineel in tweeën snijdt, wordt alleen het origineel veranderd en blijft de facsimile precies hetzelfde.
Referentie-Objecten
Objecten, aan de andere kant, worden doorgegeven door middel van verwijzing naar een locatie in het geheugen voor de waarde, niet de waarde zelf. Laten we dit eens bekijken in onze code.
in dit voorbeeld is x nu een object dat naar {dog: "poodle"}wijst. Wanneer we de variabele y aanmaken en deze de waarde van x toekennen, kunnen we nu de verschillende eigenschappen van x gebruiken, die de waarde voor dog bevatten, d.w.z. "poodle". Dit lijkt precies dezelfde logica gebruikt voor primitieve waarden, maar laten we een kijkje nemen op onze handige-dandy grafiek hieronder om het subtiele, maar belangrijke verschil te zien.
opslaat nu ziet deze grafiek er een beetje anders uit dan wanneer onze variabelen x en y primitieve gegevenstypen bevatten. In deze versie zien we dat de waarden voor zowel x als y geen gegevenstypen zijn, maar verwijzingen naar een adres in het geheugen, in feite hetzelfde adres! Laten we nu eens kijken naar wat er gebeurt met x als we een nieuwe eigenschap van size toevoegen aan y…
x geeft nog steeds een object terug, maar nu heeft het ook een extra eigenschap van size! Nogmaals, dit komt omdat zowel x als y naar hetzelfde referentieobject wijzen, zodat alle wijzigingen in de ene variabele zichtbaar zijn in de andere.
om me te helpen dit concept te onthouden, zie ik referentiewaarden graag als een huis en de variabelen als mensen die in dat huis wonen. Alle bewoners (variabelen) kunnen zeggen “Ik heb een huis” en wijzen naar hetzelfde huis. Als een enkele bewoner besluit het huis geel te schilderen, dan hebben alle bewoners nu een geel huis omdat het gedeeld wordt.
laten we nog een voorbeeld bekijken dat een verscheidenheid aan referentieobjecten bevat.
In deze code beginnen we met een variabele person die eigenschappen bevat van name, age, en hobbies. Wanneer we dit object naar de console printen, krijgen we precies wat we verwachten — hetzelfde object dat we zojuist hebben gemaakt.
vervolgens hebben we een functie genaamd changePerson die een argument opneemt, enkele wijzigingen aanbrengt en vervolgens een object retourneert. Wanneer we de variabele thirdPerson aanmaken, roepen we de functiechangePerson aan door ons oorspronkelijke object van person erin over te geven. Het interessante is wat er gebeurt als we opnieuw afdrukken naar de console thirdPerson en person.
merk op dat console.log(thirdPerson) een geheel nieuw object met nieuwe eigenschappen retourneert. Kijk nu wat console.log(person) oplevert. Dit is vergelijkbaar met ons oorspronkelijke object, maar het bevat nieuwe eigenschapswaarden die zijn geïntroduceerd in onze changePerson functie.
controleren op gelijkheid
laten we tenslotte eens kijken hoe primitieve gegevenstypen en referentieobjecten zich gedragen met Equality-operators.
als het gaat om primitieve gegevenstypen, maakt het niet uit wat rechts van het = teken staat, zolang de waarden hetzelfde zijn. We kunnen dit hierboven zien met variabelen a en b die anders geschreven zijn maar tot dezelfde waarde evalueren als we de === gebruiken, de strikte equality operator.
in het tweede voorbeeld geldt het tegenovergestelde voor dog en cat. Hoewel het kan lijken dat ze identieke waarden bevatten, is een array en een referentieobject, wat betekent dat de === controleert of zowel dog als cat dezelfde referentie hebben naar de waarde in het geheugen. Aan de andere kant is bird === dog waar omdat ze hetzelfde referentieobject delen.
conclusie
hebben en daarmee eindigt onze introductie in pass by value vs pass by reference. Er zijn meer onderwerpen die kunnen worden behandeld onder deze overkoepelende fundamentele, waaronder wat er gebeurt als een referentie wordt overschreven of verloren, hoe een referentie te kopiëren om een nieuw object te maken en ervoor te zorgen dat de kopie een diepe kopie is, om er maar een paar te noemen. Ik zou aanraden het controleren van de middelen die ik hieronder gebruikt die gaan in een aantal van deze extra onderwerpen in meer detail.
