Object Destructuring – How It Can Simplify Your Code

When working with JavaScript, we often need to use several properties of an object. Object destructuring allows you to easily extract values without writing lengthy object property access.

It was introduced in ES6 and has become one of the essential tools in modern JavaScript.

---

Basic Syntax

  
const user = {
  name: 'Anna',
  age: 28,
  country: 'Armenia'
};

const { name, age } = user;

console.log(name); // Anna
console.log(age);  // 28
  

Advantages of this method:

• Code becomes shorter and more readable
• You avoid repeating the object name multiple times

---

Renaming Properties

  
const user = {
  name: 'Arman',
  age: 32
};

const { name: fullName } = user;

console.log(fullName); // Arman
  

Advantages of this method:

• You can customize the name to fit your code
• Helps avoid conflicts with variables of the same name

---

Setting Default Values

  
const user = {
  name: 'Sona'
};

const { name, age = 18 } = user;

console.log(age); // 18
  

Advantages of this method:

• You can assign a value when the property is missing
• Useful when working with APIs

---

Destructuring Nested Objects

  
const user = {
  name: 'Ani',
  location: {
    city: 'Yerevan',
    zip: 0010
  }
};

const { location: { city } } = user;

console.log(city); // Yerevan
  

Advantages of this method:

• Allows direct access to nested values
• No need for multiple variables or access chains

---

Destructuring in Function Parameters

  
function greet({ name, age }) {
  return `Hi ${name}, you are ${age} years old.`;
}

const user = { name: 'Narek', age: 35 };

console.log(greet(user));
  

Advantages of this method:

• Explicitly specifies which values to extract from the object
• Clearer than simply using `function greet(user)`

---