Reference Vs Value In JavaScript

One of the most important topics in programming is pass by reference vs value. It is something that is incredibly confusing to follow, and can lead to many bugs until you understand it. In this video I am going to make the learning process as quick and easy for you, so you can spend your time coding instead of stuck debugging reference errors. In order to accomplish this we will be going over an in depth visual example of how values and references work in simple code, before we jump into some live coding examples of reference and value passing.
Reference Vs Value Article: blog.webdevsimplified.com/202...
🧠 Concepts Covered:
- What is reference passing
- What is value passing
- The difference between values and references
- How references are shared
- What a memory address is
- How references and values work with functions
🌎 Find Me Here:
My Website: webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ReferenceVsValue #WDS #JavaScript

[@taragilesbie94]

Thank you! I was struggling with this concept, but now I understand it. Passing by value is like if I were to draw a picture, then make a paper copy of it and give it to you. We have two different sheets of paper, even though they look identical, so if you draw on it or cut it up, it doesn't modify mine at all. On the other hand, passing by reference is like using a Google Doc shared with a link. We both use the link to view the same single document, so if you make changes to the document, I can see them too.

[@dharma276]

That's a great analogy!

[@warrentait4610]

I've been studying for 7 months and I finally understand this *crying*

[@buddimalliyanapathirana1767]

Now only I fully understood what this means . I'm in the 3rd year of my degree lmao

[@BobbyBundlez]

I’m about 3 years into coding and finally understand this. Especially after fucking around with redux and usecontext and constantly messing up because I didn’t understand what immutability was or why we needed it

[@priyankbhalani]

Same goes for me today…😅

[@makamaka487]

I never realised why arrays could be const variables before. It's because the memory reference is constant and its just the value stored in the memory that changes! Thanks Kyle!

[@ghabrielmielli5858]

this content is like... SO IMPORTANT! So many bugs are caused by mistakes involving this ;-;

[@domxon]

@Ghabriel Mielli kzbin.info/www/bejne/bWWZqXWEaKumb80

[@RR-et6zp]

you can learn it like in 5 sec lol. referencing vs assigning

[@HeatherLeigh44]

You seriously have a gift for taking complicated concepts and explaining them so clearly.

[@nerdiloo9863]

Good stuff. And this why, when you check the MDN docs for methods to perform on arrays/objects (e.g. slice, splice), they tell you whether or not a NEW object is returned. That way you can choose the appropriate method. More often than not, returning an object (and not overwriting the old) is the pattern used for non-primitives.

[@WebDevSimplified]

Very true. Pass by reference and pure functions which I covered in my last video are very closely linked together. I much prefer pure functions that return a new object almost always.

[@BobbyBundlez]

Yes. Same goes for redux and other state management!

[@santra528]

Hey Kyle! Thank you very much. You have cleared my doubt about one of the most confusing topics in programming. Thank you Sir!

[@anonymous.youtuber]

A really good explanation, crystal clear. You’re a great teacher Kyle ! 👍

[@michellesalas6175]

Thank you so much for making this video. I was having a hard time trying to understand this topic but your explanation was so clear I got it all right!

[@linuslexy3161]

Thank you! Finally object references are starting to become clear.

[@vonshitz]

You're a smart kid always give great content and you have a great way of delivering!!! Thanks a lot form a student programmer struggling to learn javascript. 5 months in but we're getting there!!!

[@hyfydistro]

This has been one of JavaScript's "Gotchas". 😀 Thank you. ❤️

[@ZZZZ65362]

Hey, thank you for such a great and informative video. Every second of it was a pure gold for me.

[@WebDevSimplified]

You're welcome! I'm really glad you enjoyed it.

[@josephgarza5973]

@@WebDevSimplified Thank you very much for this helpful tutorial along with all the others that you make. They are very very helpful indeed. I have one question I hope you can help me with. "Why am I getting a different output entirely different to what you get?" I get this: c = ${c } / c =${c}. I checked and rechecked my code and it is exactly as you typed it. What gives? Thanks in advance for your kind help.

[@user-bq8tc5lw4n]

I could not even find such words to thank you, to be honest nobody ever could explain me so easy , you are the best teacher, please keep recording, more and more videos from you, even more likes from us )) P.s. hello from Armenia )))

[@liveyourdreamsdotbe]

Awesome how simple you clarify this difference Easy to understand and so important indeed Thank you so much

[@highallthetime6138]

thank you. I'm a junior dev and i've been using React for the past 6 months and i never really learned the bases, this really is important

[@maxxinmaze4501]

This is was one of your best videos, The visual explanation at the start really helped!!

[@mitejmadan8672]

Man, your videos are so easy to understand. I can't thank you enough.

[@lesbiancake]

This was the most informative thing I could find in trying to understand pass by reference, thank you!

[@tusharcreates]

