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
Пікірлер: 369
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!
I've been studying for 7 months and I finally understand this *crying*
@buddimalliyanapathirana1767
2 жыл бұрын
Now only I fully understood what this means . I'm in the 3rd year of my degree lmao
@BobbyBundlez
2 жыл бұрын
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
8 ай бұрын
Same goes for me today…😅
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!
this content is like... SO IMPORTANT! So many bugs are caused by mistakes involving this ;-;
@domxon
2 жыл бұрын
@Ghabriel Mielli kzread.info/dash/bejne/aWhq2qSHY6nZac4.html
@RR-et6zp
Жыл бұрын
you can learn it like in 5 sec lol. referencing vs assigning
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
4 жыл бұрын
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
2 жыл бұрын
Yes. Same goes for redux and other state management!
You seriously have a gift for taking complicated concepts and explaining them so clearly.
Hey Kyle! Thank you very much. You have cleared my doubt about one of the most confusing topics in programming. Thank you Sir!
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.
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!
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.
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
This was the most informative thing I could find in trying to understand pass by reference, thank you!
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!
Thank you! Finally object references are starting to become clear.
Hey, thank you for such a great and informative video. Every second of it was a pure gold for me.
@WebDevSimplified
4 жыл бұрын
You're welcome! I'm really glad you enjoyed it.
@josephgarza5973
2 жыл бұрын
@@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.
Knowing the concept of pointer will help clear the confusion between passing by value and passing by reference.
@Zen-lz1hc
3 жыл бұрын
C was my introduction to pointers a couple of years ago...
This is the clearest tutorial I’ve ever watched which’s about calling by refs/value
A really good explanation, crystal clear. You’re a great teacher Kyle ! 👍
Man, your videos are so easy to understand. I can't thank you enough.
This video just connected several dots for me. Questions I had and questions I did not even knew I had! Thanks Kyle!
Ive been studying javascript for 2 months, finally understood the difference. Thank you
Ah I was used to using pointers in C but confused as to how JS handled pass by reference. Very concise explanation.
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!!!
Awesome how simple you clarify this difference Easy to understand and so important indeed Thank you so much
This has been one of JavaScript's "Gotchas". 😀 Thank you. ❤️
This is gold. Really important to get the concept right.
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 )))
This is was one of your best videos, The visual explanation at the start really helped!!
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 ; - )
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
THIS IS THE MOST HELPFUL VIDEO IVE SEEN ON MY ENTIRE LIFE
Couldn't get a grasp on this topic for a while and this was a great explanation!
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)?
As always, simple and clear explanation. Thanks man!!
Thank you for this thorough explanation, it really helped!
You're a big help to the IT industry kyle, thank you so much
Thanks, man! Well explained, and good examples, as always!
The best explanation I found mate. Thanks for posting! Put the address as comments helped with understanding as well.
i finally understand it now!! this videos is gold thanks bro!
Great explanation thank you. I don't know why so many other smart people struggle to explain this.
Highly simplified and on spot explanation - the value stored is clear now
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
You are sooo good in explaining JS . I have been taking KT from some people and made me confuse even more.
Thank you for explaining that so I'm grateful for your expertise and your clear explanation, thank you.
it's easy to understand and has clarified a lot of my doubt! worth watching:)
Thank you so much for this. I was absolutely stuck before I watched this.
Thank you... I just learning to use const and let properly. I've always used let for everything. I understand const better now.
Although not specified, this is also a great explanation of how pointers work in C.
Awesome and easy to understand. Loved the video and I learned a lot. Thanks.
This make a ton of sense because I learned pointers and call by value vs call by reference in C way back
Thank you, you fulfilled my request 🙏🙏
@WebDevSimplified
4 жыл бұрын
You're welcome! It was a great suggestion.
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.
Kyle, thank you for this exceptional video. Watching this was the highlight of my year so far!
@WebDevSimplified
3 жыл бұрын
That is awesome! I am glad you enjoyed it.
great explanation bro! it still is helpful even after 3 years
wow Kyle. you made it so easy. Thanks a lot!!
13:34 So how i understood it is that the parameter variable array used to point at the same memory address as c when you passed it in to the add(c,3) call, they both were pointing at memory address 0x01. But then you assigned [element] which has a new memory address 0x02 to the parameter variable named array. Now, let c still points to memory address 0x01 and parameter variable array now points to memory address 0x02 instead of memory address 0x01 like let c did. That's why when you did console.log a second time it was still c = [1,2]
the best explanation I have ever seen. thanks, teacher.
Excellent explanation of one the most important concepts in programming
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.
That explanation is gold bro. SUBSCRIBED
Thanks for this useful video, Kyle! as always, your effort is appreciated.
@WebDevSimplified
4 жыл бұрын
You're welcome!
Thanks! Informative video, cleared up my understanding 💛
Wow. I’m glad I found this. So helpful. Thank you!
Perfect explanation. Thank you so much man.
way easier to understand than the course that I'm doing... thx!
Amazing content, really clarify what's on with the code :) Thanks a lot!
LAST BIT ABOUT WHY WE CAN EDIT CONST WAS BOOM😇😇😇
What the hell did I just learn? I've been so fortunate, not running into bugs and not knowing this. Thanks 🙏
This explains so much, thank you!
You are a brilliant teacher, thank you for the explanation.
Amazing explanation! Thank you!
This is super clear, thank you!
thank you for sharing this. now I know why we can use method array with const as array
you are the best teacher, your are gifted
Wow. Thank you. This is illuminating
Thanks for such a helpful content.
Thank you very much for the clear explanation.
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.
You got a new subscribe.. Thanks for this amazing simplification
WOW!!!!. I really didn't know about that add function. Thankiu
Sir, I do not know if you'd read this but thank you so much......This was very informative. Thank you for that
Thanks for this video. I really learn a lot!
This is a really good explanation
Simply awesome.Thank you so much.
Thank you .. really great content you provide here
Thank you. That's why I like your approach to teaching : Straight to the point.
@WebDevSimplified
4 жыл бұрын
Thank you. I try to keep my videos consice since I hate long winded videos that go nowhere.
That was fantastic. Thank you so much :)
Very interesting!! And now I understand why the three points d = [...c] to make a new copy of an array.
This video was really clarifying. Thank you so much!
@WebDevSimplified
4 жыл бұрын
You're welcome!
Once again - so greatly explained
An explanation I will not forget for lifetime
Best programming channel on KZread.
thank u so much!!!!!!!!!!!!!!!! this really helped me understand this concepts!
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
4 жыл бұрын
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.
thanks for this. great info!
Best video on this topic!
I should cry right now... I finally understand this weird javascript concept that has been kicking my ass..
wow these information blew my mind
Awesome content mate 👍👍👍
the main cache here is "primitive and non-primitive" data types referring to "pass by value and pass by reference" respectively.