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

  • @orifl6653
    @orifl66535 жыл бұрын

    nice. fast, clear and no bs

  • @JEBJOSH

    @JEBJOSH

    4 жыл бұрын

    for real

  • @gustavodias7767
    @gustavodias77673 жыл бұрын

    Every time I need a well organized, concise, and well-explaned concept, I come to you! Beau, you are the best!

  • @ChristopherMcCormack
    @ChristopherMcCormack7 жыл бұрын

    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!

  • @Ethorbit
    @Ethorbit4 жыл бұрын

    Quick and straight to the point, thank you. Your explanation is crystal clear and now variables surrounded by curly brackets make sense to me.

  • @bigj3508
    @bigj35085 жыл бұрын

    This really helped me understand destructuring and carve it into my JS notes. Thank you Beau!

  • @takethefirststepsem
    @takethefirststepsem5 жыл бұрын

    I could never get my head around destructuring. This video totally helps me out. Thanks for the explanation.

  • @Adam-tv9mp
    @Adam-tv9mp5 жыл бұрын

    Mind blown for destructuring in the params. Thanks!

  • @Karl-bv6gg
    @Karl-bv6gg5 жыл бұрын

    Thanks so much. I was struggling with this, but you've explained it very well!

  • @eleven11thel
    @eleven11thel Жыл бұрын

    This is a very good tutorial. Simple, fast, effective. Thanks a bunch

  • @milkdrom3da
    @milkdrom3da2 жыл бұрын

    Beautiful simple and effective tutorial.

  • @ceozanarkand
    @ceozanarkand6 жыл бұрын

    Mind blown. Been seeing the syntax for a while now in React code, now it all makes sense!

  • @RandomGuy-hh4dk

    @RandomGuy-hh4dk

    4 жыл бұрын

    @@thorn4512 Everyone says Vue is the best but I don't know why React is still dominating the market.

  • @kaustubhmaladkar869
    @kaustubhmaladkar8692 жыл бұрын

    Best explanation of de structuring possible

  • @romankorniienko2388
    @romankorniienko23884 жыл бұрын

    Thank you for the material and very useful example😊🙏🏼

  • @lalaithan
    @lalaithan5 жыл бұрын

    That moment when a programming video makes you feel like a goldfish, going "oooh".

  • @pprakash_das
    @pprakash_das3 жыл бұрын

    Beau, your explanation is Beautiful!

  • @snowyalbino130
    @snowyalbino1304 жыл бұрын

    Great tutorial mate, thank you!!

  • @DaObvious1
    @DaObvious16 жыл бұрын

    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

    @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

    @freddygl3

    5 жыл бұрын

    I think the explanation is that it takes the str object-string and deconstruct the propertie lenght to the variable len

  • @adajatobi3258
    @adajatobi32583 жыл бұрын

    Amazing stuff. Thank you Sensei

  • @clienth
    @clienth Жыл бұрын

    Very good explanation. Thank you.

  • @andrew_1204
    @andrew_12044 жыл бұрын

    This video is very helpful for me to understand the magic syntax of javascript.

  • @shilpasyal55
    @shilpasyal555 жыл бұрын

    Nice explanation, thank you ☺️

  • @_MAHFUJHOSSAIN
    @_MAHFUJHOSSAIN3 жыл бұрын

    Clear and on to the point explanation.BTW the thumbnail😄

  • @chhavimanichoubey9437
    @chhavimanichoubey94372 жыл бұрын

    almost feels like magic, these new programming updates and features.

  • @johnyepthomi892
    @johnyepthomi8922 жыл бұрын

    Thank you Beau!!

  • @4631marr
    @4631marr5 жыл бұрын

    When you are passing the object as paratemer at 5:10 , how do you know which object is passed?

  • @jasperklingen6964
    @jasperklingen69643 жыл бұрын

    Thank you very much!

  • @amycross5430
    @amycross54303 жыл бұрын

    WOW...you are awesome....I truly mean that!!!

  • @Ed-kq9nu
    @Ed-kq9nu4 жыл бұрын

    Thank you. Nice clear explanation, but would be nice if you include syntax for default values?

  • @mugiwara-no-luffy
    @mugiwara-no-luffy2 жыл бұрын

    awesome. thanks!

  • @Steven-wo9bm
    @Steven-wo9bm3 жыл бұрын

    Best explanation ever

  • @zoecarlibur
    @zoecarlibur4 жыл бұрын

    KZread needs a feature to like a video twice! Just like how it is on Codepen.

  • @goodwish1543
    @goodwish15436 жыл бұрын

    Excellent on teaching Destructuring. It is concise and easy to understand.

  • @IncolasCopperfield
    @IncolasCopperfield5 жыл бұрын

    thank you very much

  • @ashishkushwaha1167
    @ashishkushwaha11674 жыл бұрын

    you are just awesome .....love from India

  • @nickhart8062
    @nickhart80625 жыл бұрын

    destructuring is lit

  • @moderncloth682
    @moderncloth6823 жыл бұрын

    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?

  • @IIlllllIIIllllIIIlIllI
    @IIlllllIIIllllIIIlIllI5 жыл бұрын

    This is so fucking amazing

  • @michellecorbett5150
    @michellecorbett51505 жыл бұрын

    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

    @ashc5684

    5 жыл бұрын

    profileUpdate is the name of the function, not the object. the objects name is profileData

  • @informationgiant7697
    @informationgiant76973 жыл бұрын

    Hey Bau, which code editor you use??

  • @parthibann7172
    @parthibann71725 жыл бұрын

    Which editor r u using? I see many hv asked this !

  • @hnyuhiv
    @hnyuhiv Жыл бұрын

    G.O.A.T Content ty

  • @xenoaurora
    @xenoaurora5 жыл бұрын

    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.

  • @danielchambers6990
    @danielchambers69906 жыл бұрын

    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

    @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?

  • @dogcow666
    @dogcow6666 жыл бұрын

    this is often called "unboxing" in other languages eg. C#.NET

  • @danielnoy6600
    @danielnoy660011 ай бұрын

    when i do console.log(x) i get undefined, in console or in vscode

  • @saoudahmedkhan2549
    @saoudahmedkhan25493 жыл бұрын

    Thanks men

  • @pancutirimicuaro
    @pancutirimicuaro2 жыл бұрын

    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 }) => { }

  • @MrPDTaylor
    @MrPDTaylor5 жыл бұрын

    What editor is this? CodePen?

  • @lalaithan

    @lalaithan

    5 жыл бұрын

    Yes, there's a link to the pen in the desc.

  • @ArmandoPineda4
    @ArmandoPineda47 ай бұрын

    ty

  • @daphne668
    @daphne6685 жыл бұрын

    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

    @Jdb63

    4 жыл бұрын

    That's exactly what I'm confused about. No one has been able to give me an answer yet?

  • @SirLovePeach

    @SirLovePeach

    2 жыл бұрын

    when calling you give the object name as an argument

  • @kristynasodomkova7589

    @kristynasodomkova7589

    Жыл бұрын

    @@SirLovePeach AHA! I couldn't understand it, thank you so much!!!!

  • @danielnoy6600
    @danielnoy660011 ай бұрын

    cant print console.log(x), looking for answers all over, stringify, util functions nothing works, anyone?

  • @hemanthkotagiri8865
    @hemanthkotagiri88653 жыл бұрын

    Awesome tut! But, the thumbnail is a bit funny.

  • @pravinpoudel782
    @pravinpoudel7824 жыл бұрын

    this video deserve more attention-seeking title !!!

  • @khadijaouakkaha8271
    @khadijaouakkaha82712 жыл бұрын

    that was usefull

  • @ijeomaoguegbu9576
    @ijeomaoguegbu95764 жыл бұрын

    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

    @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);

  • @cimota27
    @cimota27 Жыл бұрын

    what's that font?

  • @sillanrakentaja
    @sillanrakentaja6 жыл бұрын

    Use your code for good

  • @aaronargottelopez3488
    @aaronargottelopez34884 жыл бұрын

    danke

  • @Jdb63
    @Jdb634 жыл бұрын

    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

    @salmon.hanif9000

    4 жыл бұрын

    profileUpdate is a function, not a variable. It's called an arrow function.

  • @Jdb63

    @Jdb63

    4 жыл бұрын

    @@salmon.hanif9000 So how would I call that function and pass a parameter?

  • @salmon.hanif9000

    @salmon.hanif9000

    4 жыл бұрын

    @@Jdb63 just like any function you call in Javascript.

  • @Jdb63

    @Jdb63

    4 жыл бұрын

    @@salmon.hanif9000 Even if the function is declared as a const?

  • @salmon.hanif9000

    @salmon.hanif9000

    4 жыл бұрын

    @@Jdb63 yes. I think you haven't read the documentations for es6

  • @vitalino1981
    @vitalino19813 жыл бұрын

    Thumbnail thought 😆😁

  • @BHFJohnny
    @BHFJohnny3 жыл бұрын

    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?

  • @troyhackney148
    @troyhackney14811 ай бұрын

    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 ;(

  • @WeirdStuffaaaa
    @WeirdStuffaaaa2 жыл бұрын

    you make it more complex using same key value names

  • @WeirdStuffaaaa

    @WeirdStuffaaaa

    2 жыл бұрын

    now i understand this because I had watch the tutorial from other channels :)

  • @artd3d680
    @artd3d6802 жыл бұрын

    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

  • @heavydirtysoul1491
    @heavydirtysoul14913 жыл бұрын

    What is his name again?

  • @dev_morgana
    @dev_morgana4 жыл бұрын

    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();

  • @adamWeiler
    @adamWeiler5 жыл бұрын

    It's fairly confusing. I think I understand it a little better, but I'm having trouble wrapping my head around it.

  • @himbary
    @himbary4 жыл бұрын

    Great video, but a bit fast imo

  • @nickschmitt8594
    @nickschmitt85945 жыл бұрын

    You are a god

  • @gregfrllo
    @gregfrllo4 жыл бұрын

    come here, got what i look for, like, comment, bye.

  • @rvalenta4
    @rvalenta45 жыл бұрын

    You sound a bit like John Malkovich...

  • @starelite6332
    @starelite63323 жыл бұрын

    Your ide name pls

  • @abdelrahmanhafez990
    @abdelrahmanhafez9906 жыл бұрын

    Test

  • @littlerogue4788
    @littlerogue47882 жыл бұрын

    Homie is still using var

  • @ReyBanYAHUAH
    @ReyBanYAHUAH2 жыл бұрын

    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🙂🙂🙂🙂🙂🙂🙂🙂

  • @joselmedrano
    @joselmedrano3 жыл бұрын

    Is it just me or does this guy sort of sounds like Jerry Seinfeld?

  • @yecril71pl
    @yecril71pl6 жыл бұрын

    That was disgusting.

  • @NarePoghosyan
    @NarePoghosyan5 жыл бұрын

    When you are passing the object as paratemer at 5:10 , how do you know which object is passed?

  • @kozie928

    @kozie928

    4 жыл бұрын

    I think it should've been: "const profileUpdate = ({name, age, nationality, location} = nameOfTheObject) => { //... }

  • @MrBlastZone3000

    @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

    @oufcena5092

    4 жыл бұрын

    @@MrBlastZone3000 You're right!