In JavaScript Objects, unpacking the object properties into variables is called destructuring.

HTML Code (where the result will be placed):

<p id="demo"></p>

JavaScript:

const car = {
    type: "Maserati", 
    model: "Quattroporte", 
    color: "white"
    }
};

let {type, model} = myCar; // object Object

document.getElementById("demo").innerHTML = type + " " + model; // Maserati Quattroporte

For potentially missing properties default values can be set.

const car = {
    type: "Maserati", 
    model: "Quattroporte", 
    color: "white"
    }
};

let {type, model, year=2025} = myCar; // object Object

There are cases where you want the destructured variable to have a different name than the property name.

const car = {
    type: "Maserati", 
    model: "Quattroporte", 
    color: "white"
    }
};

let {type: brand} = myCar; // object Object where the type is referred to as brand

// string
let name = "chicken";

// destructuring
let [a1, a2, a3, a4, a5, a6, a7] = name;

// display value
document.getElementById("demo").innerHTML = a7; // will show n

// array
const cars = ["Lamborghini", "Ferrari", "Maserati"];

// destructuring
let [car1, car2, car3] = cars;

// display value
document.getElementById("demo").innerHTML = car3; // will show Maserati

Position values can be used to point to specific array values when destructuring.

// array
const cars = ["Lamborghini", "Ferrari", "Maserati"];

// destructuring
let {[0]:car1 ,[2]:car2} = cars;

// display value
document.getElementById("demo").innerHTML = car1 + " " + car2; // will show Lamborghini Maserati

Destructuring syntax can be ended with a rest property which will store all remaining values into a new array.

// array
const numbers = [1, 2, 3, 5, 10, 50, 100];

// destructuring
const [a,b, ...rest] = numbers;

// display value
document.getElementById("demo").innerHTML =
    "<p>a is " + a +
    "<p>b is " + b +
    "<p>the remainder of the value are " + rest;

Output:

a is 1

b is 2

the rest is 3,5,10,50,100

// create a map
const cars = new Map([
  ["Lamborghini", 10],
  ["Ferrari", 5],
  ["Maserati", 0]
]);

// destructuring
let text = "";
for (const [key, value] of cars) {
    text += "<p>" + key + " is " + value;
}

// display value
document.getElementById("demo").innerHTML = text;

Output:

Lamborghini is 10

Ferrari is 5

Maserati is 0

The values of two variables can be swapped using a destructuring assignment.

// variables
let car1 = "Maserati";
let car2 = "Alfa Romeo";

// destructing
[car1, car2] = [car2, car1];

// display value
document.getElementById("demo").innerHTML = car1 + ", " + car2; // Alfa Romeo, Maserati

---