JavaScript DESTRUCTURING in 8 minutes!

Your video will begin in 10
99 Views

  • Thanks! Share it with your friends!

    You disliked this video. Thanks for the feedback!

brocode
Published
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);
Category
Bro Code
Tags
javascript, javascript tutorial, javascript full course
Be the first to comment