जावास्क्रिप्टचे व्हेरिएबल डिक्लेर करायचे ३ वेगवेगळे मार्ग

गेल्या काही दशकात सगळ्यात जास्त जी प्रोग्रामिंगची भाषा बदलली असेल तर ती आहे जावास्क्रिप्ट.

ज्यांनी १० वर्षांपूर्वी जावास्क्रिप्ट वापरायला चालू केली असेल त्यांनी आज जर जावास्क्रिप्ट पहिली असेल तर त्यात जमीन आस्मान चा फरक आहे.

तर या लेखामध्ये आपण अशाच एका नवीन गोष्टीची चर्चा करणार आहोत. ते म्हणजे व्हेरिएबल डिक्लेर करण्याचे काही नवीन प्रकार.

ES2015 (ES6) सह, बरीच नवीन वैशिष्ट्ये समोर आली आहेत. आणि आता, 2020 पासून, असे गृहीत धरले जाते की बरेच JavaScript डेव्हलपर या वैशिष्ट्यांशी आता चांगलेच परिचित झाले आहेत.

जरी हे गृहितक अंशतः खरे असले तरी, तरीही हे शक्य आहे की यापैकी काही वैशिष्ट्ये बऱ्याच नवीन डेव्हलपरना माहीत नाहीत.

ES6 सह आलेल्या वैशिष्ट्यांपैकी एक म्हणजे 'let' आणि 'const', जे आपण व्हेरिएबल डिक्लेरेशनसाठी वापरतो.

प्रश्न असा आहे की, आपण आधी वापरत असलेल्या var पेक्षा ते वेगळे काय आहे? आपण अद्याप याबद्दल स्पष्ट माहिती नसल्यास, हा लेख आपल्यासाठी आहे.

या लेखात, आपण त्यांची व्याप्ती आणि वापर यावर चर्चा करू.

तुम्ही वाचत असताना, त्यांच्यातील फरक लक्षात घ्या जेणेकरून हा कन्सेप्ट तुम्हाला स्पष्ट होईल.

var  

ES6 च्या आगमनापूर्वी, var डिक्लेरेशनच फक्त वापरले जायचे.

पण var सह घोषित व्हेरिएबल्सशी संबंधित अनेक समस्या होत्या, तरीही दुसरा काही पर्याय नसल्यामुळे var वापरणे गरजेचे होते.

म्हणूनच व्हेरिएबल्स घोषित करण्याचे नवीन मार्ग उदयास येणे आवश्यक होते. प्रथम, त्या मुद्द्यांवर चर्चा करण्यापूर्वी var अधिक समजून घेऊ.

var ची  व्याप्ती 

स्कोपचा अर्थ मूलत: हे व्हेरिएबल्स कुठे वापरण्यासाठी उपलब्ध आहेत. var डिक्लेरेशनचा स्कोप अर्थात व्याप्ती हि ग्लोबल आहे. म्हणजे ते व्हेरिएबल सगळी कडे उपलब्ध होते.

जेव्हा var व्हेरिएबल फंक्शनच्या बाहेर घोषित केले जाते, तेव्हा व्याप्ती ग्लोबल असते. याचा अर्थ फंक्शन ब्लॉकच्या बाहेर var ने डिक्लेरेशन केलेले कोणतेही व्हेरिएबल संपूर्ण विंडोमध्ये वापरण्यासाठी उपलब्ध आहे.

जेव्हा फंक्शनमध्ये घोषित केले जाते तेव्हा var हे फंक्शन स्कोप्ड असते. याचा फक्त त्या फंक्शनमध्येच वापरले जाऊ शकतो.

अधिक समजून घेण्यासाठी, खालील उदाहरण पहा.

var sayHi = "Hey, hi"; function testFunction() { var sayHello = "hello"; }

येथे, sayHi चा ग्लोबल स्कोप आहे कारण ते फंक्शनच्या बाहेर आहे. तर हॅलो हे फंक्शन स्कोप केलेले आहे. त्यामुळे आपण फंक्शनच्या बाहेर हॅलो व्हेरिएबल ऍक्सेस करू शकत नाही. म्हणून जर आपण हे केले तर:

var sayHi = "Hey, hi"; function testFunction() { var sayHello = "hello"; } console.log(say Hello); // error in this case is "hello is not defined"

येथे आपल्याला एक एरर येईल कारण hello हे व्हेरिएबल फंक्शनच्या बाहेर उपलब्ध नाही.

var व्हेरिएबल्स पुन्हा घोषित आणि अपडेट केले जाऊ शकतात

खालील उदाहरणामध्ये तुम्ही ते बघू शकता.

var sayHi = "hey hi"; var sayHi = "say Hello instead";

