JavaScript Object Destructuring

Object destructuring అనేది object లోని properties విలువలను ప్రత్యేకమైన variables లోకి సులభంగా తీసుకునే JavaScript syntax. Object properties ను ఒక్కొక్కటిగా access చేయడం బదులుగా, ఒకే statement లో అవసరమైన values ను variables గా పొందవచ్చు.

సాధారణ విధానం

ఒక object లో name మరియు age properties ఉన్నాయని అనుకుందాం. Destructuring ద్వారా const { name, age } = student; అని రాస్తే, name మరియు age variables లో object values వస్తాయి.

Property name మరియు variable name

సాధారణ destructuring లో variable name object property name తో ఒకేలా ఉండాలి. Property పేరు వేరుగా ఉంచాలంటే const { name: studentName } = student; వంటి syntax ఉపయోగించాలి. ఇక్కడ name property value studentName variable లోకి వస్తుంది.

Default values

Object లో property లేకపోతే variable value undefined అవుతుంది. దీనిని నివారించడానికి const { city = “Unknown” } = user; వంటి default value ఇవ్వవచ్చు.

Nested object destructuring

ఒక object లోపల మరొక object ఉన్నప్పుడు nested destructuring ఉపయోగించవచ్చు. అయితే beginners గా ముందుగా basic destructuring, renaming మరియు default values పై మంచి అవగాహన పొందడం ముఖ్యం.

ఎందుకు ఉపయోగించాలి?

Code చిన్నగా మరియు readable గా ఉంటుంది.
Repeated property access తగ్గుతుంది.
Functions నుండి వచ్చే object data ను సులభంగా ఉపయోగించవచ్చు.
Modern JavaScript applications మరియు APIs లో ఇది చాలా సాధారణంగా కనిపిస్తుంది.

Simple Explanation

Object destructuring అంటే object లోని values ను బయటకు తీసి variables లో store చేయడం. ఉదాహరణకు user.name, user.email అని పదే పదే రాయడం బదులుగా const { name, email } = user; అని ఒకసారి రాస్తే సరిపోతుంది. Object property పేరు మరియు variable పేరు ఒకేలా ఉంటే syntax చాలా సులభంగా ఉంటుంది.

Real-Life Example

ఒక student admission form లో name, course, మరియు city వంటి వివరాలు ఉన్నాయని ఊహించండి. మొత్తం form object ను ప్రతి చోట పంపాల్సిన అవసరం లేకుండా, అవసరమైన name మరియు course values ను destructuring ద్వారా ప్రత్యేక variables లోకి తీసుకోవచ్చు. ఇది పెద్ద application లో user profile లేదా API response data ను handle చేయడంలో ఉపయోగపడుతుంది.

Code Examples

Basic Object Destructuring

const student = {
  name: "Anu",
  age: 20,
  course: "JavaScript"
};

const { name, age } = student;

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

ఇక్కడ student object నుండి name మరియు age properties ను destructuring ద్వారా తీసుకున్నాం. course property అవసరం లేకపోవడంతో దాన్ని తీసుకోలేదు.

Anu
20

Property Renaming

const product = {
  name: "Keyboard",
  price: 1200
};

const { name: productName, price: productPrice } = product;

console.log(productName);
console.log(productPrice);

Object లోని name property ను productName variable గా, price property ను productPrice variable గా rename చేశాం. ఈ syntax లో ఎడమవైపు ఉన్న పేరు object property, colon తర్వాత ఉన్న పేరు కొత్త variable.

Keyboard
1200

Default Value

const user = {
  username: "ravi"
};

const { username, city = "Hyderabad" } = user;

console.log(username);
console.log(city);

user object లో city property లేదు. అందువల్ల destructuring లో ఇచ్చిన default value “Hyderabad” ఉపయోగించబడుతుంది. Property ఉంటే default value ఉపయోగించబడదు.

ravi
Hyderabad

Line-by-Line Explanation

const student = {

ఇది student అనే constant object declaration ప్రారంభించే line.

name: “Anu”,

Object లో name property కి “Anu” అనే string value ఇస్తుంది.

age: 20,

Object లో age property కి 20 అనే numeric value ఇస్తుంది.

course: “JavaScript”

Object లో course property కి “JavaScript” value ఇస్తుంది.

};

Object declaration ఇక్కడ ముగుస్తుంది.

ఈ ఖాళీ line code ను readable గా ఉంచడానికి మాత్రమే ఉపయోగించబడింది.

