JavaScript - Reference vs Primitive Values/ Types

Поділитися
Вставка
  • Опубліковано 28 гру 2024

КОМЕНТАРІ • 329

  • @nuttaphonr.6498
    @nuttaphonr.6498 3 роки тому +36

    Thanks for concepts about reference vs primitives type and heap/stack too!
    3:39 string is primitive (copy by value)
    6:47 object ,array are references type
    7:05 primitives are store on stack
    7:35 references are store on heap (take longer to access, store bigger amount of data)
    8:40 stack (store like stack 'push on top')
    9:16 heap (store pointer)
    10:48 it assign a pointer not value
    14:50 Object.assign create new object and merge with existing one
    16:07 Object.assign doesn't deep clone
    17:26 may use Lodash to clone instead
    19:04 copy array

  • @josiahtobas9172
    @josiahtobas9172 4 роки тому +66

    Yeah man, you did a great job at explaining this stuff, I thought I understood it before but now I really understand it. God bless you 100 man. Peace.

  • @akshhatsrivastava1972
    @akshhatsrivastava1972 4 роки тому +32

    That stack and heap explanation was very insightful. Thank you!

  • @energan2184
    @energan2184 4 роки тому +2

    Max, I don't know how you make explaining this so simple. If I would try to transfer what I have learned, I would confuse the hell out of the people listening. Thanks a lot for all the content you provide and for making many complicated subjects look actually, again, simple.

  • @88spaces
    @88spaces 4 роки тому +8

    Max, you're very good at explaining complex topics in a simple way that makes them easier to understand. Thanks for the video.

  • @naythaniel
    @naythaniel 7 років тому +106

    The short version, not 20 minute version of this, is that primitives (things that aren't containers for multiple separate values) make copies when passed to a function; while objects (containers for multiple separate values) make *references* to the object when passed to a function. In other words, when something is likely to be relatively small, it's okay to make a copy, but when it can potentially be enormously large, you just say where the thing is. Remember, primitives = copies && objects = references (which means addresses || pointers).

    • @prathameshsawant843
      @prathameshsawant843 6 років тому +1

      You can use destructuring to copy object. Although for the array that is stored as a property inside object you will have to use destructuring again.

    • @augiefash2239
      @augiefash2239 4 роки тому +2

      Brilliant. I've spent the last 3 days trying to grapple with / grasp this, and you pretty much just saved me. Thanks bud!

    • @jeewanmaharjan2712
      @jeewanmaharjan2712 4 роки тому

      You deserve award for this explanation .

    • @inote007
      @inote007 4 роки тому +1

      @@prathameshsawant843 that's called deep cloning

    • @rickvian
      @rickvian 4 роки тому +8

      I recommend go through this 20 minutes cause it is worth it!

  • @73dines
    @73dines 5 років тому +3

    This is one of the most confusing tutorial i've ever watched.
    And I have to watch it again.
    And again.
    But thank you very much. Well done.

  • @jimmysignature915
    @jimmysignature915 2 роки тому +1

    This is excellent, the addition of the stack and heap explanations really clear this topic up. One of those things that is both easier and harder than it looks...

  • @dheerajmantena3307
    @dheerajmantena3307 6 років тому +1

    Object.assign({},deepMind.Slice());
    Superb in depth explanation You are the best for ever max .
    Thanks again

    • @academind
      @academind  6 років тому

      Thanks a million for your fantastic feedback Dheeraj, so cool to read that you like my videos :)

  • @sydneyhill655
    @sydneyhill655 2 роки тому

    The stack and heap explanation and illustration for these concepts made lightbulbs go off for me. Thank you.

  • @samirergaibi874
    @samirergaibi874 6 років тому +14

    Thank you for this visual explanation, really made me understand. The pictures of the Stack and Heap sure helped as well ! :)

  • @eruston
    @eruston 5 років тому +4

    Very good explanation. I remember in C++, for every constructor, you have to have a destructor, otherwise the objects will 'pile up' on the heap = memory leak.

  • @cdac1645
    @cdac1645 10 місяців тому

    This is the best and most concise explanation I have seen on UA-cam. Thanks

  • @JuanFVasquez
    @JuanFVasquez 7 років тому +3

    Wow Max, I thought I knew what primitive and reference types were. You simply took these concepts to a whole new level! I didn't know about the stack and the heap at all! Thanks for explaining these amazing concepts.

    • @academind
      @academind  7 років тому +1

      Thank YOU Juan for such an awesome feedback, really happy to read comments like yours :)

  • @berkan8518
    @berkan8518 4 роки тому

    Brother ! I really respect you. You are the best educator of all time. If you weren't born i couldn't understand these things because there is noone explain these things very specific and easy as you. Thanks

  • @RaterisimoCBA
    @RaterisimoCBA 4 роки тому +1

    Awesome video, came here because in your Udemy course about Angular you said we should look this subject up (Primitive values vs Reference values). I think I got the main ideas pretty well, I followed your coding in JSbin myself. Thanks Max !

  • @pushpaaji
    @pushpaaji 7 років тому

    Recently started angular. Getting issues just because of object and arrays are getting changed. you saved me. thanks for the great tutorial.

    • @academind
      @academind  7 років тому

      Awesome to hear that, thanks for your great review!

  • @Concentrum
    @Concentrum 7 років тому

    I'm impressed by your fluent and well-prepared explaining. your gestures are also very entertaining haha, thanks for doing what you do.

    • @academind
      @academind  7 років тому

      Nice to hear that, thanks so much ;)

  • @ihortsarenko3119
    @ihortsarenko3119 6 років тому +2

    amazing as always. Thank you, Max. Maybe it could be a little bit hard for newbies, but that's the best explanation I saw for about a year of learning JS

  • @robdorn420
    @robdorn420 7 років тому +32

    Thanks Max, the best explanation I have ever got on this subject.

    • @academind
      @academind  7 років тому +2

      Really amazing to hear that, thanks so much Rob!

    • @fishworld2021
      @fishworld2021 4 роки тому

      ua-cam.com/video/SnXR6kX1SqA/v-deo.html try this

  • @saltech2024
    @saltech2024 Рік тому

    Great
    And this is what I have to say
    In primitive data types or values, once you get a copy from the declared value its change will not affect the copied variable
    In reference data type any changes done to the parent variable will alter the variable that's created from it

  • @tezdogs
    @tezdogs 2 роки тому +1

    This actually helped me understand how to use pointers and reference values in C++, too!
    Thank you Max! :D

  • @bonzo6989
    @bonzo6989 4 роки тому +1

    Thanks bro it is really helpful. The only thing missing here is possiblity of using JSON to make a deep copy.

  • @paulparton404
    @paulparton404 6 років тому +18

    A shorthand way to clone the object and its array with the spread operator
    const person3 = {
    ...person2,
    hobbies: [
    ...person2.hobbies
    ]
    }

    • @yezhang1927
      @yezhang1927 5 років тому +1

      I think it works if you just use this:
      const person3 = {
      ...person2}

    • @brookspatrader
      @brookspatrader 5 років тому +1

      ​@@yezhang1927 No, with your solution, it not works. Paul's right.

    • @bhupenderKeswani
      @bhupenderKeswani 3 роки тому

      A better way to solve this is
      const person3 = JSON.parse(JSON.stringify(person2));

  • @mimoid7862
    @mimoid7862 5 років тому +1

    It was quite long but very good video. You explain everything clearly and slowly with good examples of what you talking about. I didn't know some of these things :)

    • @academind
      @academind  5 років тому

      Thank you, happy to read that you liked it :)

  • @huzeyfetas
    @huzeyfetas 2 роки тому +1

    I have 1.5 years of experience as a software developer. I watched this video about 1.5 years ago. and i said ok i got it. now i'm watching it again and now i'm saying "okay now i get it". I came here from Max's svelte.js course. why do we need to use assignment operation in svelte which does not use push to work with arrays, now everything is very clear. I hope there is no problem in my project where I used the object.assign operation almost on the ground 1 year ago while cloning an object :) Now I understand the value of the deep copy operation. Seeing the questions and answers on stackoverflow I realized that this is a real problem. (My english is not good enough, I hope I was able to express myself. )

    • @jtaylor8606
      @jtaylor8606 2 роки тому +1

      Your comment makes perfect sense. Nearly every comment on here is saying how simple this explanation makes it to follow but, honestly, I doubt if even 50% of those people really understand it properly. I've watched it multiple times and there are still a couple of parts that I don't think I'm understanding fully.

  • @Hadoitz
    @Hadoitz 6 років тому

    Thanks man, your explanation has saved me from hours of headache.

    • @academind
      @academind  6 років тому

      Really great to read that Hadyan :)

  • @xseeginfo5064
    @xseeginfo5064 5 років тому

    best primitive and reference tutorial forever

    • @academind
      @academind  5 років тому

      Thank you, awesome to read that!

  • @53Strat
    @53Strat 2 роки тому

    Loved this explenation. My head is indeeds teaming but the core principle is clear. Will rewatch and practice with this.

  • @dhanooshbargav7215
    @dhanooshbargav7215 3 роки тому

    You did the explanation as best as you could. Thanks a lot!

  • @GaneshKumarButcha
    @GaneshKumarButcha 7 років тому

    I came across the same problem, glad you put the video at the right time.

    • @academind
      @academind  7 років тому

      Haha, awesome to hear my timing was right Ganesh :D

  • @MJ-fu4yc
    @MJ-fu4yc 5 років тому

    Max, I got that Udemy course about nodeJS, I know basics of oop, but came here only to refresh my knowledge, I cant help commenting that you are great lecturer !

    • @academind
      @academind  5 років тому

      Thanks so much for your awesome support here and on Udemy Marcin!

  • @baharehbadiei7698
    @baharehbadiei7698 6 місяців тому

    Perfectly and deeply explained! Loved it. Thanks :)

  • @utsavkumar4381
    @utsavkumar4381 6 років тому

    Good that you covered the subject with Stack and heap explanation. Thanks Max :)

    • @academind
      @academind  6 років тому

      Thanks a lot for your great feedback Utsav, really appreciate that :)

  • @ramiahviknesh3014
    @ramiahviknesh3014 6 років тому

    Thanks, Buddy . One of the best explanations I have had for primitive and referenced values. The only thing that was missing was the destructuring method (ES6) to clone an object or an array.

    • @academind
      @academind  6 років тому

      You're right, that's a great way of cloning an object or array

  • @DespicariPirates
    @DespicariPirates Рік тому +1

    JSON.parse(JSON.stringify(object)) beter way to deeply clone objects

  • @naqeeburrahman4709
    @naqeeburrahman4709 5 років тому

    That makes sense. thank u.
    Earlier I was bit confused why u took long steps to copy in one example of your react course.

  • @yuriiyakhnytsia2292
    @yuriiyakhnytsia2292 3 роки тому

    Thanks a lot, now I have a clear understanding of what happens with the state in redux, and now I knew that I have a great number of issues with the store of my project, just because I copied the state with spread (...) operator. But I have a state not only with primitive types but with objects and arrays either, and in the future, it may cause problems.

  • @gabrieljoshuapaet2572
    @gabrieljoshuapaet2572 7 років тому +1

    Thank you so much Max for the great explanation I now understand the difference of primitive types and reference types. I really learn a lot in your videos keep it up! 👍

    • @academind
      @academind  7 років тому

      Really happy to hear that this video was helpful! :)

  • @aneshkl
    @aneshkl 6 років тому

    Thank you so much for this video. It was explained so well. I don’t think I’ll ever get confused between the two.

    • @academind
      @academind  6 років тому

      Happy to read that the video was helpful for you Aneesh, thank you :)

  • @krunoslavbanovac4356
    @krunoslavbanovac4356 7 років тому

    Very well explained. Missed your vids Max.

    • @academind
      @academind  7 років тому

      But my videos were never paused? Anyways, happy to hear you liked this one!

    • @krunoslavbanovac4356
      @krunoslavbanovac4356 7 років тому

      But they were paused for me. After watching your React and Redux tuts, thanks to you, I was too busy working on a project :D

  • @sachithradilshan9673
    @sachithradilshan9673 6 років тому

    it is a one of best explanation sir.you have well planned the example and content.keep doing.

    • @academind
      @academind  6 років тому

      It's just fantastic to read that, thanks a lot!

  • @rohil3023
    @rohil3023 3 роки тому

    Great explanation.I think i understood most of what you said 👏

  • @ericellison2413
    @ericellison2413 6 років тому

    Holy shit max , you are amazing , i was confused about heap and stack for months , you are my man .....

    • @academind
      @academind  6 років тому +1

      Really great to hear you're liking it - thank you so much! :)

  • @OmarOnAWave
    @OmarOnAWave 3 роки тому

    Amazing explanation man ! wow you really have a talent to break things down to understandable bits

  • @aayushikambriya3546
    @aayushikambriya3546 6 років тому

    THE BEST EXPLANATION EVER MAX !

    • @academind
      @academind  6 років тому

      Thanks so much Aayushi, this really means a lot to me!

  • @sashab4432
    @sashab4432 2 роки тому

    The explanation was soo good. Thank you!

  • @TheSkis
    @TheSkis 7 років тому

    Great explanation! Thorough and covered all feasible cases

    • @academind
      @academind  7 років тому

      Thanks a lot for your nice feedback Ben!

  • @leemacpherson
    @leemacpherson Рік тому

    Great explanation. Super important concepts.

  • @dukewellington5222
    @dukewellington5222 4 роки тому

    Great explanations. Keep up the good work, Max!

  • @sourishdutta9600
    @sourishdutta9600 6 років тому

    You all time amaze me.You the best I have ever seen.You could also explain Object.freeze() to this lecture.Anyways mutable vs immutable great.I am a big fan of yours.Share your knowledge Sir Max.

  • @jason-pacini
    @jason-pacini 3 роки тому

    In case anyone is wondering, you can make a deep copy by doing:
    let newObj = JSON.parse(JSON.stringify(oldObj))

  • @scottsaccenti
    @scottsaccenti 4 роки тому

    So helpful. A little thing, yet something that has trouble staying in place in my mind. Thanks.

  • @mk17173n
    @mk17173n 4 роки тому +1

    When we said var SecondName = name even though the values are the same are the two values located in different places in memory? Are there two different 'Max' in two different memory locations or are they referring to the same 'Max' in the same location in memory?

  • @msalah5214
    @msalah5214 4 роки тому

    Thank u for this video. I was wondering before how could i handle this cases in my code. Now its very clear about the object references. You are very helpfull... thank youu..

  • @aabid3375
    @aabid3375 5 років тому +3

    How awesome is the explanation...Yup it was little bit longer but i can asure you of getting it if u watch it for the second time. #thanksMaxy

  • @muradprohere
    @muradprohere Рік тому

    happy to learn from you mr max thank you for the explanation

  • @celestia1
    @celestia1 3 роки тому

    Dude you are very useful. Become a teacher cause you clarified it very well.

  • @petrockspiracy3120
    @petrockspiracy3120 5 років тому

    That was a fantastic explanation and use of example.

  • @HaifengZhu-pn3uq
    @HaifengZhu-pn3uq 9 місяців тому

    Max' content is always great

  • @jasnanajeem9121
    @jasnanajeem9121 5 років тому

    at 11:34, why didnt the names in the console.log of other two [object object] change to chris??????????????//

  • @codebuilders9081
    @codebuilders9081 5 років тому

    that was a pretty nice explaination of a complex concept.

    • @academind
      @academind  5 років тому +1

      Happy to read that, thank you!

  • @aabid3375
    @aabid3375 5 років тому

    I am completely enjoying Your Nde.js course

    • @academind
      @academind  5 років тому

      Happy to read that Abidul, thank you for your support!

  • @nadiaharrismartinez
    @nadiaharrismartinez 2 роки тому

    That was so helpful. Great explanation. Thanks so much!

  • @MrSalFav
    @MrSalFav 4 місяці тому

    This is an extremely powerfull tut. Thank you.

  • @waseemansar4077
    @waseemansar4077 7 років тому

    wow you make this concept very simple. Thanks Max

    • @academind
      @academind  7 років тому

      Happy to hear that this was helpful! :)

  • @karnpratapsingh8860
    @karnpratapsingh8860 3 роки тому

    awesome explanation!
    Really helpful. Thanks for it.

  • @nitram_nosnibor
    @nitram_nosnibor 4 роки тому

    Maxi-baby you explained that REALLY well. Thank you, I totally get it now 👍🏻

  • @sir_humpy
    @sir_humpy 5 років тому +5

    I'd pay big money to have JS return "Max" on 6:15 and see Max's reaction.

  • @BrianGreigRWD
    @BrianGreigRWD 7 років тому

    Great explanation Max. Very succinct. I would add that other array prototype member functions are also immutable (filter, map, reduce). Added you as a recommendation on my channel. Cheers.

    • @academind
      @academind  7 років тому +1

      That's true, great addition! I'm happy you're liking it Brian!

  • @muhammad_faraz_ali
    @muhammad_faraz_ali Рік тому

    Well explanation Mx, you did a great job

  • @boristheblad
    @boristheblad 2 роки тому

    Nice to know that, well explained. thanks!

  • @soumadip_banerjee
    @soumadip_banerjee 13 днів тому +1

    Dankeschön! 🤘🏻

  • @abhishekshimpi214
    @abhishekshimpi214 3 роки тому

    Thank u so much dude u completely cleared my concept

  • @sandeshjadhav2188
    @sandeshjadhav2188 4 роки тому

    Thank you for this visual explanation, really made me understand.

  • @ХристоСтанков-о6к
    @ХристоСтанков-о6к 6 років тому

    Awasome. The best explanation!

    • @academind
      @academind  6 років тому

      Thank you so much, I'm glad you liked it!

  • @swapnilbhargava2927
    @swapnilbhargava2927 4 роки тому

    Max, you are simply awesome. I love you 😘

  • @bronstein007
    @bronstein007 Рік тому

    Great video diving deeper into reference types and reference values! I was so tired of just hearing people say, "it's a reference type, they aren't the same". Actually seeing how it works in the stack and heap memory space was SO valuable.
    Question about Object.assign and slice methods for copying objects and arrays: Would an equivalent (and potentially cleaner way of doing it) just be using the spread operator for both?
    Thanks!

  • @pankajsharma9801
    @pankajsharma9801 4 роки тому

    Thank you so much.
    You clear lot of important points for me. 😊👌

    • @fishworld2021
      @fishworld2021 4 роки тому

      ua-cam.com/video/SnXR6kX1SqA/v-deo.html

  • @rohancherry
    @rohancherry 6 років тому

    excellent explanation, thank you Max.

    • @academind
      @academind  6 років тому

      So happy to read that Ravi thank you very much!

  • @aakritigoyal1432
    @aakritigoyal1432 3 роки тому

    U explained it so well❣💯

  • @ronidey380
    @ronidey380 6 років тому +2

    Thank you so much... Nobody could explain it better than this😊

    • @academind
      @academind  6 років тому +1

      Thank you very very much for your wonderful feedback Roni, this honestly means a lot to me :)

  • @gabrielhernandez8457
    @gabrielhernandez8457 7 років тому +5

    Hey Max!, really nice udemy courses that you have... greetings from Chile!

    • @academind
      @academind  7 років тому +1

      Really happy to hear you're liking them Gabriel - thanks for your amazing feedback!

  • @BeeshoStudying
    @BeeshoStudying 2 роки тому

    thank you for the video and the simple explanation

  • @syedhaiderraza9687
    @syedhaiderraza9687 6 років тому

    Great, Clear my confusion. Thanks a lot

    • @academind
      @academind  6 років тому +1

      That's really great to read, thanks a lot for your comment!

  • @michelleBSkiLLz
    @michelleBSkiLLz 3 роки тому

    nice and easy explanation! Thanks!

  • @pantelisvasileiadis2858
    @pantelisvasileiadis2858 5 років тому +1

    thank you! cleared things up in my head

  • @naeliesuttra
    @naeliesuttra 11 місяців тому

    In the example with person and secondPerson, why isn't the same pointer that gets created for person used when we do var secondPerson = person?
    Is it because if the first variable gets deleted, the first pointer disappears too and we need something "left" to point to the object in memory?

  • @dominiquefortin5345
    @dominiquefortin5345 6 років тому

    For having written a javascript compiler/interpreter, I think that talking about the stack in javascript is using a low level metaphor that does not have it's place. All the function parameter are evaluated and the results are put in a structure called the closure that will be use to evaluate the function. If function parameters were alway on the stack then when returning a function object, you would lose all the parameter values of the enclosing function. At best, the stack is used as an optimization for this closure if there is no reference of the closure captured in a function instantiation. The location of the content of a closure is implementation specific.

  • @vs599318026
    @vs599318026 7 років тому

    Thanks Max, you explained so well !!!! It helps me a lot !!

    • @academind
      @academind  7 років тому

      Thanks a lot Jack, great to hear that :)

    • @vs599318026
      @vs599318026 7 років тому

      I'm actually taking your ES6 course on Udemy, and I think you should add this to the intro section and it will be more clear. I know you explain the same thing while explaining the ES6 features but that visual ppt really helps me to understand primitive and reference deeply !!! Anyways, 5 stars on the ES6 course and moving on to your Vuejs course !! :)

  • @tymothylim6550
    @tymothylim6550 3 роки тому

    Thank you very much for this video! :) It was very interesting and I learnt a lot!

  • @chrsbll
    @chrsbll 7 років тому

    Extremely well explained. Thank you.

    • @academind
      @academind  7 років тому

      Really happy to hear that, thanks so much Chris!

  • @lakhveerchahal
    @lakhveerchahal 4 роки тому

    Thanks as always Max

  • @SAMIURRAHNMANSHAIKH
    @SAMIURRAHNMANSHAIKH 7 років тому

    Heay Max,
    Awesome as usual. Awesome explanation. please please keep it up.

    • @academind
      @academind  7 років тому

      I'll try my best, thanks so much for your awesome feedback!

  • @emanfinding2603
    @emanfinding2603 6 років тому

    Pretty clear, Thanks Max!

    • @academind
      @academind  6 років тому

      Very happy to read that Eman, thank you for your comment!

  • @prabhasthakur9776
    @prabhasthakur9776 2 роки тому

    One silly doubt, when name variable is updated from 'Max' to 'Chris' then on the stack whether the 'Max' is replaced to 'Chris' or a new copy of 'Chris' is made on top of the stack? Thanks.

  • @DharmendraSingh4ever
    @DharmendraSingh4ever 3 роки тому

    Thank you very much... You are great ✌🏼👍🏼

  • @dancewithdevils99
    @dancewithdevils99 2 роки тому

    coming from the react course , very very useful , is there any videos like this topic to understand more everything deep in stack .!

  • @frontend1662
    @frontend1662 Рік тому

    Amazing video, I'll recommend ❤

  • @pleirlat4
    @pleirlat4 7 років тому

    Excellent video!
    Very clear and easy to follow with the diagrams.
    I have only one doubt that can't understand.
    For example:
    var obj1 = { p1: "aaa" };
    var obj2 = obj1;
    console.log(obj2.p1); // -> aaa
    obj1 = null;
    console.log(obj2.p1); // -> aaa
    Why obj2 keeps the pointer to object if I set the obj1 to null.
    Isn't it changing the heap object?
    I mean, What is the difference of doing it equal to null and setting a property to other value?
    Thank you!