हे असे पण लिहू शकतो.

var sayHi = "hey hi"; sayHi = "say Hello instead";

var चे  hoisting

Hoisting ही एक JavaScript ची संकल्पना आहे जिथे कोड कार्यान्वित करण्यापूर्वी व्हेरिएबल्स आणि फंक्शन डिक्लेरेशन्स त्यांच्या स्कोपच्या वरती हलवले जातात.

याचा अर्थ असा की जर आपण हे केले तर.

console.log (sayHi); var sayHi = "say hello"

याचा अर्थ जावास्क्रिप्ट असा काढते.

var sayHi; console.log(sayHi); // error we get here is: say Hi, undefined, say Hi = "say hello"

म्हणून var व्हेरिएबल्स त्यांच्या स्कोपच्या शीर्षस्थानी ठेवल्या जातात आणि 'undefined' या व्हॅल्यूने declare केल्या जातात.

var च्या समस्या 

var वापरण्याच्या अनेक समस्या आहेत. त्यापैकी काही आपण खाली बघूया.

var sayHi = "Hey, hi"; var count = 4; if (count > 3) { var sayHi = "say Hello instead"; } console.log(sayHi) // console will log: "say Hello instead"

त्यामुळे, count > 3 true आल्याने, sayHi ची व्याख्या "say Hello instead" अशी केली जाते.

आपण जाणूनबुजून sayHi पुन्हा परत define करू इच्छित असल्यास ही समस्या नसली तरी, जेव्हा आपणास हे समजत नाही की व्हेरिएबल ग्रीटर आधीच define केले गेले आहे तेव्हा ही समस्या बनते.

जर तुम्ही तुमच्या कोडच्या इतर भागांमध्ये sayHi वापरले असेल, तर तुम्हाला मिळणाऱ्या आउटपुटबद्दल तुम्हाला आश्चर्य वाटेल.

यामुळे तुमच्या कोडमध्ये बरेच बग येऊ शकतात. म्हणूनच let आणि const आवश्यक आहे.

let  

let व्हेरिएबल डिक्लेरेशन आता सर्रास वापरले जाते. आणि त्यात आश्चर्य काहीच नाही कारण ते var डिक्लेरेशनला एक सुधारित पर्याय म्हणून उपलब्ध आहे. 

आपण आत्ताच कव्हर केलेल्या var डिक्लेरेशन समस्येचे निराकरण देखील करते. हे असे का आहे याचा विचार करूया.

let चा ब्लॉक स्कोप आहे 

ब्लॉक हा {} ने बांधलेला कोडचा भाग आहे. एक ब्लॉक curly braces मध्ये राहतो. curly braces मधील कोणतीही गोष्ट एक ब्लॉक आहे.

त्यामुळे let डिक्लेरेशन ब्लॉकमध्ये घोषित केलेले व्हेरिएबल फक्त त्या ब्लॉकमध्ये वापरण्यासाठी उपलब्ध आहे. मी हे एका उदाहरणासह स्पष्ट करतो.

let sayHi = "say Hi"; let count = 4; if (count > 3) { let say Hello = "say Hello instead"; console.log(say) Hello);// "Say 'Hello' instead" } console.log(say Help) // error we get here is 'hello' is not defined

आपण पाहतो की त्याच्या ब्लॉकच्या बाहेर say Hello वापरल्याने (curly ब्रेसेस जिथे ते परिभाषित केले होते) एरर देतोे. कारण हे व्हेरिएबल global स्कोप मध्ये नसून ब्लॉक स्कोप मध्ये आहे.

let अपडेट केले जाऊ शकते परंतु पुन्हा declare केले जाऊ शकत नाही. 

var प्रमाणेच let डिक्लेर केलेले व्हेरिएबल त्याच्या स्कोपमध्ये अपडेट केले जाऊ शकते.

var च्या विरुद्ध, let व्हेरिएबल त्याच्या स्कोपमध्ये पुन्हा घोषित केले जाऊ शकत नाही.

खालील कोड काम करेल पण

let sayHi = "say Hi"; sayHi = "say Hello instead";

पण हा कोड कमी नाही करणार आणि एरर देईल

let sayHi = "say Hi"; let sayHi = "say Hello instead"; // error: Identifier 'sayHi' has already been declared

तथापि, समान व्हेरिएबल वेगवेगळ्या स्कोपमध्ये declare केले असल्यास, कोणतीही एरर येणार नाही:

