JavaScript Destructuring

Destructuring allows you to extract values from arrays and objects and assign them to variables using concise syntax.

Array Destructuring

              
            
JavaScript
Extract values from an array.
const colors = ["red", "green", "blue"];

const [first, second, third] = colors;

console.log(first);
console.log(second);
console.log(third);

Skip Array Values

              
            
JavaScript
Skip elements while destructuring.
const numbers = [10, 20, 30];

const [first, , third] = numbers;

console.log(first);
console.log(third);

Object Destructuring

              
            
JavaScript
Extract properties from an object.
const user = {
  name: "Alice",
  age: 25
};

const { name, age } = user;

console.log(name);
console.log(age);

Rename Destructured Variables

              
            
JavaScript
Assign object properties to differently named variables.
const user = {
  name: "Alice",
  age: 25
};

const { name: userName, age: userAge } = user;

console.log(userName);
console.log(userAge);

Default Values

              
            
JavaScript
Provide a fallback when a property is undefined.
const user = {
  name: "Alice"
};

const { name, age = 18 } = user;

console.log(name);
console.log(age);

Destructuring Function Parameters

              
            
JavaScript
Extract object properties directly in a function parameter.
function greet({ name, age }) {
  console.log(`${name} is ${age} years old`);
}

greet({ name: "Alice", age: 25 });

Summary

JavaScript destructuring makes it easier to work with arrays and objects by extracting values directly into variables. It supports skipping values, renaming properties, defaults, and function parameters.