Javascript Object Destructuring in Hindi
javascript ES6 version में object destructuring के जरिए object properties को एक साथ variables assign कर सकतें हैं |
इससे पहले के version में object के हर एक property को अलग अलग करके variable में assign किया जाता था | चलिए उदाहरण में देखतें हैं |
उदाहरण:
<html>
<head>
<script>
let user = {
name : "Tanu",
age:23,
course:"BTech"
}
let name = user.name;
let age = user.age;
let course = user.course;
console.log(name);
console.log(age);
console.log(course);
</script>
</head>
<body>
<p>Javascript ES5 Object Example</p>
</body>
</html>
output
उदाहरण में देखिए user नाम का एक object है जिसमें 3 properties है और हर property की value को fetch करने के लिए अलग अलग variable को define करनी पड़ी है | जिससे code काफी lengthy हो जाता है |
ES6 version में इसी लम्बी code को कम करने के लिए object destructuring का उपयोग किया गया है | एक empty object में सारे variables को एक साथ declare करके उसे object के सारे properties को sequencially assign कर सकतें हैं |
Syntax
let {property1: variable1, property2: variable2, property3: variable3} = object;उदाहरण:
<html>
<head>
<script>
let user = {
name : "Tanu",
age:23,
course:"BTech"
}
let {name: username, age: userage, course:usercourse} = user;
console.log(username);
console.log(userage);
console.log(usercourse);
</script>
</head>
<body>
<p>Javascript ES6 Object Destructuring</p>
</body>
</html>
output es5 example की तरह same रहेगा |
object destructurig में variables के नाम object properties की तरह रख सकते हैं या फिर अन्य नाम दे सकतें हैं |
नॉटपॉइंट: अगर variable names अलग रखना है properties names से, तब object destructuring में पहले property name लिखना होगा और उसके बाद :(colon) देकर variable name लिख सकतें हैं |
अगर property name और variable name same रखना चाहतें हैं तो :(colon) separator की जरुरत नहीं | एक ही बार variables को sequentially लिख सकतें हैं |
उदाहरण:
let {name, age, course} = user;एक object में कई properties होतीं हैं, पर अगर सिर्फ कुछ ही properties को लेकर variables में assign करना है तो object destructuring सिर्फ उन्ही properties को ले सकतें हैं |
उदाहरण:
<html>
<head>
<script>
let employee = {
fname : "Manya",
lname:"Dutta",
age:23,
designation:"HR",
location:"Delhi",
salary:20000
}
let {fname: firstname, lname: lastname, designation:post} = employee;
console.log(firstname);
console.log(lastname);
console.log(post);
</script>
</head>
<body>
<p>Javascript ES6 Object Destructuring</p>
</body>
</html>
output