const { name, age } = student;

ఇది object destructuring statement. student object లోని name మరియు age properties values ను అదే పేర్లతో ఉన్న variables లోకి తీసుకుంటుంది.

ఈ ఖాళీ line code ను readable గా ఉంచడానికి మాత్రమే ఉపయోగించబడింది.

console.log(name);

Destructuring ద్వారా వచ్చిన name variable value ను console లో చూపిస్తుంది.

console.log(age);

Destructuring ద్వారా వచ్చిన age variable value ను console లో చూపిస్తుంది.

Try It

Try this JavaScript code:

Example

const product = {
  name: "Notebook",
  price: 50,
  category: "Study"
};

const { name, price } = product;

console.log(name, price);

Try It Yourself »

Practice

Practice:

user object నుండి username, email, మరియు role values ను destructuring ద్వారా తీసుకోండి. Object లో లేని city property కి “Unknown” అనే default value ఇవ్వండి. అన్ని values ను console లో ఒక్కొక్కటిగా చూపించండి.

Hint:

Basic destructuring కోసం const { username, email } = user; వంటి syntax ఉపయోగించండి. Default value కోసం city = “Unknown” రాయండి.

Common Mistakes

Object property పేరు మరియు destructuring variable పేరు వేరు పెట్టి, renaming syntax ఉపయోగించకపోవడం.

Property పేరు వేరుగా variable గా కావాలంటే const { name: studentName } = student; వంటి syntax ఉపయోగించండి.

Array destructuring లాగా object values order ఆధారంగా వస్తాయని అనుకోవడం.

Object destructuring order ఆధారంగా కాదు; property names ఆధారంగా values తీసుకుంటుంది.

Object లో లేని property కి default value ఇవ్వకుండా ఉపయోగించడం.

Property missing అయితే undefined వస్తుంది. అవసరమైతే property = defaultValue syntax ఉపయోగించండి.

ఇప్పటికే ఉన్న const variable ను మళ్లీ అదే scope లో declare చేయడం.

ప్రతి variable name ను ఒకే scope లో ఒకసారి మాత్రమే declare చేయండి లేదా ప్రత్యేకమైన variable name ఉపయోగించండి.

Interview Questions

Object destructuring అంటే ఏమిటి?

Answer: Object destructuring అనేది object properties values ను ప్రత్యేకమైన variables లోకి సులభంగా తీసుకునే JavaScript syntax. ఉదాహరణకు const { name } = user; ద్వారా user.name value ను name variable లో పొందవచ్చు.

Object destructuring లో property renaming ఎలా చేస్తారు?

Answer: Property పేరు తర్వాత colon మరియు కొత్త variable name రాయాలి. ఉదాహరణకు const { name: userName } = user;. ఇక్కడ name property value userName variable లోకి వస్తుంది.

Destructuring లో default value ఎప్పుడు ఉపయోగిస్తారు?

Answer: Object లో property లేకపోవచ్చు లేదా దాని value undefined కావచ్చు అనుకున్నప్పుడు default value ఇస్తారు. ఉదాహరణకు const { city = “Unknown” } = user;.

Exam Questions

క్రింది code output ఏమిటి? const book = { title: “JS”, pages: 100 }; const { title, pages } = book; console.log(title, pages);

Answer:

JS 100

Object destructuring మరియు array destructuring మధ్య ముఖ్యమైన తేడా ఏమిటి?

Answer:

Object destructuring property names ఆధారంగా values తీసుకుంటుంది. Array destructuring మాత్రం element position లేదా index order ఆధారంగా values తీసుకుంటుంది.

క్రింది statement లో userName value ఎలా వస్తుంది? const { name: userName } = user;

Answer:

ఇది user object లోని name property value ను userName అనే కొత్త variable లో store చేస్తుంది.

Quick Revision

Object destructuring object properties ను variables లోకి సులభంగా తీసుకునే syntax.
Basic syntax: const { propertyName } = objectName;
ఒకేసారి అనేక properties ను destructure చేయవచ్చు.
Property పేరు వేరుగా variable గా కావాలంటే propertyName: newVariableName ఉపయోగించాలి.
Missing property కోసం propertyName = defaultValue ఉపయోగించాలి.
Object destructuring property names ఆధారంగా పనిచేస్తుంది; order ఆధారంగా కాదు.

JavaScript Object Destructuring