I didn't manage to get all this because everything was happening in background. You cleared all of my doubts regarding this. I thought I'd master JavaScript concepts by my own in less time but it does take time to understand such type of concepts. I've gone through articles and videos but couldn't find any video this much explanatory. Thank you man!

[@stevebob240]

Ah I was used to using pointers in C but confused as to how JS handled pass by reference. Very concise explanation.

[@sanjibdey01]

The emphasis on "overwriting the value" (in reference type), is the "aha" moment I've been missing in other blogs or tutorials. Thank you Kyle.

[@SherryTheNerd]

This is the clearest tutorial I’ve ever watched which’s about calling by refs/value

[@stevieholland3579]

Bro, I am a very visual learner and this helped tons. For some reason, this concept was really confusing me, but this made it click. I can't thank you enough.

[@amoghs1342]

This is gold. Really important to get the concept right.

[@ThomasCasserly]

Best explanation I've found so far for this, just need to watch the bit at the end on passing variables into functions a few more times to get it clearly into my brain. Thank you so much ; - )

[@jkk9829]

it's easy to understand and has clarified a lot of my doubt! worth watching:)

[@aymenboudabia5221]

As always, simple and clear explanation. Thanks man!!

[@atsglobalservices6136]

Ive been studying javascript for 2 months, finally understood the difference. Thank you

[@tatolela1234]

THIS IS THE MOST HELPFUL VIDEO IVE SEEN ON MY ENTIRE LIFE

[@noideaofhowcallme]

Thanks, man! Well explained, and good examples, as always!

[@JoshKonoff1]

Kyle, thank you for this exceptional video. Watching this was the highlight of my year so far!

[@WebDevSimplified]

That is awesome! I am glad you enjoyed it.

[@VarshaFlimz]

Highly simplified and on spot explanation - the value stored is clear now

[@mistic.2964]

Thank you for this thorough explanation, it really helped!

[@elisa_musik]

This video just connected several dots for me. Questions I had and questions I did not even knew I had! Thanks Kyle!

[@mohammedalmukhtar8949]

Thanks for this useful video, Kyle! as always, your effort is appreciated.

[@WebDevSimplified]

You're welcome!

[@andrew.schaeffer4032]

Great explanation thank you. I don't know why so many other smart people struggle to explain this.

[@fluffydoggo]

I have never actually encountered this before in my one and a half years of coding in JavaScript. Well, you did teach me something new, so that's good. Now I can go back to my old code and fix it lol

[@Madmann16]

You're a big help to the IT industry kyle, thank you so much

[@earnestdavis]

great explanation bro! it still is helpful even after 3 years

[@lukeketterer]

Couldn't get a grasp on this topic for a while and this was a great explanation!

[@marsdwarf]

The best explanation I found mate. Thanks for posting! Put the address as comments helped with understanding as well.

[@taylorenglish6237]

This blew my mind! The way you said it was so clear! It was absolutely amazing. Thank you Kyle! I do wonder though, what do I do if I want to pass a primitive value by reference (a.k.a change the variable within a function and have that change reflected outside of the function)?

[@diveshkswn]

You are sooo good in explaining JS . I have been taking KT from some people and made me confuse even more.

[@eliorbuskila5794]

That explanation is gold bro. SUBSCRIBED

[@dawid_dahl]

This video was really clarifying. Thank you so much!

[@WebDevSimplified]

You're welcome!

[@sinnvollerkommentar263]

I would have needed this just one day earlier. Today I found it by scrolling through your videos. Thankfully a quick google helped me yesterday because I knew what to search. Thanks for your content

[@karthicodings3896]

Thank you, you fulfilled my request 🙏🙏

[@WebDevSimplified]

You're welcome! It was a great suggestion.

[@xesiusprime9360]

i finally understand it now!! this videos is gold thanks bro!

[@Stereotica]

You are a brilliant teacher, thank you for the explanation.

[@stylesg7818]

Thank you. That's why I like your approach to teaching : Straight to the point.

[@WebDevSimplified]

Thank you. I try to keep my videos consice since I hate long winded videos that go nowhere.

[@ahndeux]

This is a good concept to understand. If you program in C for a memory limited device like an Arduino, you have to understand the concept well when dealing with cstrings and passing the string variable pointers into functions.

[@shaiebhamzadev6241]

Thank you for explaining that so I'm grateful for your expertise and your clear explanation, thank you.

[@syntaxed4365]

This video is fantastic. I have been working with Javascript for a while and this video clearly answered my question: "Why do so many constants seem variable?" Lol, good stuff.

[@yusiff]

the best explanation I have ever seen. thanks, teacher.

[@Emilytigerkitty]

Thank you so much for this. I was absolutely stuck before I watched this.

[@tuanchu8022]

Knowing the concept of pointer will help clear the confusion between passing by value and passing by reference.

[@Zen-lz1hc]

C was my introduction to pointers a couple of years ago...

[@DubZenStep]

