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

  • @taragilesbie94
    @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

    @dharma276

    Жыл бұрын

    That's a great analogy!

  • @warrentait4610
    @warrentait46103 жыл бұрын

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

  • @buddimalliyanapathirana1767

    @buddimalliyanapathirana1767

    2 жыл бұрын

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

  • @BobbyBundlez

    @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

    @priyankbhalani

    8 ай бұрын

    Same goes for me today…😅

  • @makamaka487
    @makamaka4872 жыл бұрын

    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
    @ghabrielmielli58583 жыл бұрын

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

  • @domxon

    @domxon

    2 жыл бұрын

    @Ghabriel Mielli kzread.info/dash/bejne/aWhq2qSHY6nZac4.html

  • @RR-et6zp

    @RR-et6zp

    Жыл бұрын

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

  • @nerdiloo9863
    @nerdiloo98634 жыл бұрын

    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

    @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

    @BobbyBundlez

    2 жыл бұрын

    Yes. Same goes for redux and other state management!

  • @HeatherLeigh44
    @HeatherLeigh442 жыл бұрын

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

  • @santra528
    @santra5284 жыл бұрын

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

  • @stevieholland3579
    @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.

  • @michellesalas6175
    @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!

  • @sanjibdey01
    @sanjibdey012 жыл бұрын

    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.

  • @highallthetime6138
    @highallthetime61382 жыл бұрын

    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

  • @lesbiancake
    @lesbiancake2 жыл бұрын

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

  • @tusharcreates
    @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!

  • @linuslexy3161
    @linuslexy31613 жыл бұрын

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

  • @ZZZZ65362
    @ZZZZ653624 жыл бұрын

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

  • @WebDevSimplified

    @WebDevSimplified

    4 жыл бұрын

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

  • @josephgarza5973

    @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.

  • @tuanchu8022
    @tuanchu80224 жыл бұрын

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

  • @Zen-lz1hc

    @Zen-lz1hc

    3 жыл бұрын

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

  • @SherryTheNerd
    @SherryTheNerd2 жыл бұрын

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

  • @anonymous.youtuber
    @anonymous.youtuber4 жыл бұрын

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

  • @mitejmadan8672
    @mitejmadan86723 жыл бұрын

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

  • @elisa_musik
    @elisa_musik8 ай бұрын

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

  • @atsglobalservices6136
    @atsglobalservices6136 Жыл бұрын

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

  • @stevebob240
    @stevebob2402 жыл бұрын

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

  • @vonshitz
    @vonshitz2 жыл бұрын

    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!!!

  • @liveyourdreamsdotbe
    @liveyourdreamsdotbe4 жыл бұрын

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

  • @hyfydistro
    @hyfydistro3 жыл бұрын

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

  • @amoghs1342
    @amoghs13422 жыл бұрын

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

  • @23LS023
    @23LS023 Жыл бұрын

    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 )))

  • @maxxinmaze4501
    @maxxinmaze4501 Жыл бұрын

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

  • @ThomasCasserly
    @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 ; - )

  • @fluffydoggo
    @fluffydoggo4 жыл бұрын

    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

  • @tatolela1234
    @tatolela12343 жыл бұрын

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

  • @lukeketterer
    @lukeketterer3 жыл бұрын

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

  • @taylorenglish6237
    @taylorenglish62372 жыл бұрын

    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)?

  • @aymenboudabia5221
    @aymenboudabia5221 Жыл бұрын

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

  • @mistic.2964
    @mistic.2964 Жыл бұрын

    Thank you for this thorough explanation, it really helped!

  • @Madmann16
    @Madmann16 Жыл бұрын

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

  • @noideaofhowcallme
    @noideaofhowcallme2 жыл бұрын

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

  • @marsdwarf
    @marsdwarf3 жыл бұрын

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

  • @xesiusprime9360
    @xesiusprime93603 жыл бұрын

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

  • @andrew.schaeffer4032
    @andrew.schaeffer4032 Жыл бұрын

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

  • @VarshaFlimz
    @VarshaFlimz2 жыл бұрын

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

  • @sinnvollerkommentar263
    @sinnvollerkommentar2632 жыл бұрын

    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

  • @diveshkswn
    @diveshkswn3 жыл бұрын

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

  • @shaiebhamzadev6241
    @shaiebhamzadev6241 Жыл бұрын

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

  • @jkk9829
    @jkk98293 жыл бұрын

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

  • @Emilytigerkitty
    @Emilytigerkitty2 жыл бұрын

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

  • @busyrand
    @busyrand2 жыл бұрын

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

  • @aadilvalconi9972
    @aadilvalconi9972 Жыл бұрын

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

  • @ronaldbrammer1823
    @ronaldbrammer1823 Жыл бұрын

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

  • @Unknown-840
    @Unknown-8402 жыл бұрын

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

  • @karthicodings3896
    @karthicodings38964 жыл бұрын

    Thank you, you fulfilled my request 🙏🙏

  • @WebDevSimplified

    @WebDevSimplified

    4 жыл бұрын

    You're welcome! It was a great suggestion.

  • @syntaxed4365
    @syntaxed43653 жыл бұрын

    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.

  • @JoshKonoff1
    @JoshKonoff13 жыл бұрын

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

  • @WebDevSimplified

    @WebDevSimplified

    3 жыл бұрын

    That is awesome! I am glad you enjoyed it.

  • @earnestdavis
    @earnestdavis Жыл бұрын

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

  • @madhousenetwork7765
    @madhousenetwork77653 жыл бұрын

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

  • @AwSomeWookie1
    @AwSomeWookie12 жыл бұрын

    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]

  • @yusiff
    @yusiff2 жыл бұрын

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

  • @Jonathan_Henderson
    @Jonathan_Henderson3 жыл бұрын

    Excellent explanation of one the most important concepts in programming

  • @ahndeux
    @ahndeux2 жыл бұрын

    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.

  • @eliorbuskila5794
    @eliorbuskila57943 жыл бұрын

    That explanation is gold bro. SUBSCRIBED

  • @mohammedalmukhtar8949
    @mohammedalmukhtar89494 жыл бұрын

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

  • @WebDevSimplified

    @WebDevSimplified

    4 жыл бұрын

    You're welcome!

  • @kostiantynkarzhanov9216
    @kostiantynkarzhanov921610 ай бұрын

    Thanks! Informative video, cleared up my understanding 💛

  • @justsaybobby
    @justsaybobby Жыл бұрын

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

  • @DubZenStep
    @DubZenStep2 жыл бұрын

    Perfect explanation. Thank you so much man.

  • @ignaciorosenberg5175
    @ignaciorosenberg5175 Жыл бұрын

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

  • @YggLart
    @YggLart Жыл бұрын

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

  • @aqibmalik6313
    @aqibmalik63139 ай бұрын

    LAST BIT ABOUT WHY WE CAN EDIT CONST WAS BOOM😇😇😇

  • @iben1195
    @iben11953 жыл бұрын

    What the hell did I just learn? I've been so fortunate, not running into bugs and not knowing this. Thanks 🙏

  • @sogouhigishikata8885
    @sogouhigishikata88852 жыл бұрын

    This explains so much, thank you!

  • @Stereotica
    @Stereotica Жыл бұрын

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

  • @martinpatrikov7776
    @martinpatrikov77762 жыл бұрын

    Amazing explanation! Thank you!

  • @LIVESPORTPLUS
    @LIVESPORTPLUS2 жыл бұрын

    This is super clear, thank you!

  • @tan2cang93
    @tan2cang933 жыл бұрын

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

  • @cba88
    @cba883 жыл бұрын

    you are the best teacher, your are gifted

  • @abdqadr
    @abdqadr2 жыл бұрын

    Wow. Thank you. This is illuminating

  • @The.mohisa
    @The.mohisa9 ай бұрын

    Thanks for such a helpful content.

  • @poormancodespmc4598
    @poormancodespmc45983 жыл бұрын

    Thank you very much for the clear explanation.

  • @kenluong1204
    @kenluong12043 жыл бұрын

    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.

  • @GameTesterMobile
    @GameTesterMobile4 жыл бұрын

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

  • @albertoazinar1209
    @albertoazinar12093 жыл бұрын

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

  • @alexfrancis6091
    @alexfrancis60912 жыл бұрын

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

  • @anneu8314
    @anneu83144 жыл бұрын

    Thanks for this video. I really learn a lot!

  • @chikatikah3838
    @chikatikah38383 жыл бұрын

    This is a really good explanation

  • @nileshpandey4505
    @nileshpandey4505 Жыл бұрын

    Simply awesome.Thank you so much.

  • @mohamedelhalwany4252
    @mohamedelhalwany4252 Жыл бұрын

    Thank you .. really great content you provide here

  • @stylesg7818
    @stylesg78184 жыл бұрын

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

  • @WebDevSimplified

    @WebDevSimplified

    4 жыл бұрын

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

  • @vaylx2253
    @vaylx22532 жыл бұрын

    That was fantastic. Thank you so much :)

  • @PildorasMusicales
    @PildorasMusicales3 жыл бұрын

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

  • @dawid_dahl
    @dawid_dahl4 жыл бұрын

    This video was really clarifying. Thank you so much!

  • @WebDevSimplified

    @WebDevSimplified

    4 жыл бұрын

    You're welcome!

  • @ThatBritishVlogger
    @ThatBritishVlogger4 жыл бұрын

    Once again - so greatly explained

  • @k_kfamily6162
    @k_kfamily61623 жыл бұрын

    An explanation I will not forget for lifetime

  • @threeone6012
    @threeone60124 жыл бұрын

    Best programming channel on KZread.

  • @MaguiDias
    @MaguiDias3 жыл бұрын

    thank u so much!!!!!!!!!!!!!!!! this really helped me understand this concepts!

  • @AlexTechie
    @AlexTechie4 жыл бұрын

    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

    @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.

  • @Tashik19
    @Tashik192 жыл бұрын

    thanks for this. great info!

  • @mr.guardian4491
    @mr.guardian44913 жыл бұрын

    Best video on this topic!

  • @jeromelawrence9819
    @jeromelawrence98192 жыл бұрын

    I should cry right now... I finally understand this weird javascript concept that has been kicking my ass..

  • @bluemodize7718
    @bluemodize7718 Жыл бұрын

    wow these information blew my mind

  • @user-gt4fr1he9w
    @user-gt4fr1he9w6 ай бұрын

    Awesome content mate 👍👍👍

  • @harishs7384
    @harishs73842 жыл бұрын

    the main cache here is "primitive and non-primitive" data types referring to "pass by value and pass by reference" respectively.