Deep Copying vs Shallow Copying
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2018
- When trying to create copies of the values inside variables in JavaScript it is very important that you understand the difference between passing by value and passing by reference.
This video talks about the differences between deep and shallow copies and how you can force a deep copy.
If you are working with NodeJS keep in mind that the JSON method is the only native one currently available.
Code GIST: gist.github.com/prof3ssorSt3v...
Almost no one is explaining this topic this way.
About everyone else is making it more complex then it actually is.
Thank you so much.
Thank you soo much. This video actually helped alot .... You cleared so many doubts that other videos on shallow and deep copying were'nt able to do. Thanks again. Cheers !
So many thanks for this explaining. After 2 days of trying to get work my code I founded your video. Now I know what is my problem.
Awesome. I feel like I appreciate this as much as you would have hoped one does. ty.
Thank you for this clear explanation about shallow and deep copy. Only you can make this difficult concept accessible to everyone.
Very simple and to the point! Thank you sir!
Best explanation of deep / shallow copy. Many thanks Steve.
Great tutorial as always. Thank you very much Steve! : )
Well explained. Thank you 😊
I was struggling with this the whole day.
I was super excited to see you using 'Calcutta' as an example of a place. I live in Calcutta (currently known as Kolkata) 😀
Really good job explaining these. Thanks!
This is currently a tough concept for me to grasp. I'll have to come back and watch this video again.
Thank you! Its really clear explanation :)
Another very cool tutorial!
Thanks for the great examples! Awesome
Great Stuff and great teaching ... Thanks
great as always
Awesome video... You have explained very clearly. thankyou
Thanks a million, Great explanation. you cleared all my doubts.
thank it was exactly what i was looking for
A lot of great info in one video! thanks a lot!!
It would have been nicer to see that custom recursive function as well :)
If you do a search you can find lots of existing examples of the recursive copying.
i lost the whole day because of this problem, thanks a lot that you showed me how to solve it
You are the best!
Very good! thanks :D
Thanks. It finally clicked.
I was working on a custom function that deepcopies objects (functions, and arrays aswell) and every property/element down the tree recursively;
So far, it seems to work in all scenarios, but maybe I am missing something:
function deepCopy(object) {
let objCopy;
if (Array.isArray(object)) {
objCopy = [...object];
for (let i = 0; i < object.length; i++) {
if (typeof object[i] === 'object') {
objCopy[i] = deepCopy(object[i]);
}
}
} else if (typeof object === 'function'){
objCopy = object.bind();
} else if (typeof object === 'object'){
objCopy = {...object};
const keys = Object.keys(object);
for (let i = 0; i < keys.length; i++) {
if (typeof object[keys[i]] === 'object') {
objCopy[keys[i]] = deepCopy(object[keys[i]]);
}
}
} else {
objCopy = object;
}
return objCopy;
}
thank you sir
Bravo!
How spread operator, array.concat(), array.from & array.slice become shallow copy ? it won't change original array/object.can you please elaborate.
Shallow copying is just what JS does. If the contents of the array are primitive values then you get a new copy of the value. If the elements in the array are Objects then you just get references to those objects in the new array.
awesome...
When we deep copy objects using JSON.stringify and JSON.parse we lose our methods if we had, So what is right way of copying objects without losing methods or stuffs like that?
Any kind of copying with JSON or web workers or notifications only works for primitive datatypes. If you want to copy complex objects that include functions then you need to write your own custom recursive function to copy or consider making new objects and use the old one as the prototype.
Had that question popping up as I was going through the video. Steve's reply is on point, recursive usually has a reputation for being inefficient and there's no way to go around the issue. There's a library out there that handles the mess called "Lodash" that has a method called "copyDeep".
Does the immutable.js package make it easier to deal with these kinds of issues and copy methods also?
It is just the way the language works. So you need to understand it when you write your code.
I tried [ ] instead of { } for the Object.assign( [ ], (source). I don't think that is a shallow copy. Or am i just talking nonsense?
We can use jquery extend method for deep copy
You can write your own functions to do deep copy, or use Web Notifications, Web Workers, localStorage, or the JSON object to do deep copying. No need to use jQuery. Ever.
whats the difference between shallow and deep copy and assign by reference or value?
They are essentially the same idea but in javascript it all comes down to whether the variable holds a primitive or an object. All objects are referenced. All primitive pass their value. Doesn't matter how or where things are passed.
Not sure if I missed anything, but I dont think lodash deepclone is mentioned here. Very easy way to make deep clone.
I did not discuss any of the libraries that have methods to do the deep cloning. They do the recursive function calls to copy objects.
There is now a new structuredClone method built into JS. - th-cam.com/video/M3JO4qxTLH0/w-d-xo.html
Some additional info:
1. Be cautious while using the JSON method for deep copy. Objects like functions, dates, etc will be dropped, as JSON does not support these data types.
2. If you want a third-party solution for deep copy, look no further than lodash's cloneDeep() method. This method preserves all data types, and is the easiest method IMO.
lodash's cloneDeep method still only works for things that are structured clonable.
It is designed to work the same way as structured clonable works with JSON method or postMessage and the other built-in copy methods.