JavaScript DESTRUCTURING in 8 minutes! 💥

00:00:00 intro
00:00:21 swap the values of two variables
00:01:11 swap two elements in an array
00:02:34 assign array elements to variables
00:03:47 extract values from objects
00:06:11 destructuring in function parameters
// 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);

[@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!

[@user-qj1lq4zx3p]

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

[@zaklettrezvenik]

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

[@skootdiggity1301]

Fairly convincing human voice on this AI.

[@tonytodd7011]

Thanks Bro for your simple but great explanation!

[@Mostafa-jh2ij]

Really awesome, bro thanks a bunch!

[@ranasif]

Great video, thanks!

[@copurdy6931]

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

[@suryar6137]

very great tutorial

[@shivanshuhere]

Smooth

[@tamilmukbang3789]

thank you bro

[@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.

[@mohsenmk2537]

😘thank you

[@shafiq_ramli]

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

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

[@ghorlik432]

What about "this" or static in obj ?

[@_Sahil-ru3lp]

The patrick in the object destruction example is me 😢😢

[@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😜