let sayHi = "say Hi"; if (true) { let sayHi = "say Hello instead"; console.log(sayHi); // "say Hello instead" } console.log(sayHi); // "say Hi"

कोणतीही एरर का नाही? याचे कारण असे आहे की दोन्ही उदाहरणे भिन्न व्हेरिएबल्स म्हणून मानली जातात कारण त्यांची व्याप्ती (स्कोप) भिन्न आहे.

ही वस्तुस्थिती var पेक्षा let एक उत्तम पर्याय म्हणून वर येते. let वापरताना, जर तुम्ही व्हेरिएबलसाठी नाव वापरले असेल तर तुम्हाला त्रास करून घेण्याची गरज नाही, कारण व्हेरिएबल फक्त त्याच्या स्कोपमध्ये अस्तित्वात आहे.

तसेच, एक व्हेरिएबल एका कार्यक्षेत्रात एकापेक्षा जास्त वेळा घोषित केले जाऊ शकत नाही, तर आधी चर्चा केलेली त्यामुळे var सारखी समस्या येत नाही.

Let's hoist  

var प्रमाणे, let पण वर hoistहोते.

पण var जिथे undefined म्हणून initialised होतो, तिथे let कीवर्ड सुरु केला जात नाही.

त्यामुळे तुम्ही घोषणा करण्यापूर्वी let व्हेरिएबल वापरण्याचा प्रयत्न केल्यास, तुम्हाला एक Reference Error येईल.

const 

'const' ने डिक्लेअर केलेले व्हेरिएबलची value आपण बदलू शकत नाही. त्यामध्ये एकदा कुठलीही value टाकली तरी शेवट पर्यंत ती तीच राहते.

const आणि let declarations सोबत काही समानता आहेत.

const ब्लॉक स्कोप्ड आहे.

let declarations प्रमाणे, const declarations फक्त ते घोषित केलेल्या ब्लॉकमध्येच मिळू शकतात.

'const' redefine किंवा पुन्हा declare केले जाऊ शकत नाही 

याचा अर्थ const ने घोषित केलेल्या व्हेरिएबलचे मूल्य त्याच्या कार्यक्षेत्रात समान राहते. ते अद्यतनित किंवा पुन्हा घोषित केले जाऊ शकत नाही. जर आपण const सह व्हेरिएबल घोषित केले, तर आपण हे करू शकत नाही:

const sayHi = "say Hi"; sayHi = "say Hello instead"; // error: Assignment to constant variable.

किंवा हे पण करू शकत नाही

const sayHi = "say Hi"; const sayHi = "say Hello instead". // error: Identifier sayHi has already been declared

म्हणून प्रत्येक कॉन्स्ट डिक्लेरेशन, डिक्लेरेशनच्या वेळी इनिशियलाइज करणे आवश्यक आहे.

const ने घोषित केलेल्या objects बाबतीत हे वर्तन काहीसे वेगळे असते.

कॉन्स्ट ऑब्जेक्ट अपडेट करता येत नसला तरी, या ऑब्जेक्टच्या कीज अपडेट केल्या जाऊ शकतात. म्हणून, जर आपण कॉन्स्ट ऑब्जेक्ट असे घोषित केले तर:

const sayHi = { message: "say Hi", times: 4 }

आपण खालील गोष्ट करू शकत नाही

sayHi = { words: "Hello", number: "five" } // error: Assignment to constant variable.

पण असे मात्र नक्की करू शकतो

sayHi.message = "say Hello instead";

हे sayHi. message ची value कुठल्याही एरर शिवाय अपडेट करेल.

const चे hoisting

Let प्रमाणे const पण hoist केले जाते, but it is not initialised.

काही महत्वाच्या गोष्टी पुन्हा एकदा

१. var declaration हे  ग्लोबली स्कोप्ड किंवा फंक्शन स्कोप्ड असतात तर let आणि const ब्लॉक स्कोप्ड आहेत.

२. 'var' व्हेरिएबल्स redefine केले जाऊ शकतात आणि त्याच्या कार्यक्षेत्रात पुन्हा घोषित केले जाऊ शकतात; 'let' अपडेट केले जाऊ शकते परंतु पुन्हा घोषित केले जाऊ शकत नाही; 'const' व्हेरिएबल्स redefine किंवा अपडेट केले जाऊ शकत नाहीत.

३. ते सर्व hoist केले जातात, परंतु var व्हेरिएबल्स undefined सह initialise केलेले असतात, तर let आणि const नाही.

४. var आणि let प्रारंभ केल्याशिवाय घोषित केले जाऊ शकतात, तर declare करताना const सुरू करणे आवश्यक आहे.

असाच जर तुम्हाला जावास्क्रिप्टच सखोल ज्ञान घ्यायचा असेल तर नक्की आपल्या जावास्क्रिप्ट च्या मराठी मधून असलेल्या कोर्सच्या free trial ला खाली क्लिक करून फायदा घ्या.