Up next in 10
Destructuring assignment and Spread Operator _ JavaScript Tutorial in Hindi #87
80 views
Feb 10, 2024
In the 87th tutorial of our JavaScript series, presented in Hindi, delve into the world of efficient data manipulation with Destructuring Assignment and the Spread Operator. Explore how Destructuring Assignment simplifies variable assignment and object/array extraction, while the Spread Operator facilitates the spread of elements for concise and effective coding. This session provides practical examples and step-by-step guidance in Hindi, ensuring a comprehensive understanding of these powerful JavaScript features. Whether you're a JavaScript enthusiast seeking to optimize your code or a developer aiming to refine your data manipulation skills, this tutorial is your key to mastering Destructuring Assignment and the Spread Operator. Join the session, enhance your coding capabilities, and elevate your JavaScript projects with advanced data manipulation techniques!
View Video Transcript
0:00
जावास्क्रिप्ट की एक बहुत बड़ी ताकत ह��
0:01
डी स्ट्रक्चरिंग और डी स्ट्रक्चरिंग के साथ साथ स्प्रेड ओपरेटर को किस तरह से इस्तेमाल करना ह��
0:06
आज का इन वीडियो आप लोगों को बताएगा कि ये चीज किस तरह से यूज़ की जाएगी �YO
0:36
टिप्पिंग करेंगे तो यहां पर आप जब स्टाइटर को चलाएंगे तब यहां पर आपकी जो फाइल की इस रिएल्व जैसे कि मै��
0:41
जैसे से एडिट करता जा रहा हूं मेरे फाइल की जो है इस ट्री में देख पाऊंगा आप मैं कभी भी पीछे जा सकत��
0:46
ट्रीम अगर मैंने कोई भी गड़बड़ कर दी अपनी फाइल में तो ऑज्जर यार एम एकसाइटेड बट उससे ज्यादा मै��
0:53
एक्साइड को लेकर डिस्ट्रक्चरिंग के बारे में बात करते हैं इस ट्रेसिडेंट इस यूज टो अनपैक वाल्य��
0:58
और properties from objects into distinct variables, distinct variables में अगर आप unpack करना चाहते हैं
1:06
कुछ variables को तो आप कर सकते हैं, what does that mean, let me tell you
1:11
आप कुछ इस तरह से कर सकते हैं कि भाई let a,b is equal to एक arr
1:17
अब ये arr क्या होगा, मान लो ये arr है, 3,5, तो अगर आप लोग को a को 3 करना है
1:24
बी को 5 करना है तो आप इस syntax के use कर सकते हो why is it useful
1:30
क्योंकि यार traditionally अगर आपको ये चीज करनी होती आप खुद ही जोचो ऐसे करते हैं कि नहीं करते है��
1:38
आप कहते हैं यार let b is equal to arr1 करते हैं ऐसे कि नहीं करते हैं करते है��
1:43
लेकिन करने की जरूरत नहीं है, ठीक है, तो मैं यहाँ पर लिखता हूँ, no need to do this, और आप जो है, कुछ इस तरह से कर सकते हैं, तो अगर मैं यहाँ पर लिखूँ, console.log, और मैं यहाँ पर लिखता हूँ, a, b, तो मुझे 3 और 5 मिल जाएगा, क्योंकि मैंने क्या किया है, a, b is
2:13
ठीक है, तो 3 और 5 यहाँ पर आ चुका है, अब अगर यहाँ पर 3, 5 के साथ 8 भी होता, तब A और B की value क्या होती, 3, 5 होती है, 5, 8 होती है, यह एक सवाल है, तो 3, 5 ही होती A और B की value, ठीक है, अगर मैं यहाँ पर एक C भी लगा दूना, एक यहाँ पर C भी लगा दूना, let A, B, C
2:43
और डी करता हूं और इसके बाद मैं आप रिलोड करता है नहीं कि मैंने एबी और सी और डी कर दिया तो इसकी बार��
2:51
जो निशाल इस नहीं हो पाइट अगर मान लो मैं आप नाइन कॉमा 12 कॉमा थर्टीन या फिर 14 करता हूं तब इन चार वैल्यू��
2:59
लेगा यह बीच या डी ठीक है और बागी 12 और 14 को इग्नोर कर दिया जाएगा मतलब 12 14 एक्स्ट्रा वैल्यूस ह��
3:05
सकती है कम वैल्यूस लेकिन नहीं हो सकती ठीक है तो यह हमारी होती है वह डिस्ट्रक्चर है अब मैं यहां प��
3:11
लेकर सकता हूं तीन डॉट लगाए रेस्ट लिख सकता हूं कि बाकी बचे हुए जो है और इसके बाद में रेस्ट यहां प��
3:19
प्रिंट कर सकता हूं और मैं अगर ऐसा करूंगा तो आप लोग देखो कि 3 5 8 और 9 आ गए और रेस्ट जो थे वह एरे मे��
3:25
गए नहीं जितने बचेवा एलिमेंट्स थे वह कहां पर आ गए वह एक एरेम में आ गए और यही डी स्ट्रॉक्चर इन एडिट��
3:30
के यह एक सिंटेक्स हो गया हमारा अब मान लो मैं चाहता हूं कि यार तीन मेरा एम आ जाए ठीक है देखे जाओ आ��
3:52
करता जाता हूं और नई चीज है आपको बताता जाता हूं ठीक है दो देखो अगर मान लो मैं चाहता हूं कि एक ही वाल��
3:57
जो है तीन ठीक है और रेस्ट की वैल्यू नौ से शुरू हो ठीक है समझ रहो रेस्ट की वैल्यू का से शुरू हो न��
4:03
से शुरू हो जो रेस्ट वाला एरे है मेरा तो मैं क्या करूंगा तो मैं क्या करूंगा बी को खाली कर दूंग��
4:08
इस तरह से ठीक है और मैं कह दूंगा रेस्ट इस एग्ल टू एयर तो एक अंदर तो थ्री आ जाएगा पांच किसी भी वेरिबल क��
4:20
असाइन नहीं होगा आट किसी भी वेरिबल को साइन नहीं होगा फिर इसके बाद जो बचे हुए एलिमेंट्स है वह यहा��
4:27
आ जाएंगे तो अगर मैं सॉरी रेस्ट में आ जाएंगे तो मैं अगर भी अगर रेस्ट को प्रेंट करूं एक और रेस्ट क��
4:33
प्रेंट करूं तो हम क्या एक्सपेक्ट कर सकते हैं 3 और 9 12 और 14 ठीक है तो दिखाता हूं आप लोगों को 3 और 9 12
4:42
तो इस तरह से जो हैbbles कर सकते हो ठीक है अब यहां पर एक चीज और जो आप कर सकते हो वह यह है कि आप यहां प��
4:49
एलिमेंट्स को गायब करके अब मतलब इसे भी मैंने दिखाया आपको एक कमा कमा कर सकते हैं यह चाहते तो भी कर सकत��
4:56
तो क्या होता बी में आटा था यू केस्ट राइट तो अगर मैं बी को प्रेंट करूं तो क्या होगा कि बी में आटा जाएगा आप देखन��
5:03
याद पर मैंने बी को प्रिंट नहीं किया कि मैंने किया यार सेव नहीं होगा 38 और बाकी के जो एलेमेंट से वह यहां प��
5:10
तो काफी बढ़िया syntax है syntactic sugar है मज़ा आता है यार ठीक है मज़ा आता ह��
5:15
तो यह है हमारा destructuring का syntax ठीक है तो destructuring assignment is used to unpack values from an array
5:20
and properties from objects into distinct variables let x y is equal to 720
5:25
x में 7 आएगा y में 20 आएगा बहुती basic सा simple सा destructuring assignment थ��
5:29
x will be assigned 7 by 20 10 x और डो डो rest करोगे आप तो 10 तो यहाँ पर है, देखो 10-10 match हो गए
5:36
तो x में 80 आ जाएगा, और rest में 7, 11, 21, 88 आ जाएगा
5:41
7, 11, 21, 88, ठीक है, similarly we can destructure objects on the left hand side of the assignment
5:48
अगर आप कुछ इस तरह से करो, कि आपने एक object बना लिया, और आप a, b is equal to b, j करो
5:52
तो यह example भी हम लोग देख लेते हैं तो मैं एक काम करता हूँ इसको comment out करता हू��
5:58
और मैं यहाँ पर simply क्या करूँगा a,b is equal to मैं ऐसे कर दूँग��
6:03
मैं करूँगा भाई a की value 1 और b की value कर दूँगा 5
6:07
ठीक है तो अगर मैं a,b करूँ console log तो आप लोग यहाँ पर देखना कि क्या हो जाएगा intermediate value intermediate value is not
6:17
I triple � sólo उस मैंने यहाँ पर इसको कुछ इस तरह से कर दिया मुझे कमा अधिकार देना चाहिए था अब अग��
6:26
इसको रिलोड करूंगा सेव करने के बाद तो क्या दिक्कत आ रही है अरे यार मैंने कर ली ब्रैकेट लगाना है यहां प��
6:33
ना कि स्क्वायर ब्रैकेट तो एम आ जाएगा मेरा वन और बी में आ जाएगा मेरा क्या बीमा जाएगा पांच इन विशेष निवाइ��
6:41
वीवें बांच ठीक है तो इस तरह से जो डी स्ट्रक्चरिंग काम करती है अब बहुत सारे एग्जांपल इसके मिस्लेनियस ह��
6:48
बट दिस ए समथिंग डेड यूज मोस्ट ऑफ टाइम्स ठीक है तो यह बात आप लोग दिमाग बे रखना कि सबसे ज्याद��
6:54
इसे अमाल हम लोग अर्ने वाले हैं जो अभी मैंने किया उसका ठीक है तो स्प्रेड सिंटेक्स कि बात करते है��
7:00
स्प्रेड सिंटेक्स अलाउज ए राइट रेबल सच एस एन एरे और स्ट्रिंग टू विए एक्सपैंडेड इन प्लेस इस विर्ज��
7:06
और more arguments are expected ठीक है पर उससे भी पहले मैं आप लोग को MDN dogs
7:10
दिखाना चाहता हूँ destructuring की ठीक है तो आप destructuring assignment की MDN dogs
7:16
जरूर देखें क्योंकि इसमें बहुत सारा syntax और लिखा हुआ है miscellaneous वाल��
7:20
but this is something जो मैंने बताया है this is something that you are going to use most of the times
7:24
spread spread syntax spread syntax object object
7:36
ठीक है in an object literal the spread syntax enumerates the properties of an object
7:39
and adds a key value place to the objects being created बताता हूँ इसका क्या मतलब है ठीक है तो देखो यार यह तो मैंने आप पर ऑपरेटर की बात कर लेता हूं प्रेड ऑपरेटर क्या करता है मान लोगी मेरा गैर��
7:52
ठीक है लेट ए आर इसी गुल टू यह ठीक है यह यह राज़न इसी गुल टू कर देते हैं इसको और मैं चाहता हूं क��
7:59
जरे को ऑब्जेक्ट में कनवर्ट करूं तो मैं क्या करूंगा मैं सिंपली इस तरह के सिंटेक्स का इस्तेमाल क��
8:04
सकता हूं मैं कमो भाई ऑब्जेक्ट इस इक्वल टू ट्रिपल डॉट यार ठीक है तो मैं कहूंगा लेट ओबीजे वन इ��
8:10
टू ट्रिपल डॉट एर वन तो मैं यह चाहता हूं कि इन वाल्यूस को मैं की वाल्यू पेर्स में कन्वर्ट कर दूं त��
8:17
जैसे ही मैं कंसोल डॉट लॉग ओबीज़े वन प्रेट करूंगा मैं यह वाला कंसोल लॉग अटा देता हूं जैसे ही मैं ओबीज़��
8:25
प्रिंट करूंगा आप लोग देखना है यहाँ पर 031528 इस तरह से आ गया ठीक है तो 0 1 और 2 इसकी जो ह��
8:33
कीज हो गई और यह वाल्यूज हो गई ठीक है कुछ इस तरह से जो है की वाल्यू पेस बन जाते हैं यह देखो यहां प��
8:40
1711 के सद्ध किया गया तो 0 1 और 1711 को जैसे इस तरह से हो गया सिमिलरली हम एक चीज और कर सकते है��
8:47
कि यह मालों मेरे पास एक फंक्शन है ठीक है मालों मेरे पास एक फंक्शन सम है जो कि तीन वाल्यूस लेता ह��
8:53
वीवन वीडू और वी थ्री और यह रिटर्न करता है बहुत ही सिंपल सी चीज है जो रिटर्न कर रहा है वी टू प्लस व��
9:02
थ्री मौन रिटर्न कर रहा है तो मैं क्या कर सकता हूं मैं इस तरह से कॉल कर सकता हूं इसको मैं कह सकता हू��
9:07
वाइस सम और ट्रिपल डॉट ए आर वन ठीक है और मैं इसको अंसॉल लॉक करूंगा और इन तीनों वैल्यूस को जब ह��
9:17
ऐड करेंगे तो 16 पांच और 388 16 तो क्या मुझे 16 मिलेगा यहां पर कंसोल में देखने को मैंने क्या गलत��
9:24
नहीं मैंने कोई गलती नहीं कर दी, save होने में time लगता है, तो देखो 16 यहाँ पर जो है print हो गया, ठीक है, तो मैं क्या कर सकता हूँ, एक array के अंदर values हैं, उसको मैं एक function को pass करना चाता हूँ, ठीक है, एक array के अंदर already values हैं, तीन values हैं, मेरा function भी तीन values लेता है, और मैं अपने function
9:54
mdn mdn ठीक है अब यहाँ पर देखो spread syntax allows an iterable
10:02
such as an array यहाँ पर देखो xyz नोंने भी sum का example
10:06
बिल्कुल वैसे ही लिया है जैसे मैंने लिया है अब आप यहाँ पर देखो कि इसका syntax ह��
10:09
वो इन्होंने काफी detail से बताया है इन्होंने पूरी documentation को enumerate किया ह��
10:14
एक फीचर बताया बट जो मैंने आपको बताया है इस समथिंग डेड यूज मोस्ट ऑफ टाइम ठीक है तो यह सबसे ज्याद��
10:20
यूज किया जाता है डी स्ट्रक्चर ठीक है तो स्प्रेड ऑपरेटर डी स्ट्रक्चर एंड आप लोग को आ गया ठीक है ज��
10:27
projects पनाएंगे आगे जैसे ऐसे आप लोग काम करोगे तो आप कोई चीज और आसान लगने लगेगी बट देस wis
10:34
मोस्ट आप टाइम सेट ठीक है अब एक चीज और दिखाता हूं आपको जो रियाक्ट में काफी आप लोग यूज करोगे मैं आपक��
10:39
देखाता हूं इसे मालो मेरे पास एक ऑब्जेक्ट है ओबीजेट टू ठीक है लेट ओबीजेट टू इज एकुअल टू मालो नेम है हैर��
10:50
और मालो कि कंपनी है कंपनी xyz एड्रेस है xyz ठीक है अब मैं चाहता हूं कि मैं प्रेंट करूं ओबीजेट टू क��
11:40
और वो यह है कि यह syntax कैसे काम करता है यह समझना आप लो��
11:44
तो obj2 में से इसने सब कुछ ले लिया name ले लिया company ले लिया address ले लिय��
11:48
अब इसके बाद यह क्या करेगा इन values को override कर देगा यानि कि name john लिखा हुआ है त��
11:53
name harry चला जाएगा name john आ जाएगा ठीक है तो ये इस तरह से काम करता ह��
11:57
अगर मालो मैं company भी change करना जाता हूँ company भी change करना चाता हू��
12:01
ABC करना चाता हूँ आप देखो यहाँ पर जो मेरी company थी XYZ थ��
12:05
name जॉन हो गया था पर अगर अभी मैं reload करूँ तो company ABC हो गय��
12:09
देखो name जॉन हो गया company ABC हो गया अगर इसी syntax को मै��
12:15
बहुत सारे लोग complain करते हैं कि यह नहीं चल रहा है अगर मान लो मैं यह triple.obj2
12:20
ध्यान से सुनना मेरी बात को एकदम कान खड़े कर गया है आप देख रहे हैं यहाँ प��
12:26
obj2 मैं बाद में लिख दूँ तो क्या होगा, कि इस object में पहले name john आ गया, company abc आ गयी
12:31
फिर इसके बाद ये पूरा object खुल जाएगा, यानि कि इसकी जो भी values में वो आ जाएगी
12:35
जैसे कि name harry, company xyz, और ये दोनों values override हो जाएगी
12:39
समझ रहे हो आप लोग आप ओवराइड बाद में करना चाहोगे पहले नहीं करना चाहोगे तो इससे कोई फर्क नहीं पड़ेग��
12:45
आपका ओबीजेट टू बिल्कुल वैसे प्रिंट हो जाएगा जैसे जैसे दिखता था पहले नेम है रिकम ने एक्सवाइस एक्सवाइस देख रहे ह��
12:51
सेम चीज प्रेंट होगी यह वाले यह वैल्यूज ओवर राइड क्यों नहीं हुई यार ओवर राइड इसलिए नहीं हुई क्योंकि आपने उपीजेट के बाद में नहीं लिखी इस केस में ओवर राइड होंगी इस केस में ओवर राइड नहीं होंगी ठीक है मैं लिख देत��
13:21
आ रहा है और मैं काम करता हूं यहां पर इसको डी स्ट्रक्चरिंग एंड प्रेट सेंटेक्स देता हूं नाम ताकि या��
13:33
यह थोड़ी सी खूबसूरती पकड़ ले और एमडीए swear लिंक से दोनों यह भी मैं यहां पर आप लोगों के लिए डा��
13:39
लूप ताकि आप लोग यार इसको रीड कर लो क्या देखो इसको रीड करना पड़ेगा आपको ठीक है यह ड��
13:45
स्ट्रॉक्चरिंग को गया स्प्रेड ऑफरेटर को गया दोनों डाल देता हूं यहां पर ताकि आपका टाइम बचा गोग��
13:50
भी ना करना पड़े आपको ठीक है simply यहाँ पर आपने क्या करना है कि इसको ऐसे करके right click करके go to क��
13:55
देना है ठीक है copy करके या फिर paste कर लेना अपनी URL में ठीक है कोई दिक्कत नहीं है so I hope कि आपक��
14:01
सब्सक्राइब कर लें और काफी बढ़िया अब यूट्यूब ने यूवाइट एक चीज और आपसे रिक्वेस्ट करना चाहूंगा कि आप पहले वीडिय��
14:13
जाएं और वहां पर अपना जो फीडबैक है वह प्लीज कमेंट कर देंगे आज को से लेटेड आपको क्या फीडबैक कि आ��
14:18
किसी को चाहेंगे कि वह यह करें को स्टीक्या आप क्या यह चीज जो है इस कोर्स को आप रेकमेंट करेंगे ए��
14:27
परिणर को यह चीज आप जो है बताएं उसमें और रिव्यू करके डाल देना फर्स्ट वीडियो में डालना प्ली��
14:32
इस वीडियो में फर्स्ट वीडियो में आप जाकर प्लीज डालें रिव्यू मुझे काफी खुशी हो गई अब इस वीडिय��
14:36
इतना है गाइस थैंक यू सो मच गाइस पर वाचिंग इस वीडियो एंड आवेल सी यू टेक्स टाइम ��