JavaScript DESTRUCTURING in 8 minutes! 💥

[@BroCodez]

// destructuring = extract values from arrays and objects,
// then assign them to variables in a convenient way
// [] = to perform array destructuring
// {} = to perform object destructuring
// ---------- EXAMPLE 1 ----------
// SWAP THE VALUE OF TWO VARIABLES
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a);
console.log(b);
// ---------- EXAMPLE 2 ----------
// SWAP 2 ELEMENTS IN AN ARRAY
const colors = ['red', 'green', 'blue', 'black', 'white'];
[colors[0], colors[4]] = [colors[4], colors[0]]
console.log(colors);
// ---------- EXAMPLE 3 ----------
// ASSIGN ARRAY ELEMENTS TO VARIABLES
const [firstColor, secondColor, thirdColor, ...extraColors] = colors;
console.log(firstColor);
console.log(secondColor);
console.log(thirdColor);
console.log(extraColors);
// ---------- EXAMPLE 4 ----------
// EXTRACT VALUES FROM OBJECTS
const person1 = {
firstName: 'Spongebob',
lastName: 'Squarepants',
age: 30,
job: "Fry cook",
};
const person2 = {
firstName: 'Patrick',
lastName: 'Star',
age: 34
};
const {firstName, lastName, age, job="Unemployed"} = person2;
console.log(firstName);
console.log(lastName);
console.log(age);
console.log(job);
// ---------- EXAMPLE 5 ----------
// DESTRUCTURING IN FUNCTION PARAMETERS
function displayPerson({ firstName, lastName, age, job="Unemployed" }) {
console.log(`name: ${firstName} ${lastName}`);
console.log(`age: ${age}`);
console.log(`job: ${job}`);
}
displayPerson(person1);
displayPerson(person2);

[@Dj7wiLLY]

Extraordinary well explained and examples were very good. Thank you so much!

[@vladimirAleksic-g5q]

Great job Bro Code! I became addicted to your tutorials. I admire the amount of work you invest in developing these learning materials.

[@robertweekes5783]

Thanks for showing this with arrays first, makes it easier to understand

[@ramzyabdul185]

Now this is solid explanation, I was starting it today and had some unclear parts on the function part... But u made it clear for me thanks bro

[@mehrnoushghaffarzadeh4971]

You teach really well! Thank you so ,much for this tutorial. Helped a lot!

[@sriramannadurai9287]

Who else is here after starting useState hook in react js without knowing JavaScript in depth like me ? 😂

[@MohammedAli-p7e9d]

Is this topic important in react js?

[@Muhammad-Bilal0055]

​@@MohammedAli-p7e9d yes

[@Darealdivine]

​@@MohammedAli-p7e9d Yes

[@sriramannadurai9287]

@@MohammedAli-p7e9d To understand useState() you need to know how destructuring works.

[@RABWA333]

@@MohammedAli-p7e9d yes, even when you fetch data from API and get json object you will need this , a lot more cases as well in React , actually you have to learn this topic and dive more in it

[@skootdiggity1301]

Fairly convincing human voice on this AI.

[@TapasShrestha]

its really ai??

[@kaylinburchette575]

Wow! Great video. 😄 Very explanatory, finally understood this topic

[@tonytodd7011]

Thanks Bro for your simple but great explanation!

[@piotrmazgaj]

This is my seal. I have watched the entire video, understood it, and I can explain it in my own words, thus I have gained knowledge. This is my seal.

[@omatzi7251]

when object destructuring the new variables can have a different name than the object keys, for example: const {firstName: personName}; (firstName - object key, personName - new variable)

[@zaklettrezvenik]

Patric is coding ever since dropping out of spongebob show, its expected of him to pop up again somewhere in apple

[@mohammadsuhaanhaq3590]

really helpful video thanks😃

[@copurdy6931]

Thanks you so much bro, you teach so detail and i can understand now

[@Mostafa-jh2ij]

Really awesome, bro thanks a bunch!

[@ranasif]

Great video, thanks!

[@suryar6137]

very great tutorial

[@shafiq_ramli]

What about destructuring object inside an object? Hope you can make a video about that soon!

[@hunin27]

hey these are actually pretty useful tutorials, they touch more advanced topics than the other videos. are these old? or are they new videos? Thanks for everything bro ❤

[@xzex2609]

there is a complete java script 8 Hours , and these series are new. Bro uses different way of doing things in this series , but both are great . and I hope he Dive into Dom more deeper , cause js is the language of controlling DOM at least this is the way I see it : you got to be crazy to use this language for writing apps . I don't know maybe libraries change my mind around this . but in python from the get go you are armed with any tool you need to do what ever you want.

[@ocs7]

goat

[@_Sahil-ru3lp]

The patrick in the object destruction example is me 😢😢

[@shivanshuhere]

Smooth

[@xzex2609]

can we use this or rest operator to deliver different amount of arguments like in python when we use (*args , **kwargs) ? destructuring is like unpacking , but is there such a feature in JS
I'm really having a hard time with the language coming from python , I wonder if it was better to learn Django

[@tamilmukbang3789]

thank you bro

[@mohsenmk2537]

😘thank you

[@ghorlik432]

What about "this" or static in obj ?

[@nihongo_]

W

[@MCroppered]

Is that your normal voice?

[@lobomalsano]

I think he deliberately makes his voice a little bit deeper to go with his theme of a "bro". That has to strain his throat lol

[@user-mo6yo4kz1m]

@@lobomalsano its his normal voice

[@STR-DP]

37😜