Copying Arrays (deep and shallow) - Beau teaches JavaScript
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- Shallow copy arrays using slice and the spread operator. Deep copy arrays using JSON.stringify.
🔗 Code: codepen.io/beau...
🐦 Beau Carnes on Twitter: / carnesbeau
⭐JavaScript Playlists⭐
▶JavaScript Basics: • JavaScript Basics Course
▶Data Structures and Algorithms: • Data Structures and Al...
▶Design Patterns: • Design Patterns - Beau...
▶ES6: • ES6 - Beau teaches Jav...
▶Clean Code: • Clean Code - Beau teac...
-
We're busy people who learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get great references with our open source community.
Join our community at freecodecamp.com
Read great tech articles at medium.freecod...
![[Gegagedigedagedago] NEW Help Gegagedigedagedago Nugget escape from Nikocado Avocado Challenge](http://i.ytimg.com/vi/hJWnwRC2Fz8/mqdefault.jpg)
I really like how you keep the video length short and relative to the topic at hand.
Yup, no extra jokes or introductory filler talk. Yet he manages to also get the best of both worlds by maintaining a friendly and accessible speaking pattern so it still seems fun.
You’re awesome. Thank you so much. I was having such an issue with a nested array. I couldn’t understand why it keep muting the original array. Thank you again and keep up the great work.
Beau is legit the fastest code typer in history.
I think it's fast forwarded haha.
@@CianaCorto it certainly is
Dude... I'm already loving you so much. I spent an hour racking my brains with this at work and now it's finally settled.
Beau this is the best explanation of shallow and deep copy I have seen, thanks alot!!
you just saved my life i was keep facing the issue for last couple of days...
Excellent job. I particularly appreciated the part about pointers and arrays & objects within arrays.
Unfortunately, it removes any functional property of the object.
Example:
const names = [
{ value: "name",
getName : function(){ return this.value }}
];
const names2 = JSON.parse(JSON.stringify(names));
names2[0].value = "modified";
names[0].getName()
names2[0].getName(); // this line will throw the error getName() isn't a function.
use the spread operator for copy
ex: let names2 = [...names];
names2[0] = {...names2[0], value: 'modified'};
this would work
DEEP COPY is incredible idea man !
This was so informative. Thanks a lot!
I don't know why I found it funny that the solution was simply to turn it into JSON and back into Javascript. The creativity of some people 👌
damn... finally found where is my bug thanks to this video... the way this thing work is completely absurd !
Huge thank you for that JSON tips
Is using JSON better in performance than manually copying each item for a deep copy?
Very helpful video with detailed explanation
In terms of performance, worth doing this conversions instead of a recursive deep copy function?
The way shown in the video is the fastest way according to this: stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript/5344074#5344074
Super and very simple way. Thanks
That was really helpful, was stuck with this
Thanx ❤️
Thank you so much!
That will not always work so as you want, if you have a property that points to a function or your working with Date object then you can't use JSON.Parse.......
Better use the spread operator.
The issue with deep copy example is that Jason stringify does not convert type functions
Thank you for the content.
what about using map()? i actually have an instance where i'm working with a nodelist of objects in the Dom.
@@eselse4651 map() creates the same problem with copying the pointer rather than the actual nested array.
let deepArray = [['freeCodeCamp']];
let deepCopy = deepArray.map(x => x);
deepCopy[0].push('is great');
console.log(deepArray,deepCopy);
result > [ [ 'freeCodeCamp', 'is great' ] ] [ [ 'freeCodeCamp', 'is great' ] ]
you don't need a 0 in original.slice(0) since 0 is the default
this is also an alternative: Array.from(original) But it's not supported by IE
Hi, should I learn from FCC if I'm interested in becoming an Android developer?
Not precisely since it doesn't directly teach Android development, but! It will teach you programming and web development, so you will learn fundamentals and beyond, so learning Android development should be easier then :)
It feels like very bad language design. Why don't all javascript objects have a copy method for this
When copying array of json data into new array using speard operator it's muting original data. Speard operator fails over here. I used to resolve this issue by using lodash 💪💪
Brilliant
deep copy can simply done like
const copyArray = [...originalArray];
THANK YOU
thank you
is that codepen you're using
Yup!
how to copy 2 arrays in to 1 array i have an exam thanks for help
I used this array to test:
let deepArray = [true, undefined, false, null, [‘freeCodeCamp’]];
JSON changed the undefined to null during the copy. But isn't best practice to define empty data as null rather than undefined? And you probably would be testing if the data was undefined before pushing it on to your array anyways. (Or at least you should be.)
var deepCopy = deepArray;
Can you explain me, please, why doesn't work this one?
Because you can't copy objects like that. When you declare an array/object like this "var arr_1 = [1,2,3]", arr_1 now points to a place in memory where the array is stored. So when you make arr_2 = arr_1 you basically named the same place in memory with two distinct names.
Because you would just create another pointer to the same object.
But even shallowCopy = deepCopy.slice(0) is also reference to same memory right ? that's why its changes made in deepcopy is reflected on shallowcopy too if i am not wrong ? Kindly correct me if so
genius!
5:47 you're a poet and you didn't know it.
his teaching is super confusing ...
your explanations really need some work. there has been a lack of clarity in at least half of your videos that i've watched so far
What exactly is unclear? I would definitely appreciate more specific criticism so I know what to work on. Thanks!
rubbish, both explanations and attitude are excellent.
best javascript videos I've seen. good reminder, refresher for anyone -)
next time i encounter the same feeling i'll be more specific.
i no englis speaker, but i understood wel