Perfect explanation. Thank you so much man.

[@aadilvalconi9972]

Although not specified, this is also a great explanation of how pointers work in C.

[@ronaldbrammer1823]

Awesome and easy to understand. Loved the video and I learned a lot. Thanks.

[@threeone6012]

Best programming channel on KZbin.

[@martinpatrikov7776]

Amazing explanation! Thank you!

[@Jonathan_Henderson]

Excellent explanation of one the most important concepts in programming

[@cba88]

you are the best teacher, your are gifted

[@busyrand]

Thank you... I just learning to use const and let properly. I've always used let for everything. I understand const better now.

[@YggLart]

Amazing content, really clarify what's on with the code :) Thanks a lot!

[@kostiantynkarzhanov9216]

Thanks! Informative video, cleared up my understanding 💛

[@viniciusm.m.7822]

THANKS! Vídeo muito top, mano! God bless you!

[@madhousenetwork7765]

wow Kyle. you made it so easy. Thanks a lot!!

[@justsaybobby]

Wow. I’m glad I found this. So helpful. Thank you!

[@eddiejaoude]

Man, you are killing it. Great work 👍

[@WebDevSimplified]

Thanks! Loving that KZbin grind ;P

[@eddiejaoude]

Web Dev Simplified I can see you are enjoying it and getting lots of success. Well done 👍

[@ignaciorosenberg5175]

way easier to understand than the course that I'm doing... thx!

[@sogouhigishikata8885]

This explains so much, thank you!

[@AlexTechie]

Great video! I always try to guess the result of some syntax before it's revealed and this one showed me that my understanding of primitive variables was wrong. I thought setting `a = 10`, then `c = a`, then adding 1 to `c`, would also result in the value of `a` being changed, because they referenced the same memory address. But, it seems it creates a new memory address when you set `c = a`. I'll add these exercises to my lab. Thanks, Kyle!

[@WebDevSimplified]

You are very welcome! This is one of the most confusing topics in programming, so I am glad this video was able to help clear up some confusion for you.

[@LIVESPORTPLUS]

This is super clear, thank you!

[@ThatBritishVlogger]

Once again - so greatly explained

[@anneu8314]

Thanks for this video. I really learn a lot!

[@sajjadkazemi]

You're a Great teacher! 👍🏻

[@mr.guardian4491]

Best video on this topic!

[@GameTesterMobile]

You got a new subscribe.. Thanks for this amazing simplification

[@poormancodespmc4598]

Thank you very much for the clear explanation.

[@Unknown-840]

This make a ton of sense because I learned pointers and call by value vs call by reference in C way back

[@kenluong1204]

Amazing clarity and concision on this topic but I would say that variables are passed by values in JS to simplify matters. If the value-passed is a reference to an object, then mutation of the object inside the function will carry through out our program.

[@k_kfamily6162]

An explanation I will not forget for lifetime

[@The.mohisa]

Thanks for such a helpful content.

[@tan2cang93]

thank you for sharing this. now I know why we can use method array with const as array

[@filcondrat]

great explanation for such a really sick topic in js

[@WebDevSimplified]

Thanks! I am glad you enjoyed it.

[@superreverbfreak]

Great explanation!

[@user-gt4fr1he9w]

Awesome content mate 👍👍👍

[@abdqadr]

Wow. Thank you. This is illuminating

[@PildorasMusicales]

Very interesting!! And now I understand why the three points d = [...c] to make a new copy of an array.

[@chikatikah3838]

This is a really good explanation

[@nileshpandey4505]

Simply awesome.Thank you so much.

[@aazamben]

This guy has explained things in a way that you can easily and simply understand, not like other tutorial guys who confuse you for no reason at all. But I want to make a point here. In JavaScript, every function is passed by value, not by reference. Tthe values itself changes when we put them as parameter and access those value in console.log. Try manipulating an object with two functions. I know this may sound confusing right now, but when ya work with it in a big project or other languages you will get this point.

[@alexfrancis6091]

Sir, I do not know if you'd read this but thank you so much......This was very informative. Thank you for that

[@mohamedelhalwany4252]

Thank you .. really great content you provide here

[@albertoazinar1209]

WOW!!!!. I really didn't know about that add function. Thankiu

[@hellothere8547]

Thank you so much for the work you put with these videos. I was thinking of inheritance vs composition in JavaScript. Maybe that could be a new video? Which one is more beneficial.... etc

[@WebDevSimplified]

Thank you. That is a great idea. Generally I prefer composition when possible but it really depends.

[@bluemodize7718]

wow these information blew my mind

[@Kuch_Bhi-lets_explore_it]

Thank You Thank You Thank You So Much what an amazing explanation you nailed it 🔥🔥, I understand this tough concept so easily from your video , before that I am confused and I try to find the good explanation for that & this video clears my confusion , this concept is now crystal clear , Thank You so much again 🙌🙌