JavaScript - Reference vs Primitive Values/ Types

One of the most common error sources: Not understanding what the difference between reference and primitive values is. This video will clear up the confusion.
Need more JavaScript Training?
Consider my "JavaScript - The Complete Guide" course: acad.link/js
Stack vs Heap: www.quora.com/What-is-the-dif...
Object.assign(): developer.mozilla.org/en-US/d...
Slice(): developer.mozilla.org/en/docs...
Lodash Clone Deep: lodash.com/docs/#cloneDeep
Want to become a frontend developer? Consider diving into some of my courses:
Angular vs React vs Vue - Quickstart and Comparison: acad.link/ng-vs-react-vs-vue
Ionic + Angular - The Practical Guide: acad.link/ionic
Angular - The Complete Guide: acad.link/angular
Vue.js - The Complete Guide: acad.link/vuejs
You can follow me on Twitter (@maxedapps), Facebook ( / academindchannel ) or visit our Website (www.academind.com).
See you in the videos!

Пікірлер: 327

  • @nuttaphonr.6498
    @nuttaphonr.64983 жыл бұрын

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

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

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

  • @naythaniel
    @naythaniel7 жыл бұрын

    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

    5 жыл бұрын

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

    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 .

  • @inote4266

    @inote4266

    4 жыл бұрын

    @@prathameshsawant843 that's called deep cloning

  • @rickvian

    @rickvian

    3 жыл бұрын

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

  • @88spaces
    @88spaces3 жыл бұрын

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

  • @samirergaibi874
    @samirergaibi8745 жыл бұрын

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

  • @energan2184
    @energan21843 жыл бұрын

    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.

  • @73dines
    @73dines4 жыл бұрын

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

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

  • @JuanFVasquez
    @JuanFVasquez6 жыл бұрын

    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

    6 жыл бұрын

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

  • @RaterisimoCBA
    @RaterisimoCBA3 жыл бұрын

    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 !

  • @cdac1645
    @cdac16454 ай бұрын

    This is the best and most concise explanation I have seen on KZread. Thanks

  • @sydneyhill655
    @sydneyhill6552 жыл бұрын

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

  • @tezdogs
    @tezdogs2 жыл бұрын

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

  • @eruston
    @eruston5 жыл бұрын

    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.

  • @Concentrum
    @Concentrum7 жыл бұрын

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

  • @dukewellington5222
    @dukewellington52224 жыл бұрын

    Great explanations. Keep up the good work, Max!

  • @berkan8518
    @berkan85184 жыл бұрын

    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

  • @dhanooshbargav7215
    @dhanooshbargav72153 жыл бұрын

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

  • @ihortsarenko3119
    @ihortsarenko31195 жыл бұрын

    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

  • @academind

    @academind

    5 жыл бұрын

    Thanks a lot Irop!

  • @naqeeburrahman4709
    @naqeeburrahman47094 жыл бұрын

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

  • @OmarOnAWave
    @OmarOnAWave2 жыл бұрын

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

  • @aneshkl
    @aneshkl5 жыл бұрын

    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

    5 жыл бұрын

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

  • @mimoid7862
    @mimoid78625 жыл бұрын

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

  • @gabrieljoshuapaet2572
    @gabrieljoshuapaet25727 жыл бұрын

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

  • @scottsaccenti
    @scottsaccenti4 жыл бұрын

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

  • @sandeshjadhav2188
    @sandeshjadhav21884 жыл бұрын

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

  • @baharehbadiei7698
    @baharehbadiei769812 күн бұрын

    Perfectly and deeply explained! Loved it. Thanks :)

  • @utsavkumar4381
    @utsavkumar43816 жыл бұрын

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

  • @GaneshKumarButcha
    @GaneshKumarButcha7 жыл бұрын

    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

  • @53strat55
    @53strat552 жыл бұрын

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

  • @nadiaharrismartinez
    @nadiaharrismartinez2 жыл бұрын

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

  • @pantelisvasileiadis2858
    @pantelisvasileiadis28584 жыл бұрын

    thank you! cleared things up in my head

  • @TheSkis
    @TheSkis7 жыл бұрын

    Great explanation! Thorough and covered all feasible cases

  • @academind

    @academind

    7 жыл бұрын

    Thanks a lot for your nice feedback Ben!

  • @Hadoitz
    @Hadoitz5 жыл бұрын

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

  • @academind

    @academind

    5 жыл бұрын

    Really great to read that Hadyan :)

  • @sashab4432
    @sashab44322 жыл бұрын

    The explanation was soo good. Thank you!

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

    Great explanation. Super important concepts.

  • @karnpratapsingh8860
    @karnpratapsingh88602 жыл бұрын

    awesome explanation! Really helpful. Thanks for it.

  • @robdorn420
    @robdorn4207 жыл бұрын

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

  • @academind

    @academind

    7 жыл бұрын

    Really amazing to hear that, thanks so much Rob!

  • @fishworld2021

    @fishworld2021

    3 жыл бұрын

    kzread.info/dash/bejne/haKMtJikiJS5oaQ.html try this

  • @sourishdutta9600
    @sourishdutta96006 жыл бұрын

    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.

  • @rohil3023
    @rohil30233 жыл бұрын

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

  • @tymothylim6550
    @tymothylim65503 жыл бұрын

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

  • @nitram_nosnibor
    @nitram_nosnibor3 жыл бұрын

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

  • @krunoslavbanovac4356
    @krunoslavbanovac43567 жыл бұрын

    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

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

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

  • @chrsbll
    @chrsbll7 жыл бұрын

    Extremely well explained. Thank you.

  • @academind

    @academind

    7 жыл бұрын

    Really happy to hear that, thanks so much Chris!

  • @yuriiyakhnytsia2292
    @yuriiyakhnytsia22922 жыл бұрын

    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.

  • @waseemansar4077
    @waseemansar40777 жыл бұрын

    wow you make this concept very simple. Thanks Max

  • @academind

    @academind

    7 жыл бұрын

    Happy to hear that this was helpful! :)

  • @msalah5214
    @msalah52144 жыл бұрын

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

  • @ramiahviknesh3014
    @ramiahviknesh30146 жыл бұрын

    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

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

    Nice to know that, well explained. thanks!

  • @dheerajmantena3307
    @dheerajmantena33076 жыл бұрын

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

  • @petrockspiracy3120
    @petrockspiracy31205 жыл бұрын

    That was a fantastic explanation and use of example.

  • @academind

    @academind

    5 жыл бұрын

    Thank you!

  • @TechSquidTV
    @TechSquidTV7 жыл бұрын

    Amazing video as always. Sharing on Twitter!

  • @academind

    @academind

    7 жыл бұрын

    Awesome, thanks so much!

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

  • @syedhaiderraza9687
    @syedhaiderraza96875 жыл бұрын

    Great, Clear my confusion. Thanks a lot

  • @academind

    @academind

    5 жыл бұрын

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

  • @ericellison2413
    @ericellison24136 жыл бұрын

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

  • @academind

    @academind

    6 жыл бұрын

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

  • @adamscantley
    @adamscantley7 жыл бұрын

    This is absolutely fantastic. Thank you!

  • @academind

    @academind

    7 жыл бұрын

    Thanks so much Adam, I'm happy you're liking it!

  • @huzeyfetas
    @huzeyfetas2 жыл бұрын

    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

    Жыл бұрын

    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.

  • @emanfinding2603
    @emanfinding26036 жыл бұрын

    Pretty clear, Thanks Max!

  • @academind

    @academind

    6 жыл бұрын

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

  • @paulparton404
    @paulparton4045 жыл бұрын

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

  • @yezhang1927

    @yezhang1927

    4 жыл бұрын

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

  • @brookspatrader

    @brookspatrader

    4 жыл бұрын

    ​@@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));

  • @aayushikambriya3546
    @aayushikambriya35465 жыл бұрын

    THE BEST EXPLANATION EVER MAX !

  • @academind

    @academind

    5 жыл бұрын

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

  • @michelleBSkiLLz
    @michelleBSkiLLz2 жыл бұрын

    nice and easy explanation! Thanks!

  • @sgt-en4orcer92
    @sgt-en4orcer925 жыл бұрын

    Thanks, great explanation!!

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

    thank you for the video and the simple explanation

  • @bonzo6989
    @bonzo69893 жыл бұрын

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

  • @BrianGreigRWD
    @BrianGreigRWD7 жыл бұрын

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

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

  • @poongudivanan
    @poongudivanan5 жыл бұрын

    Valuable information... !!!! Thanks great..

  • @abhishekshimpi214
    @abhishekshimpi2142 жыл бұрын

    Thank u so much dude u completely cleared my concept

  • @user-fj7bo8gh8e
    @user-fj7bo8gh8e6 жыл бұрын

    Awasome. The best explanation!

  • @academind

    @academind

    6 жыл бұрын

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

  • @gabrielhernandez8457
    @gabrielhernandez84577 жыл бұрын

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

  • @academind

    @academind

    7 жыл бұрын

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

  • @xseeginfo5064
    @xseeginfo50645 жыл бұрын

    best primitive and reference tutorial forever

  • @academind

    @academind

    5 жыл бұрын

    Thank you, awesome to read that!

  • @mertciflikli
    @mertciflikli4 жыл бұрын

    This helped a lot. Thanks!

  • @nathanclassen8489
    @nathanclassen84894 жыл бұрын

    Very helpful, very clear.

  • @pankajsharma9801
    @pankajsharma98014 жыл бұрын

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

  • @fishworld2021

    @fishworld2021

    3 жыл бұрын

    kzread.info/dash/bejne/haKMtJikiJS5oaQ.html

  • @trekmann123
    @trekmann1237 жыл бұрын

    Vielen dank für das tolle Video :)

  • @academind

    @academind

    7 жыл бұрын

    Freut mich, dass es gefällt :)

  • @davida.7586
    @davida.75866 жыл бұрын

    Very good explanation. Thank you!

  • @academind

    @academind

    6 жыл бұрын

    Great to read that you like it David, thank you!

  • @lakhveerchahal
    @lakhveerchahal3 жыл бұрын

    Thanks as always Max

  • @codebuilders9081
    @codebuilders90814 жыл бұрын

    that was a pretty nice explaination of a complex concept.

  • @academind

    @academind

    4 жыл бұрын

    Happy to read that, thank you!

  • @SAMIURRAHNMANSHAIKH
    @SAMIURRAHNMANSHAIKH7 жыл бұрын

    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!

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

    Thank u bro! This video really helped me!

  • @rohancherry
    @rohancherry6 жыл бұрын

    excellent explanation, thank you Max.

  • @academind

    @academind

    6 жыл бұрын

    So happy to read that Ravi thank you very much!

  • @BSEFM-MUHMMADFARAZALI
    @BSEFM-MUHMMADFARAZALI Жыл бұрын

    Well explanation Mx, you did a great job

  • @sachithradilshan9673
    @sachithradilshan96735 жыл бұрын

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

  • @academind

    @academind

    5 жыл бұрын

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

  • @sandeeprao1651
    @sandeeprao16517 жыл бұрын

    Love the way you explain. Thanks Max. Also, halfway through your Angular4 Udemy course. Loving it.

  • @academind

    @academind

    7 жыл бұрын

    Really awesome to hear that Sandeep, thanks for your feedback! :)

  • @pushpaaji
    @pushpaaji7 жыл бұрын

    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!

  • @degreman
    @degreman2 жыл бұрын

    Thats a Good explanation, thanks to you

  • @siddharthchaudhary1305
    @siddharthchaudhary13055 жыл бұрын

    Super clear! :)

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

  • @DharmendraSingh4ever
    @DharmendraSingh4ever3 жыл бұрын

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

  • @vs599318026
    @vs5993180267 жыл бұрын

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

  • @mc-ti5uq
    @mc-ti5uq4 жыл бұрын

    great explanation! vielen Dank :)

  • @KalpeshPanchal
    @KalpeshPanchal7 жыл бұрын

    Very well explained, thanks for sharing your knowledge with us. :-)

  • @academind

    @academind

    7 жыл бұрын

    You're welcome Kalpesh, I'm happy that you're enjoying it!

  • @to-nd7yl
    @to-nd7yl4 жыл бұрын

    well done and thanks great explanation bro keep it up

  • @Scout-uj1fj
    @Scout-uj1fj5 жыл бұрын

    Brilliant VDo...tysm :)

  • @Brixsta503
    @Brixsta5037 жыл бұрын

    Thank you Max! You're the best

  • @academind

    @academind

    7 жыл бұрын

    Thanks for your amazing feedback Charles! :)

  • @Mufassirislam
    @Mufassirislam7 жыл бұрын

    You clear my concept on it thank you. Max

  • @academind

    @academind

    7 жыл бұрын

    Happy to hear that Mufassir! :)

  • @jamesbest2221
    @jamesbest22217 жыл бұрын

    Fantastic Max! So many of us are moving from server-side to both front & back-end. And these bite sized videos are great. I think(?) I have all of your courses, but do you have one on Javascript tips like this for Angular devs? If not, that would be a great course (eg) "Javascript for Angular Developers". ...just a thought...you know, in ALL your spare time! : P

  • @academind

    @academind

    7 жыл бұрын

    Interesting suggestion. I don't have such a course and I don't know if I find the time to plan & create one but I'll certainly release more snippets like this one here on KZread.

  • @HaifengZhu-pn3uq
    @HaifengZhu-pn3uq3 ай бұрын

    Max' content is always great

  • @Incognito-ig7ld
    @Incognito-ig7ld3 жыл бұрын

    Thank you STRONG LESSON.