JavaScript Cloning an Object

JavaScript: Cloning an Object
🔥Get the COMPLETE course (83% OFF - LIMITED TIME ONLY): bit.ly/2M1sp4B
Subscribe for more videos:
/ @programmingwithmosh
Want to learn more from me? Check out my blog and courses:
programmingwithmosh.com
/ programmingwithmosh
/ moshhamedani

[@jitenanand9535]

Nice and clean with clear visible font size and without any intro music.
Perfect way to make coding tutorial videos.

[@alessandroporfirio1910]

Beautiful syntax! Thank you for showing that!

[@lalit422]

Hi Mosh... Both Object.assign and spread operator work fine for single level object like circle but what about multi level object like var obj= { a :1,b: { c:2,d:3 },e:4}. I think it will not work for multi level object. Am i right?

[@zehahaha2899]

const another = JSON.parse( JSON.stringify(circle) )

[@medachrefabdelbari]

Man your the best , keep up the good work.

[@husamk3207]

thanks very much you are brilliant ..i hope you do an advance d js tutorials

[@sayyedaaman5719]

Thank you sir for that video It's very helpful for us

[@RajYadav-yh7vv]

where is deep cloning?shallow copy and deep copy?

[@karthiksridharan1282]

Wow. You are genious

[@vishnuvirat2501]

Great.....bro 🔥🔥🔥

[@ivss8927]

if someone wants to make an dinamic object from a form using express (o well, this is just basic js xD) use something like this:
const obj = JSON.parse(JSON.stringify(req.body));
let objectToUpdate = {}

for (let field in obj) {
if (obj[field] !== ''){
objectToUpdate[field] = obj[field]
}
}

[@ivss8927]

I had a little trouble doing this cause i am stupid XD Thanks mosh for just exist in this world ❤

[@devthings2220]

hi Mosh - how can we use Object.assign to clone and merge objects with the *same property name* without getting them overwritten?

[@AtomWR1]

In this video we see the shallow copy, what you want to do is called deep copy!! On CZcams there are a lot of videos

[@shattereddnb3268]

This seems to only make a reference to the original. What if I need to make an actual copy of an object, so that I can change the copy without changing the original?

[@Vlad19th]

How to clone an image object into array slots?

[@FredoCorleone]

You can use factory functions and Object.assign() to make beautiful compositions between objects!
Composition is far more superior than inheritance.
Another method to copy things in JS is to use JSON.parse( JSON.stringify( myObject ) )

[@kaziupir]

This is probably the best way to copy all objects, because it does copy "deep" objects

[@protonelectron7714]

can you tell me the source where i can learn about this ?

[@giulioambrogi5413]

@@kaziupir it is not, it breaks with functions and circular references

[@emreozgun3846]

@@giulioambrogi5413 what's the best way to deep clone in your opinion ?

[@swastikpatro6436]

@@emreozgun3846
//Deep clone a object
const test = {
past: [{day:31}, {month:12}, {year:2020}],
present: [{day:1}, {month:6}, {year:2021}]
}
function deepClone(input) {
let result = Array.isArray(input) ? [] : {};
if(typeof(input) !== 'object') {
return input;
}
for(const key in input) {
//console.log(input[key])
result[key] = deepClone(input[key])
}
return result;
}
console.log(deepClone(test));

[@donnifan5685]

what about deep cloning an object

[@jaroslawkret]

Exactly, the showed methods do not cover deep cloning at all

[@ZeihanFan]

For convenience (sacrificing some speed for simplicity), or an unknown object structure, the most efficient way is by doing the following:
let clonedObject = JSON.parse(JSON.stringify(originalObject))
If your object contains Date() objects as values, they will be converted into ISO strings. If your object contains functions as values, they will be removed. In either of these cases, you will want to use a different solution, or to simply manually re-attach these values after the clone if you know the structure.
For speed, assuming you know the object structure, the most efficient way by far is doing the following:
let clonedObject = {
knownProp: originalObject.knownProp,
..
};
This of course can get large and tedious, but in terms of performance is very fast. I hope this helped.

[@iben1195]

Define your original object in a function and return it. Each time that function is called, your object will be redeclared and initialised, thereby creating new reference.
E.g
Function objSkeleton(){
return {
Name: "default Name",
Age: "default Age",
Friends: [
{name: "friend's name", age: "friend's age"},
{name: "friend's name", age: "friend's age"}
]
}
}
Const ben = objSkeleton();
ben.name = "Ben";
ben.friends[0].name = "Kyle";
Const doe = objSkeleton();
doe.name = "Doe";
doe.age = 30;
console.log(ben);
console.log(doe);

[@easy-stuffs]

it's just copy the property right? The main objective is to deep clone and copy prototype.

[@alekseyr8372]

shown methods create a shallow copies, not deep ones

[@NewtonIsLive]

why not const another=circle; ??????????

[@amanwadte1495]

its not working
const circle = {
radius: 1,
draw() {
console.log('draw');
}
};
const another = ( ...circle );
console.log(another);
Output:
Uncaught SyntaxError: Unexpected token '...'

[@paddy9609]

Not even one word about shallow copy and deep copy...................................

[@DrErnst]

this seems like it could be simplified why is the syntax of coding so unessesary complicated? also what is an object and why would you want to copy it.. if you make it basic tutorial remember that you can ofthen be even more basic .. imagine your audience is a group of 10 year olds..

[@codewithbishal895]

lol me
let a = { }
let b= { ...a}

[@emreozgun3846]

this is shallow copy!

[@tomislavzivkovic3978]

Bad, bad!!! What if object contains another object??? This video makes you think that entire object is cloned. Well, only the first level. Other levels are still references.

[@zakariaealami3135]

i don't understand nothing in this video ,you going so fast in this one , i see him hard and less useful in project