The JavaScript Spread Operator - One Thing You DIDN'T KNOW!
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2021
- Did you really understand how the spread operator works in JavaScript? It's great for making copies of shallow objects and arrays, but can it be used to make a deep clone?
Spread Syntax Docs - developer.mozilla.org/en-US/d...
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquick.com
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquick.com/courses/r...
Learn everything you need to know about Visual Studio Code - www.udemy.com/learn-visual-st...
Build a Quiz App - www.udemy.com/build-a-quiz-ap...
2 days ago I spent 6 hours trying to figure out why some code wasn't working, only to discover this little catch with the spread operator. I'm sure this video will save developers many hours!
So glad you think it will be helpful!
Could you share the context? I am seeking some real examples for this problem. Happy hacking, bro!
I hate clicking dislike on videos of creators trying to share tidbits with the learning public. But I hate more the padding, spending a minute telling me to guess what I don't know, many minutes setting up a scenario, then finally punching in something I yes most definitely did know and is not rare knowledge to most that have completed introductory reading on the topic. There has to be a better way.
I promise if you just tell us what you're going to teach from the gate, we'll still watch
Dude love all your vids I’m a full stack dev w/a passion for front-end, and I can tell you that you never stop learning. So watching your stuff is always a good refresher/new point of view on coding I love it keep turning out the content man! All the best 💯
Thanks so much :)
Another great video - I knew about this, but really enjoyed how you explained it.
Pointers in Javascript - good vid.
For everyone whom might be unfamiliar with pointers: a reference is a pointer sans confusing jargon.
Can't get over the fact that this video is so awesome; excellent discussion.
which vs code theme do you use??
Great job - really cleared me up.
Learning something new every day great content 👍👍
Please can you share what is the settings that you use , its very cool that on the right next to the array when you mark it you can see the result
Thank you for your analysis, very detailed。
Glad you enjoyed it!
Really enjoyed that video bro
Hi James, I noticed that your vscode showed runtime value at the end of every line, could you please tell me how to do that?
This reminds me of dealing with pointers in C++ class when my professor at OIT wanted to make sure we understood pass by reference...he gave us four star pointers to work with as a project. Needless to say, pass by reference is no longer a problem. lol
Thanks James
I'd love to see deep copying be standardized in the language soon enough
Good tip that makes sense
Any other ways to clone the multi level objects??
When i use json.parse/stringfy functions inside the objects are missing...
Can anyone tell best way to clone?
Use lodash.
How do you get auto suggestions while writing code in Vscode .
I just use the built in intellisense. If I'm working in a JavaScript file, it gives the recommendations.
Yey! I am in for the JS challenges 🦄
Nice video. Can you also do a video on Symbol and its uses in Javascript? Thanks...
Got to know about this the tough way when i just started working as a web developer, i assumed spread op make a true copy and had to deal with a very frustrating debug session 😭
Yep. I've seen lots of people make this mistake which is why I did the video :)
I am having a problem in HTML .
Image is not showing/loading in Browser
(Firefox) when html file is opened.
I want image as background.
My html file is in folder in D: drive and my image is in F: drive. I am using VS CODE
(system setup).
Can anyone solve this problem
@@user-vl6xf7mp6m Is there any way to use different drives for webspace?
deep copy - shallow copy if we use the right terms
Did I not say that?
JS is easy for 2 people. One who knows JS actually & other one who just know JS is easy. 😂
if you are javascript developer :D
just learnt ... now i know main takeaway about this
Hmmm good info.
I just understood a bug that I faced a few days ago
Great video 🆒
So I will be the 3rd who asks the same question. What vs theme do you use? So will you answer now?
Which vscode theme are you using I like it can you mention name
Uh, JS doesn't copy an array if you'd do:
names = ['James', 'Jess', 'Lily', 'Sevi'];
copyNames = names;
?
It's just pointing to 'names'?
Or did you just use that to explain how it works?
You forgot the spread part. Your example is not same as in the video.
@@kristofferjohansson3768 I think you didn't expand the comment 🤔
I asked if this is isn't copying an array (and pointing to it instead)
Torrent, I missed your intention. Yes b[]…a[] creates a pointer. Only basic types are copied in JS.
@@kristofferjohansson3768 I just tried it in a console (I wrote the other comments on a phone).
Damn, didn't know that. Weird that I didn't trip over this already.
names = ['James', 'Jess', 'Lily', 'Sevi'];
copyNames = names;
copyNames[0] = 'Billy'
copyNames
> (4) ["Billy", "Jess", "Lily", "Sevi"]
names
> (4) ["Billy", "Jess", "Lily", "Sevi"]
wakka quokka
Yeah like it's kinda why it's called a spread operator, not a deep-copy operator. Funny, the thought this behavior could cause issue to someone never crossed my mind.
Well, I've seen it cause many problems for many people. Hence, the video
I love javascript
+++
Same as with python.
//THANKS FOR THE VIDEO SIR..
//WHY DOES IT NOT WORK SIR... THE WAY I WANT SIR?..😢😢
var marks={'ENGLISH':'','MATHEMATICS':'','CHEMISTRY':'','BIOLOGY':'','PHYSICS':'','GEOGRAPHY':'','HISTORY':''}
function enter(_subjectt, maks){
let makss={...marks, _subjectt:maks}
console.log(makss)
}
enter('ENGLISH','34')
The code hints that keep popping up... it’s just way too much.
Fantastic video
Thank you so much!