Object destructuring allows you to unpack properties from an object into distinct variables.

Basic Syntax

const user = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

// Without destructuring
const name = user.name;
const age = user.age;
const city = user.city;

// With destructuring
const { name, age, city } = user;
console.log(name, age, city); // Alice 30 New York

Renaming Variables

You can assign the property to a different variable name:

const { name: userName, age: userAge } = user;
console.log(userName, userAge); // Alice 30

Default Values

If a property is missing, you can provide a default:

const { country = 'Unknown' } = user;
console.log(country); // Unknown

Nested Destructuring

Extract properties from nested objects:

const user = {
  name: 'Alice',
  address: {
    city: 'New York',
    zip: '10001'
  }
};

const { address: { city, zip } } = user;
console.log(city, zip); // New York 10001

function Greeting({ name, age }) {
  return <h1>Hello {name}, you are {age}</h1>;
}
// Instead of props.name, props.age

Array destructuring extracts values from arrays by position.

Basic Syntax

const colors = ['red', 'green', 'blue'];
const [first, second, third] = colors;
console.log(first, second, third); // red green blue

Skipping Elements

Use commas to skip items:

const [, , third] = colors;
console.log(third); // blue

Default Values

If the array is shorter, defaults are used:

const [a = 1, b = 2, c = 3] = [10];
console.log(a, b, c); // 10 2 3

Swapping Variables

Destructuring makes swapping easy:

let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1

Rest Pattern (...)

Use the rest operator to collect remaining items:

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first, second, rest); // 1 2 [3,4,5]

const [count, setCount] = useState(0);
// count is the state value, setCount is the updater function

You can destructure objects inside arrays and vice versa.

// Array of objects
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];
const [{ name: firstUser }, { name: secondUser }] = users;
console.log(firstUser, secondUser); // Alice Bob

// Object containing an array
const data = {
  title: 'Posts',
  items: ['post1', 'post2', 'post3']
};
const { items: [firstPost, secondPost] } = data;
console.log(firstPost, secondPost); // post1 post2

This is extremely common in React – destructure props directly in the parameter list.

// Without destructuring
function displayUser(props) {
  console.log(props.name, props.age);
}

// With destructuring
function displayUser({ name, age }) {
  console.log(name, age);
}

// Also works with default values
function displayUser({ name = 'Guest', age = 18 } = {}) {
  console.log(name, age);
}

Destructuring is pervasive in React:

• Props destructuring for readability.
• State destructuring – useState returns an array.
• Context – useContext returns an object.
• Redux – useSelector returns state slices.
• Custom hooks – often return objects or arrays.

// Props
const Profile = ({ user: { name, email }, isAdmin }) => (
  <div>
    <h1>{name}</h1>
    <p>{email}</p>
    {isAdmin && <span>Admin</span>}
  </div>
);

// Hooks
const [loading, setLoading] = useState(false);
const { data, error } = useQuery(GET_USER);

• Object destructuring – extract properties by name, with renaming and defaults.
• Array destructuring – extract by position, skip elements, use rest pattern.
• Nested and mixed – combine both to handle complex data.
• Function parameters – destructure props directly.
• In React, destructuring simplifies code for props, hooks, and state.

Happy coding!