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
48 responses to “JavaScript – Reference vs Primitive Values/ Types”
I am completely enjoying Your Nde.js course
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
Спасибо
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
thanks max, same happens in java
That was a fantastic explanation and use of example.
Super clear! 🙂
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.
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.
Thaks for the valuable information
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);
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.
9:28, "it's not an ?" what is he saying?? "Ev or or"??
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?
best primitive and reference tutorial forever
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 🙂
very well explained.
Fantastic explanation of primitive vs referenced types!! Also, wonderful demonstration in JS bin! Keep up the good work!
Thanks man, your explanation has saved me from hours of headache.
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
Brilliant! Thank you so much for making the concept crytal clear!
Thank you so much for this video. It was explained so well. I don’t think I’ll ever get confused between the two.
A shorthand way to clone the object and its array with the spread operator
const person3 = {
…person2,
hobbies: [
…person2.hobbies
]
}
Thanks, great explanation!!
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 🙂
Brilliant VDo…tysm 🙂
THE BEST EXPLANATION EVER MAX !
I L O V E Y O U ! ! ! <3
Great, Clear my confusion. Thanks a lot
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.
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.
Meu cérebro ta fritando
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?
perfect….
Thank you for this visual explanation, really made me understand. The pictures of the Stack and Heap sure helped as well ! 🙂
it is a one of best explanation sir.you have well planned the example and content.keep doing.
"var obj1 = JSON.parse(JSON.stringify(obj))" can copy to obj1 the entire object (obj) without using 3rd party lib.
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 😛
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.
great explanation max
Awasome. The best explanation!
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.
Good that you covered the subject with Stack and heap explanation. Thanks Max 🙂
Object.assign({},deepMind.Slice());
Superb in depth explanation You are the best for ever max .
Thanks again
Pretty clear, Thanks Max!
Holy shit max , you are amazing , i was confused about heap and stack for months , you are my man …..
Thank you so much… Nobody could explain it better than this😊
excellent explanation, thank you Max.