म्यूटेशन से बचना
डेटा को बदलने के बजाय उसकी प्रतियों के साथ काम कीजिए।
म्यूटेशन से बचना, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
बदलाव से क्यों बचें
साझा डेटा में बदलाव करने से ऐसे दोष पैदा होते हैं जिनका पता लगाना कठिन होता है: एक जगह किया गया बदलाव कहीं और के कोड को अप्रत्याशित रूप से प्रभावित करता है। कार्यात्मक शैली मौजूदा मानों को बदलने के बजाय नए मान बनाने को प्राथमिकता देती है (अपरिवर्तनीयता)।
const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]सरणियों की प्रतिलिपि बनाने के लिए स्प्रेड
स्प्रेड ऑपरेटर ... सरणी की उथली प्रतिलिपि बनाता है, जिससे स्रोत को छुए बिना तत्व जोड़े जा सकते हैं।
const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]ऑब्जेक्ट की प्रतिलिपि बनाने के लिए स्प्रेड
स्प्रेड ऑब्जेक्ट के लिए भी काम करता है। यह समान गुणों वाला नया ऑब्जेक्ट बनाता है और उसमें दिए गए नए मान भी शामिल कर देता है।
const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user); // unchangedबदलाव न करने वाली सरणी विधियाँ
नई सरणियाँ लौटाने वाली विधियों को प्राथमिकता दें: map, filter, concat, slice। push, splice और उसी सरणी में काम करने वाले sort जैसी विधियों से बचें।
const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a); // [3, 1, 2]अपरिवर्तनीय रूप से जोड़ना
push के बजाय स्प्रेड या concat से नई सरणी बनाएँ।
const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]अपरिवर्तनीय रूप से हटाना
splice के बजाय किसी तत्व के बिना नई सरणी बनाने के लिए filter का उपयोग करें।
const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]किसी आइटम को अपरिवर्तनीय रूप से अपडेट करना
किसी एक तत्व को बदलने के लिए सरणी पर map चलाएँ और मेल खाने वाले आइटम के लिए नया मान लौटाएँ।
const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map((t) =>
t.id === 1 ? { ...t, done: true } : t
);
console.log(updated[0].done); // trueउथली बनाम गहरी प्रतिलिपि
स्प्रेड केवल एक स्तर तक गहरी प्रतिलिपि बनाता है। नेस्टेड ऑब्जेक्ट के संदर्भ फिर भी साझा रहते हैं। नेस्टेड डेटा को अपरिवर्तनीय रूप से अपडेट करने के लिए, जिस हर स्तर में बदलाव करें वहाँ स्प्रेड का उपयोग करें।
const state = { user: { name: "Ada", age: 36 } };
const next = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age); // 37सुरक्षा के लिए फ़्रीज़ करना
Object.freeze रनटाइम पर ऑब्जेक्ट में आकस्मिक बदलाव रोकता है और अपरिवर्तनीयता को स्पष्ट बनाता है (एक स्तर तक)।
const config = Object.freeze({ env: "prod" });
config.env = "dev"; // ignored in non-strict mode
console.log(config.env); // "prod"Const अपरिवर्तनीयता नहीं है
एक आम भ्रम यह है कि const केवल चर को फिर से मान देने से रोकता है, उसमें रखे मान को बदलने से नहीं। const से घोषित सरणी में फिर भी push किया जा सकता है।
const arr = [1, 2];
arr.push(3); // allowed - value mutated
console.log(arr); // [1, 2, 3]
// arr = [] would throwलाभों का पुनरावलोकन
अपरिवर्तनीय अपडेट से बदलावों पर नज़र रखना आसान होता है (संदर्भों की तुलना करें), पूर्ववत/फिर से करने की सुविधा मिलती है, दूर की जगह पर होने वाले अप्रत्याशित प्रभाव रुकते हैं और इनका मेल शुद्ध फ़ंक्शन के साथ स्वाभाविक रूप से बैठता है।
const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect changeत्वरित जाँच
बदलाव से बचना।
पुनरावलोकन
अपरिवर्तनीयता का अर्थ है बदलाव करने के बजाय नए मान बनाना। सरणियों और ऑब्जेक्ट की प्रतिलिपि बनाने के लिए स्प्रेड का उपयोग करें, बदलाव न करने वाली विधियों (map, filter, concat) को प्राथमिकता दें और नेस्टेड अपडेट के लिए हर स्तर पर स्प्रेड का उपयोग करें। याद रखें, const फिर से मान देने को रोकता है, बदलाव को नहीं; Object.freeze रनटाइम सुरक्षा बढ़ाता है। अपरिवर्तनीय अपडेट से बदलाव पहचानना और शुद्ध कोड लिखना आसान हो जाता है।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 59
- पाठ
- 200
अक्सर पूछे जाने वाले प्रश्न
क्या “म्यूटेशन से बचना” पाठ निःशुल्क है?
हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “म्यूटेशन से बचना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“म्यूटेशन से बचना” में मैं क्या सीखूँगा?
डेटा को बदलने के बजाय उसकी प्रतियों के साथ काम कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“म्यूटेशन से बचना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।