Advanced Javascript Array Destructuring in Hindi Tutorial

by
Table of Contents hide
1 Array Destructuring in Javascript Hindi
1.1 nested array के साथ array destructuring
1.2 array destructuring with function
2 Conclusion
3 अन्य javascript tutorial के सुझाव

Array Destructuring in Javascript Hindi

एक complex structure को छोटे छोटे parts में बांटने को Destructuring कहा जाता है |

javascript में data जो arrays या objects या properties में store होता है उसे Destructuring के जरिए individual values को आसानी से extract किया जाता है |

javascript array destructuring जानने से पहले जानेगें ES5 version में कैसे array से, individual values को extract किया जाता था |

उदाहरण

<html>
<script>
    var student = ["Nikhil","class 1", 80, 90, 98];
    let name = student[0];
    let grade = student[1];
    let mark1 = student[2];
    console.log(name);
    console.log(grade);
    console.log(mark1);
</script>
</html>

javascript ES5 version में array के individual element को index value के जरिए extract किया जाता है और अलग अलग variable में assign किया जाता है | index value 0 (zero) से सुरु होता है |

output

javascript es5 example

ऊपर के उदाहरण में array के individual values को हमने अलग अलग variables में store किया है और उसके बाद उसे display किया गया है |

अगर array में बहोत सारे values हैं तो code बहोत लम्बा हो जायेगा की हर value के लिए एक नया variable बनाना | इसका समाधान javascript ES6 version में array destructuring के जरिए निकाला गया है |

javascript ES6 version में कम code में हम सभी values को fetch कर सकतें हैं | इसके लिए सभी variables को एक empty array में लिखी जाती है और values वाले array name को इसे assign की जाती है | निचे उदाहरण में देखिए |

उदाहरण:

<html>
 <head>
   <script>
    var student = ["Nikhil","class 1", 80, 90, 98];
    let [name, grade, mark1] = student;
    console.log(name);
    console.log(grade);
    console.log(mark1);
  </script>
 </head>
 <body>
    <p>javascript ES6 Example</p>
 </body>
</html>

उदाहरण में देखिए सारे variables को एक empty array में लिखी गयी है और student values वाला array को इसे assign कर दिया गया है |

तो कम code में individual values मिल गया है और इसकी output को console.log के जरिए display कर दिया गया |

variables में default value भी सेट कर सकतें हैं और अगर variable को कोई value नहीं मिलती है तो output में undefined आएगा |

उदाहरण:

<html>
 <head>
   <script>
    var student = ["Nikhil"];
    let [name, grade, mark1 = 90] = student;
    console.log(name);
    console.log(grade);
    console.log(mark1);
  </script>
 </head>
 <body>
    <p>javascript ES6 Example</p>
 </body>
</html>

output

array destructuring with default value

nested array के साथ array destructuring

array destructuring सिर्फ simple array के साथ ही नहीं बल्कि nested array बनाकर भी किया जा सकता है | उदाहरण में देखिए student array में marks को nested array में लिया गया है | और इन values को empty nested array के जरिये variables में assign करेंगे |

उदाहरण

<html>
 <head>
   <script>
    var student = ["Nikhil","class1", [89, 92, 90]];
    let [name, grade, [math, science, english]] = student;
    console.log(name);
    console.log(grade);
    console.log(math);
    console.log(science);
    console.log(english);
  </script>
 </head>
 <body>
    <p>javascript ES6 Example</p>
 </body>
</html>

output

nested array destructuring in javascript

array destructuring with function

array destructuring function के जरिए की जा सकती है जिसे निचे उदाहरण से समझेंगे |

उदाहरण:

<html>
 <head>
   <script>
    function student()
    {
      return ["Nikhil","class1"];
    }
   let [name, grade] = student();
    console.log(name);
    console.log(grade);
  </script>
 </head>
 <body>
    <p>javascript ES6 Example</p>
 </body>
</html>

उदाहरण में देखिए एक student function से array values को return किया है और बाहार एक array destructuring के जरिए function के individual values को display किया है |

output

array destructuring with function

Conclusion

आशा है आपको javascript array destructuring समझ में आया होगा | इसके जरिए सारे variables को एक साथ define कर सकतें हैं और इसे nested array के रूप में भी लिख सकतें |

rest parameters का भी उपयोग javascript array destructuring में कर सकतें हैं और साथ ही साथ इसे function में भी इस्तेमाल कर सकतें हैं |

अन्य javascript tutorial के सुझाव