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 !
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; }
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.
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.
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".
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. - ua-cam.com/video/M3JO4qxTLH0/v-deo.html
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.
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.
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.
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.
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 !
Thank you for this clear explanation about shallow and deep copy. Only you can make this difficult concept accessible to everyone.
I was super excited to see you using 'Calcutta' as an example of a place. I live in Calcutta (currently known as Kolkata) 😀
Best explanation of deep / shallow copy. Many thanks Steve.
Awesome. I feel like I appreciate this as much as you would have hoped one does. ty.
Well explained. Thank you 😊
I was struggling with this the whole day.
Very simple and to the point! Thank you sir!
This is currently a tough concept for me to grasp. I'll have to come back and watch this video again.
Great tutorial as always. Thank you very much Steve! : )
Thanks a million, Great explanation. you cleared all my doubts.
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
Really good job explaining these. Thanks!
Great Stuff and great teaching ... Thanks
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;
}
Awesome video... You have explained very clearly. thankyou
Thanks for the great examples! Awesome
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.
Thank you! Its really clear explanation :)
Another very cool tutorial!
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.
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.
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".
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. - ua-cam.com/video/M3JO4qxTLH0/v-deo.html
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.
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.
I tried [ ] instead of { } for the Object.assign( [ ], (source). I don't think that is a shallow copy. Or am i just talking nonsense?
thank it was exactly what i was looking for
great as always
Thanks. It finally clicked.
You are the best!
Very good! thanks :D
thank you sir
awesome...
Bravo!