• Monday , 6 April 2020

JavaScript – Reference vs Primitive Values/ Types

Code Canyon



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 “Accelerated JavaScript Training” course, available for $15: https://www.udemy.com/javascript-bootcamp-2016/?couponCode=YOUTUBE_PROMO
Want to take the next step? Dive into ES6 for only $14: https://www.udemy.com/es6-bootcamp-next-generation-javascript/?couponCode=YOUTUBE_PROMOS

Stack vs Heap: https://www.quora.com/What-is-the-difference-between-the-stack-and-the-heap
Object.assign(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Slice(): https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
Lodash Clone Deep: https://lodash.com/docs/#cloneDeep

Want to become a frontend developer? Consider diving into some of my courses on Udemy:
Ionic 2 – The Practical Guide for only $15: https://www.udemy.com/ionic-2-the-practical-guide-to-building-ios-android-apps/?couponCode=GETINTOIT
Angular – The Complete Guide for only $15, too: https://www.udemy.com/the-complete-guide-to-angular-2/?couponCode=YOUTUBE_2
Vue.js 2 – The Complete Guide for only $15: https://www.udemy.com/vuejs-2-the-complete-guide/?couponCode=YOUTUBE_VUE

Want to get some 1-on-1 coaching with experienced developers? Have a look at Savvy: https://www.savvy.is/?ref=9fee2b (Discount Code 9fee2b)

You can follow me on Twitter (@maxedapps), Facebook (https://www.facebook.com/academindchannel/) or visit our Website (https://www.academind.com).

See you in the videos!

Original source

3d Ocean

Related Posts

48 Comments

  1. abidul haque
    July 18, 2019 at 14:23

    I am completely enjoying Your Nde.js course

  2. abidul haque
    July 18, 2019 at 14:23

    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

  3. Oleg Olegovich
    July 18, 2019 at 14:23

    Спасибо

  4. dyunior
    July 18, 2019 at 14:23

    Thanks great info:
    Just a note, the modern way to shallow copy Objects is to use spread operator. ( based on Airbnb Javascript style guide )

    https://github.com/airbnb/javascript#objects–rest-spread

  5. Vivek Mishra
    July 18, 2019 at 14:23

    thanks max, same happens in java

  6. Petrockspiracy
    July 18, 2019 at 14:23

    That was a fantastic explanation and use of example.

  7. Siddharth Chaudhary
    July 18, 2019 at 14:23

    Super clear! 🙂

  8. sidfor911truth
    July 18, 2019 at 14:23

    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.

  9. anythgofnthg
    July 18, 2019 at 14:23

    if you put name = 'Chris' above var secondName = name; , console.log(secondName) would output Chris. I don't see how there are two names in memory. Also, instead of the last line being console.log(secondName), if he'd have written console.log(name) the output would have been 'Chris' not 'Max'. It seems to me that the variable was reassigned in memory, not stored twice. Am I wrong here? Maybe I'm not understanding him correctly.

  10. Chinthana Gunasekara
    July 18, 2019 at 14:23

    Thaks for the valuable information

  11. Yuvakishore Dommaraju
    July 18, 2019 at 14:23

    we can use the following method for deepCopy var secondPerson = JSON.parse(JSON.stringify(person)) instead of using Lodash library

    var refpers = {
    'name': 'YUVA',
    'age': 25,
    'hobbies': ['playing', 'coding']
    }

    console.log(refpers);

    var deepCopy = JSON.parse(JSON.stringify(refpers));

    var shallowCopy = refpers;

    refpers.name = "yuvakishore";
    refpers.hobbies.push('roaming');

    console.log(deepCopy, shallowCopy, refpers);

  12. Sergiy Rudenko
    July 18, 2019 at 14:23

    You can learn c++ pointers to have better understanding of how it's linked in memory. c++ it's very good language to understand how memory work's.

    I used a lot this concept in 3d modeling for copying object or to make an instance(linked copy) of object.

  13. Mattia Rasulo
    July 18, 2019 at 14:23

    9:28, "it's not an ?" what is he saying?? "Ev or or"??

  14. Learn on hard way
    July 18, 2019 at 14:23

    So, since you are pushing a reference to the object/array on the stack, does that mean that reference is also a primitive? Why isn't it included in the primitive types?

  15. Xseeg info
    July 18, 2019 at 14:23

    best primitive and reference tutorial forever

  16. Mimoid
    July 18, 2019 at 14:23

    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 🙂

  17. bhrugu desai
    July 18, 2019 at 14:23

    very well explained.

  18. Daniel JS
    July 18, 2019 at 14:23

    Fantastic explanation of primitive vs referenced types!! Also, wonderful demonstration in JS bin! Keep up the good work!

  19. Hadyan Qashidi
    July 18, 2019 at 14:23

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

  20. Ігор Царенко
    July 18, 2019 at 14:23

    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

  21. Chai Park
    July 18, 2019 at 14:23

    Brilliant! Thank you so much for making the concept crytal clear!

  22. Aneesh Shukla
    July 18, 2019 at 14:23

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

  23. Paul Parton
    July 18, 2019 at 14:23

    A shorthand way to clone the object and its array with the spread operator

    const person3 = {
    …person2,
    hobbies: [
    …person2.hobbies
    ]
    }

  24. Monastic Culture Entertainment
    July 18, 2019 at 14:23

    Thanks, great explanation!!

  25. Nigel Hing
    July 18, 2019 at 14:23

    Just a silly question, but how do you record yourself  to show up on the right hand side of the screen? I've seen this technique a lot and I want to know how to do it too 🙂

  26. Vishal Yadav
    July 18, 2019 at 14:23

    Brilliant VDo…tysm 🙂

  27. AAYUSHI KAMBRIYA
    July 18, 2019 at 14:23

    THE BEST EXPLANATION EVER MAX !

  28. Deligiannis Giorgos
    July 18, 2019 at 14:23

    I L O V E Y O U ! ! ! <3

  29. Syed HaiDer
    July 18, 2019 at 14:23

    Great, Clear my confusion. Thanks a lot

  30. Dominique Fortin
    July 18, 2019 at 14:23

    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.

  31. Carl Smith
    July 18, 2019 at 14:23

    That was a long, rambling way of saying that some types (containers) are effectively mutable, and others (nulls, bools, numbers and strings) are effectively not. Talking about primitive and reference types (especially with new programmers) just makes a simple concept more difficult to understand.

  32. Felipe Farias
    July 18, 2019 at 14:23

    Meu cérebro ta fritando

  33. Ella Blun
    July 18, 2019 at 14:23

    sooo…. just one question. I was looking at how JS works, and got to an explanation how JSE (V8, spidermonkey and so on) have stack and heap. the points made about stack, were that it is what makes JS single threaded. there's only one stack, and that's it. secondly, stack needs to be empty, or should I stay emptied as fast as possible, or for example, page can't be refreshed as long as there's something on the stack. likewise, response from web api can't get onto stack, until stack is cleared.

    it said that heap stores values. I thought that that was all there is to it, cause I don't have a CS degree, so I had no idea how heap works. but now I started this course our government came up with, to help us transition to it, and we're learning C# (wasn't my first choice for backend, but I keep telling my self whatever, logic is same, just syntax is different, so I don't mind). however, she's been explaining how data is stored in C#, and when I realized that reference to the location in heap, has to be stored inside of a stack, I was baffled. either I'm misunderstanding something about JSE, or there are actually two stacks, and no one cared to point that out.

    any clarification on what is going on here?

  34. Arin Movsesian
    July 18, 2019 at 14:23

    perfect….

  35. Samir Ergaibi
    July 18, 2019 at 14:23

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

  36. sachithra dilshan
    July 18, 2019 at 14:23

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

  37. Antônio Valdenísio Bezerra Júnior
    July 18, 2019 at 14:23

    "var obj1 = JSON.parse(JSON.stringify(obj))" can copy to obj1 the entire object (obj) without using 3rd party lib.

  38. Amin Ansar
    July 18, 2019 at 14:23

    Great explanation. But why do objects have to be the reference types and why are the primitive types named primitive?What's the logic? I know the questions are a bit weird but they are just eating up my head 😛

  39. Ramiah viknesh
    July 18, 2019 at 14:23

    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.

  40. Joe Wong
    July 18, 2019 at 14:23

    great explanation max

  41. Христо Станков
    July 18, 2019 at 14:23

    Awasome. The best explanation!

  42. Sourish Dutta
    July 18, 2019 at 14:23

    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.

  43. utsav kumar
    July 18, 2019 at 14:23

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

  44. Dheeraj Mantena
    July 18, 2019 at 14:23

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

  45. Eman Finding
    July 18, 2019 at 14:23

    Pretty clear, Thanks Max!

  46. Eric Ellison
    July 18, 2019 at 14:23

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

  47. Roni Dey
    July 18, 2019 at 14:23

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

  48. ravi kumar
    July 18, 2019 at 14:23

    excellent explanation, thank you Max.

Leave A Comment

You must be logged in to post a comment.