Destructuring in ES6 - Beau teaches JavaScript
Destructuring assignment is special syntax for neatly assigning values taken directly from objects and arrays to variables. This is a new feature in JavaScript ES6.
💻 Code: codepen.io/beaucarnes/pen/PpvQ...
🔗 Resource: developer.mozilla.org/en-US/d...
🐦 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.freecodecamp.com
Пікірлер: 102
nice. fast, clear and no bs
@JEBJOSH
4 жыл бұрын
for real
Every time I need a well organized, concise, and well-explaned concept, I come to you! Beau, you are the best!
I was wondering if there was an easy way to do this just this morning! I really appreciate these videos and I hope you keep doing them!
Quick and straight to the point, thank you. Your explanation is crystal clear and now variables surrounded by curly brackets make sense to me.
This really helped me understand destructuring and carve it into my JS notes. Thank you Beau!
I could never get my head around destructuring. This video totally helps me out. Thanks for the explanation.
Mind blown for destructuring in the params. Thanks!
Thanks so much. I was struggling with this, but you've explained it very well!
This is a very good tutorial. Simple, fast, effective. Thanks a bunch
Beautiful simple and effective tutorial.
Mind blown. Been seeing the syntax for a while now in React code, now it all makes sense!
@RandomGuy-hh4dk
4 жыл бұрын
@@thorn4512 Everyone says Vue is the best but I don't know why React is still dominating the market.
Best explanation of de structuring possible
Thank you for the material and very useful example😊🙏🏼
That moment when a programming video makes you feel like a goldfish, going "oooh".
Beau, your explanation is Beautiful!
Great tutorial mate, thank you!!
Here is the answer to ES6: Use Destructuring Assignment to Assign Variables from Objects took me a while to grasp this. I think the hardest part is understanding that in the code below, len becomes, str.length. it makes sense in the video examples but when applying it to a real use case it's kind of tricky. Hopefully this helps somebody. This took me about a half hour for it to click. Knowledge is power! I am proud of myself LOL. function getLength(str) { "use strict"; // change code below this line const {length: len} = str; // change code above this line return len; // you must assign length to len in line } console.log(getLength('FreeCodeCamp')); // 12
@johhnybarendrecht5259
5 жыл бұрын
Hey thanks! I still don't understand why **const {length: len} = str;** turns len into str.length. .. The output to me looks more like **len = str** and just returns the string unchanged, for that I was not even thinking about this solution. But thanks for sharing at least I know in what direction I need to think (Y)
@freddygl3
5 жыл бұрын
I think the explanation is that it takes the str object-string and deconstruct the propertie lenght to the variable len
Amazing stuff. Thank you Sensei
Very good explanation. Thank you.
This video is very helpful for me to understand the magic syntax of javascript.
Nice explanation, thank you ☺️
Clear and on to the point explanation.BTW the thumbnail😄
almost feels like magic, these new programming updates and features.
Thank you Beau!!
When you are passing the object as paratemer at 5:10 , how do you know which object is passed?
Thank you very much!
WOW...you are awesome....I truly mean that!!!
Thank you. Nice clear explanation, but would be nice if you include syntax for default values?
awesome. thanks!
Best explanation ever
KZread needs a feature to like a video twice! Just like how it is on Codepen.
Excellent on teaching Destructuring. It is concise and easy to understand.
thank you very much
you are just awesome .....love from India
destructuring is lit
This is a really helpful video. My thanks. But I have a question. How does this work when there are two objects with different names, different values, but the exact same keys?
This is so fucking amazing
With the last example of passing an object as a function's parameter, is the function's name "profileUpdate" or is that the Object's name that we are using in the destructuring parameters? If not what would be the syntax to use the Objects name or is it unecessary?
@ashc5684
5 жыл бұрын
profileUpdate is the name of the function, not the object. the objects name is profileData
Hey Bau, which code editor you use??
Which editor r u using? I see many hv asked this !
G.O.A.T Content ty
Are you naturally typing this fast? Or is that portion sped up for the video? I have been trying to speed up and become more efficient at typing code.
Question: Where does these destructed values exist? In your example, at 1:14 "voxel" values 'a', 'b', and 'c' exist where now after they are assigned? They are not on the object (voxel.a). They are not on the BOM (window.a). So where are these new values now being stored in the browser? Hope that is clear. I have been trying to find that answer for a day or so now when it comes to destructing,
@freecodecamp
6 жыл бұрын
After assigning to 'a', 'b', and 'c', they are just standard const variables. They are stored just like any variable. You access them like any other variable using their name, which in this case are the letters 'a', 'b', and 'c'. Does that answer your question?
this is often called "unboxing" in other languages eg. C#.NET
when i do console.log(x) i get undefined, in console or in vscode
Thanks men
I don't quite get how in the last example the computer knows which object it is taking the values from, like what If I have 2 objects that have parameters with the same name, or should I use this syntaxis only when 1 of the objects can match? const profileUpdate = ({ name, age, nationality, location }) => { }
What editor is this? CodePen?
@lalaithan
5 жыл бұрын
Yes, there's a link to the pen in the desc.
ty
I'm still confused about how "Pass an Object as a Function's Parameters" works. If I have two objects that contain the same properties name but different values, then I pass the variable names into a function, how does js know which object I'm actually looking at?
@Jdb63
4 жыл бұрын
That's exactly what I'm confused about. No one has been able to give me an answer yet?
@SirLovePeach
2 жыл бұрын
when calling you give the object name as an argument
@kristynasodomkova7589
Жыл бұрын
@@SirLovePeach AHA! I couldn't understand it, thank you so much!!!!
cant print console.log(x), looking for answers all over, stringify, util functions nothing works, anyone?
Awesome tut! But, the thumbnail is a bit funny.
this video deserve more attention-seeking title !!!
that was usefull
There might be an error at 5:10 -- It doesn't say how it knows which object it should deconstruct and didn't work when I ran the code. After some tries, I came up with this: let str = {greet:"Hello", name:"Gollom"} // specify the object in the function parameter const friendlybot = ( {greet, name} = str ) => greet + ", my name is " + name >> friendlybot() // outputs 'Hello, my name is Gollom'
@oufcena5092
4 жыл бұрын
const defaultObj = {greet:"Hello", name:"Gollom"}; const friendlybot = ( {greet, name} = defaultObj ) => alert(greet + ", my name is " + name); const myObj = {greet:"Bonjour", name:"..."}; friendlybot(myObj);
what's that font?
Use your code for good
danke
4:46 I don't understand when you would ever be able to pass anything into profileUpdate since it is a variable and not a function. Can somebody explain this to me?
@salmon.hanif9000
4 жыл бұрын
profileUpdate is a function, not a variable. It's called an arrow function.
@Jdb63
4 жыл бұрын
@@salmon.hanif9000 So how would I call that function and pass a parameter?
@salmon.hanif9000
4 жыл бұрын
@@Jdb63 just like any function you call in Javascript.
@Jdb63
4 жыл бұрын
@@salmon.hanif9000 Even if the function is declared as a const?
@salmon.hanif9000
4 жыл бұрын
@@Jdb63 yes. I think you haven't read the documentations for es6
Thumbnail thought 😆😁
Found this: let array = [0,1,2,3,4,5]; [array[0], array[3]] = [array[3], array[0]] array; // [3,1,2,0,4,5] Why?
the whole concept is still confusing to me unfortunately, will try and look for other resources to understand this better. Must be me though since people in the comments seem to suggest they understood it based on this video ;(
you make it more complex using same key value names
@WeirdStuffaaaa
2 жыл бұрын
now i understand this because I had watch the tutorial from other channels :)
i can't get it because the course is not organized i go to much tutorials and they all speaks about things haven't seen clearly in the course for example you ask someone about spread operator while he need to know others stuff which you think already we know i think the course need more simplicity and videos with solution to know exactly and clearly what does this means
What is his name again?
Hi, tested this example. const profileData = { name: 'Morgana', age: 22, nationality: 'Brazilian', address: 'Rua Monsenhor Dourado, N° 25' }; const profileUpdate = ({ name, age } = profileData ) => { console.log(name + 'and' + age); // const { name, age, nationality, location } = profileData; // do something with these variables } profileUpdate();
It's fairly confusing. I think I understand it a little better, but I'm having trouble wrapping my head around it.
Great video, but a bit fast imo
You are a god
come here, got what i look for, like, comment, bye.
You sound a bit like John Malkovich...
Your ide name pls
Test
Homie is still using var
Always remember we must repent of our sins (sin is transgression The Law Of Yahuah The Father in Heaven. The Law are The Books: Genesis, Exodus, Leviticus, Numbers, & Deuteronomy). We must repent of our sins and Have Belief On Yahusha The Messiah. HE Died and Rose three days later so that we can be forgiven of our sins! Come to HIM🙂🙂🙂🙂🙂🙂🙂🙂
Is it just me or does this guy sort of sounds like Jerry Seinfeld?
That was disgusting.
When you are passing the object as paratemer at 5:10 , how do you know which object is passed?
@kozie928
4 жыл бұрын
I think it should've been: "const profileUpdate = ({name, age, nationality, location} = nameOfTheObject) => { //... }
@MrBlastZone3000
4 жыл бұрын
When you call the function then you pass the object you want to use in the function. Here he was just setting up the function and not using it.
@oufcena5092
4 жыл бұрын
@@MrBlastZone3000 You're right!