ஜாவாஸ்கிரிப்ட் க்ளோஷர்கள்: நடைமுறை உதாரணங்களுடன் தெளிவுபடுத்துதல்

க்ளோஷர்கள் ஜாவாஸ்கிரிப்டில் ஒரு அடிப்படைக் கருத்தாகும், இது அனைத்து நிலைகளிலும் உள்ள டெவலப்பர்களுக்கு அடிக்கடி குழப்பத்தை ஏற்படுத்துகிறது. திறமையான, பராமரிக்கக்கூடிய மற்றும் பாதுகாப்பான குறியீட்டை எழுதுவதற்கு க்ளோஷர்களைப் புரிந்துகொள்வது மிகவும் முக்கியமானது. இந்த விரிவான வழிகாட்டி நடைமுறை உதாரணங்களுடன் க்ளோஷர்களை தெளிவுபடுத்தி, அவற்றின் நிஜ உலகப் பயன்பாடுகளை விளக்கும்.

க்ளோஷர் என்றால் என்ன?

சுருக்கமாகச் சொன்னால், ஒரு க்ளோஷர் என்பது ஒரு ஃபங்ஷன் மற்றும் அந்த ஃபங்ஷன் அறிவிக்கப்பட்ட லெக்சிகல் சூழலின் கலவையாகும். இதன் பொருள், வெளி ஃபங்ஷன் செயல்படுத்தப்பட்டு முடிந்த பிறகும், ஒரு க்ளோஷர் அதன் சுற்றியுள்ள ஸ்கோப்பிலிருந்து மாறிகளை அணுக அனுமதிக்கிறது. இதை, உள் ஃபங்ஷன் அதன் சூழலை "நினைவில்" வைத்திருப்பதாகக் கருதலாம்.

இதை முழுமையாகப் புரிந்துகொள்ள, முக்கிய கூறுகளைப் பிரித்துப் பார்ப்போம்:

• ஃபங்ஷன்: க்ளோஷரின் ஒரு பகுதியாக உருவாகும் உள் ஃபங்ஷன்.
• லெக்சிகல் சூழல்: ஃபங்ஷன் அறிவிக்கப்பட்ட சுற்றியுள்ள ஸ்கோப். இதில் மாறிகள், ஃபங்ஷன்கள் மற்றும் பிற அறிவிப்புகள் அடங்கும்.

வெளி ஃபங்ஷன் திரும்பிய பிறகும், உள் ஃபங்ஷன் அதன் லெக்சிகல் ஸ்கோப்பில் உள்ள மாறிகளுக்கான அணுகலைத் தக்க வைத்துக் கொள்வதால்தான் இந்த மேஜிக் நடக்கிறது. இந்த நடத்தை ஜாவாஸ்கிரிப்ட் ஸ்கோப் மற்றும் மெமரி நிர்வாகத்தைக் கையாளும் விதத்தின் முக்கிய பகுதியாகும்.

க்ளோஷர்கள் ஏன் முக்கியமானவை?

க்ளோஷர்கள் ஒரு தத்துவார்த்த கருத்து மட்டுமல்ல; ஜாவாஸ்கிரிப்டில் உள்ள பல பொதுவான புரோகிராமிங் பேட்டர்ன்களுக்கு அவை அவசியமானவை. அவை பின்வரும் நன்மைகளை வழங்குகின்றன:

• தரவு என்கேப்சுலேஷன்: க்ளோஷர்கள் தனிப்பட்ட மாறிகள் மற்றும் மெத்தட்களை உருவாக்க உங்களை அனுமதிக்கின்றன, வெளிப்புற அணுகல் மற்றும் மாற்றத்திலிருந்து தரவைப் பாதுகாக்கின்றன.
• நிலை பாதுகாப்பு: க்ளோஷர்கள் ஃபங்ஷன் அழைப்புகளுக்கு இடையில் மாறிகளின் நிலையை பராமரிக்கின்றன, இது கவுண்டர்கள், டைமர்கள் மற்றும் பிற ஸ்டேட்புல் கூறுகளை உருவாக்க பயனுள்ளதாக இருக்கும்.
• உயர்-நிலை ஃபங்ஷன்கள்: க்ளோஷர்கள் பெரும்பாலும் உயர்-நிலை ஃபங்ஷன்களுடன் (பிற ஃபங்ஷன்களை ஆர்கியுமென்ட்களாக எடுக்கும் அல்லது ஃபங்ஷன்களைத் திருப்பியளிக்கும் ஃபங்ஷன்கள்) இணைந்து பயன்படுத்தப்படுகின்றன, இது சக்திவாய்ந்த மற்றும் நெகிழ்வான குறியீட்டை செயல்படுத்துகிறது.
• ஒத்திசைவற்ற ஜாவாஸ்கிரிப்ட்: கால்பேக்குகள் மற்றும் ப்ராமிஸ்கள் போன்ற ஒத்திசைவற்ற செயல்பாடுகளை நிர்வகிப்பதில் க்ளோஷர்கள் முக்கிய பங்கு வகிக்கின்றன.

ஜாவாஸ்கிரிப்ட் க்ளோஷர்களின் நடைமுறை உதாரணங்கள்

க்ளோஷர்கள் எவ்வாறு செயல்படுகின்றன மற்றும் அவை நிஜ உலக சூழ்நிலைகளில் எவ்வாறு பயன்படுத்தப்படலாம் என்பதை விளக்க சில நடைமுறை உதாரணங்களைப் பார்ப்போம்.

உதாரணம் 1: எளிய கவுண்டர்

இந்த உதாரணம் ஒரு க்ளோஷர் ஃபங்ஷன் அழைப்புகளுக்கு இடையில் அதன் நிலையை பராமரிக்கும் ஒரு கவுண்டரை உருவாக்க எவ்வாறு பயன்படுத்தப்படலாம் என்பதைக் காட்டுகிறது.

function createCounter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const increment = createCounter();

increment(); // வெளியீடு: 1
increment(); // வெளியீடு: 2
increment(); // வெளியீடு: 3

விளக்கம்:

• createCounter() என்பது count என்ற மாறியை அறிவிக்கும் ஒரு வெளி ஃபங்ஷன்.
• இது count-ஐ அதிகரித்து அதன் மதிப்பைப் பதிவுசெய்யும் ஒரு உள் ஃபங்ஷனை (இந்த வழக்கில் ஒரு அநாமதேய ஃபங்ஷன்) திருப்பியளிக்கிறது.
• உள் ஃபங்ஷன் count மாறி மீது ஒரு க்ளோஷரை உருவாக்குகிறது.
• createCounter() செயல்படுத்தப்பட்டு முடிந்த பிறகும், உள் ஃபங்ஷன் count மாறிக்கான அணுகலைத் தக்க வைத்துக் கொள்கிறது.
• increment()-க்கு ஒவ்வொரு அழைப்பும் அதே count மாறியை அதிகரிக்கிறது, இது க்ளோஷரின் நிலையைப் பாதுகாக்கும் திறனை நிரூபிக்கிறது.

உதாரணம் 2: தனிப்பட்ட மாறிகளுடன் டேட்டா என்கேப்சுலேஷன்

க்ளோஷர்கள் தனிப்பட்ட மாறிகளை உருவாக்க பயன்படுத்தப்படலாம், இது ஃபங்ஷனுக்கு வெளியே இருந்து நேரடி அணுகல் மற்றும் மாற்றத்திலிருந்து தரவைப் பாதுகாக்கிறது.

function createBankAccount(initialBalance) {
  let balance = initialBalance;

  return {
    deposit: function(amount) {
      balance += amount;
      return balance; //விளக்கத்திற்காக திருப்பியளிக்கப்படுகிறது, void ஆக இருக்கலாம்
    },
    withdraw: function(amount) {
      if (amount <= balance) {
        balance -= amount;
        return balance; //விளக்கத்திற்காக திருப்பியளிக்கப்படுகிறது, void ஆக இருக்கலாம்
      } else {
        return "Insufficient funds.";
      }
    },
    getBalance: function() {
      return balance;
    }
  };
}

const account = createBankAccount(1000);

console.log(account.deposit(500)); // வெளியீடு: 1500
console.log(account.withdraw(200)); // வெளியீடு: 1300
console.log(account.getBalance()); // வெளியீடு: 1300

// balance-ஐ நேரடியாக அணுக முயற்சிப்பது வேலை செய்யாது
// console.log(account.balance); // வெளியீடு: undefined

விளக்கம்:

• createBankAccount() டெபாசிட் செய்தல், திரும்பப் பெறுதல் மற்றும் பேலன்ஸ் பெறுவதற்கான மெத்தட்களுடன் ஒரு வங்கி கணக்கு ஆப்ஜெக்டை உருவாக்குகிறது.
• balance மாறி createBankAccount()-ன் ஸ்கோப்பிற்குள் அறிவிக்கப்பட்டுள்ளது மற்றும் வெளியில் இருந்து நேரடியாக அணுக முடியாது.
• deposit, withdraw, மற்றும் getBalance மெத்தட்கள் balance மாறி மீது க்ளோஷர்களை உருவாக்குகின்றன.
• இந்த மெத்தட்கள் balance மாறியை அணுகலாம் மற்றும் மாற்றலாம், ஆனால் மாறி தனிப்பட்டதாகவே உள்ளது.

உதாரணம் 3: ஒரு லூப்பில் `setTimeout` உடன் க்ளோஷர்களைப் பயன்படுத்துதல்

லூப்களுக்குள் `setTimeout` போன்ற ஒத்திசைவற்ற செயல்பாடுகளுடன் பணிபுரியும் போது க்ளோஷர்கள் அவசியமானவை. க்ளோஷர்கள் இல்லாமல், ஜாவாஸ்கிரிப்டின் ஒத்திசைவற்ற தன்மையால் எதிர்பாராத நடத்தையை நீங்கள் சந்திக்க நேரிடலாம்.

for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log("Value of i: " + j);
    }, j * 1000);
  })(i);
}

// வெளியீடு:
// Value of i: 1 (1 வினாடிக்குப் பிறகு)
// Value of i: 2 (2 வினாடிகளுக்குப் பிறகு)
// Value of i: 3 (3 வினாடிகளுக்குப் பிறகு)
// Value of i: 4 (4 வினாடிகளுக்குப் பிறகு)
// Value of i: 5 (5 வினாடிகளுக்குப் பிறகு)

விளக்கம்:

• க்ளோஷர் இல்லாமல் (உடனடியாக அழைக்கப்படும் ஃபங்ஷன் எக்ஸ்பிரஷன் அல்லது IIFE), அனைத்து setTimeout கால்பேக்குகளும் இறுதியில் அதே i மாறியைக் குறிப்பிடும், இது லூப் முடிந்த பிறகு 6 என்ற இறுதி மதிப்பைக் கொண்டிருக்கும்.
• IIFE லூப்பின் ஒவ்வொரு மறு செய்கைக்கும் ஒரு புதிய ஸ்கோப்பை உருவாக்குகிறது, i-ன் தற்போதைய மதிப்பை j பாராமீட்டரில் பிடிக்கிறது.
• ஒவ்வொரு setTimeout கால்பேக்கும் j மாறி மீது ஒரு க்ளோஷரை உருவாக்குகிறது, இது ஒவ்வொரு மறு செய்கைக்கும் i-ன் சரியான மதிப்பை பதிவு செய்வதை உறுதி செய்கிறது.

லூப்பில் var-க்கு பதிலாக let-ஐப் பயன்படுத்துவதும் இந்த சிக்கலை சரிசெய்யும், ஏனெனில் let ஒவ்வொரு மறு செய்கைக்கும் ஒரு பிளாக் ஸ்கோப்பை உருவாக்குகிறது.

for (let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log("Value of i: " + i);
  }, i * 1000);
}

// வெளியீடு (மேலே உள்ளதைப் போலவே):
// Value of i: 1 (1 வினாடிக்குப் பிறகு)
// Value of i: 2 (2 வினாடிகளுக்குப் பிறகு)
// Value of i: 3 (3 வினாடிகளுக்குப் பிறகு)
// Value of i: 4 (4 வினாடிகளுக்குப் பிறகு)
// Value of i: 5 (5 வினாடிகளுக்குப் பிறகு)

உதாரணம் 4: கரியிங் மற்றும் பார்ஷியல் அப்ளிகேஷன்

பல ஆர்கியுமென்ட்களைக் கொண்ட ஃபங்ஷன்களை ஒவ்வொன்றும் ஒற்றை ஆர்கியுமென்டை எடுக்கும் ஃபங்ஷன்களின் வரிசையாக மாற்றப் பயன்படுத்தப்படும் கரியிங் மற்றும் பார்ஷியல் அப்ளிகேஷன் நுட்பங்களுக்கு க்ளோஷர்கள் அடிப்படையானவை.

function multiply(a) {
  return function(b) {
    return function(c) {
      return a * b * c;
    };
  };
}

const multiplyBy5 = multiply(5);
const multiplyBy5And2 = multiplyBy5(2);

console.log(multiplyBy5And2(3)); // வெளியீடு: 30 (5 * 2 * 3)

விளக்கம்:

• multiply என்பது ஒரு கரியிட் ஃபங்ஷன், இது மூன்று ஆர்கியுமென்ட்களை ஒவ்வொன்றாக எடுக்கிறது.
• ஒவ்வொரு உள் ஃபங்ஷனும் அதன் வெளி ஸ்கோப்பிலிருந்து (a, b) மாறிகள் மீது ஒரு க்ளோஷரை உருவாக்குகிறது.
• multiplyBy5 என்பது a ஏற்கனவே 5 ஆக அமைக்கப்பட்ட ஒரு ஃபங்ஷன் ஆகும்.
• multiplyBy5And2 என்பது a ஏற்கனவே 5 ஆகவும் b 2 ஆகவும் அமைக்கப்பட்ட ஒரு ஃபங்ஷன் ஆகும்.
• multiplyBy5And2(3)-க்கான இறுதி அழைப்பு கணக்கீட்டை நிறைவு செய்து முடிவைத் திருப்பியளிக்கிறது.

உதாரணம் 5: மாட்யூல் பேட்டர்ன்

மாட்யூல் பேட்டர்னில் க்ளோஷர்கள் பெரிதும் பயன்படுத்தப்படுகின்றன, இது ஜாவாஸ்கிரிப்ட் குறியீட்டை ஒழுங்கமைக்கவும் கட்டமைக்கவும் உதவுகிறது, மட்டுத்தன்மையை ஊக்குவிக்கிறது மற்றும் பெயரிடல் முரண்பாடுகளைத் தடுக்கிறது.

const myModule = (function() {
  let privateVariable = "வணக்கம், உலகமே!";

  function privateMethod() {
    console.log(privateVariable);
  }

  return {
    publicMethod: function() {
      privateMethod();
    },
    publicProperty: "இது ஒரு பொது சொத்து."
  };
})();

console.log(myModule.publicProperty); // வெளியீடு: இது ஒரு பொது சொத்து.
myModule.publicMethod(); // வெளியீடு: வணக்கம், உலகமே!

// privateVariable அல்லது privateMethod-ஐ நேரடியாக அணுக முயற்சிப்பது வேலை செய்யாது
// console.log(myModule.privateVariable); // வெளியீடு: undefined
// myModule.privateMethod(); // வெளியீடு: TypeError: myModule.privateMethod is not a function

விளக்கம்:

• IIFE ஒரு புதிய ஸ்கோப்பை உருவாக்குகிறது, privateVariable மற்றும் privateMethod-ஐ என்கேப்சுலேட் செய்கிறது.
• திருப்பியளிக்கப்பட்ட ஆப்ஜெக்ட் publicMethod மற்றும் publicProperty-ஐ மட்டுமே வெளிப்படுத்துகிறது.
• publicMethod ஆனது privateMethod மற்றும் privateVariable மீது ஒரு க்ளோஷரை உருவாக்குகிறது, IIFE செயல்படுத்தப்பட்ட பிறகும் அவற்றை அணுக அனுமதிக்கிறது.
• இந்த பேட்டர்ன் தனிப்பட்ட மற்றும் பொது உறுப்பினர்களுடன் ஒரு மாட்யூலை திறம்பட உருவாக்குகிறது.

க்ளோஷர்கள் மற்றும் மெமரி மேனேஜ்மென்ட்

க்ளோஷர்கள் சக்திவாய்ந்தவை என்றாலும், மெமரி மேலாண்மையில் அவற்றின் சாத்தியமான தாக்கம் குறித்து எச்சரிக்கையாக இருப்பது முக்கியம். க்ளோஷர்கள் தங்கள் சுற்றியுள்ள ஸ்கோப்பிலிருந்து மாறிகளுக்கான அணுகலைத் தக்க வைத்துக் கொள்வதால், அவை இனி தேவைப்படாத போது அந்த மாறிகள் குப்பை சேகரிக்கப்படுவதைத் தடுக்கலாம். கவனமாகக் கையாளப்படாவிட்டால் இது மெமரி கசிவுகளுக்கு வழிவகுக்கும்.

மெமரி கசிவுகளைத் தவிர்க்க, க்ளோஷர்களுக்குள் உள்ள மாறிகளுக்கான தேவையற்ற குறிப்புகளை இனி தேவைப்படாத போது உடைப்பதை உறுதிப்படுத்தவும். மாறிகளை null என அமைப்பதன் மூலம் அல்லது தேவையற்ற க்ளோஷர்களை உருவாக்குவதைத் தவிர்க்க உங்கள் குறியீட்டை மறுசீரமைப்பதன் மூலம் இதைச் செய்யலாம்.

தவிர்க்க வேண்டிய பொதுவான க்ளோஷர் தவறுகள்

• லெக்சிகல் ஸ்கோப்பை மறப்பது: ஒரு க்ளோஷர் அதன் *உருவாக்கத்தின் போது* சூழலைப் பிடிக்கிறது என்பதை எப்போதும் நினைவில் கொள்ளுங்கள். க்ளோஷர் உருவாக்கப்பட்ட பிறகு மாறிகள் மாறினால், க்ளோஷர் அந்த மாற்றங்களைப் பிரதிபலிக்கும்.
• தேவையற்ற க்ளோஷர்களை உருவாக்குதல்: க்ளோஷர்கள் தேவைப்படாவிட்டால் அவற்றை உருவாக்குவதைத் தவிர்க்கவும், ஏனெனில் அவை செயல்திறன் மற்றும் நினைவகப் பயன்பாட்டைப் பாதிக்கலாம்.
• மாறிகளை கசியவிடுதல்: க்ளோஷர்களால் பிடிக்கப்பட்ட மாறிகளின் ஆயுட்காலம் குறித்து கவனமாக இருங்கள் மற்றும் மெமரி கசிவுகளைத் தடுக்க இனி தேவைப்படாத போது அவை வெளியிடப்படுவதை உறுதிப்படுத்தவும்.

முடிவுரை

ஜாவாஸ்கிரிப்ட் க்ளோஷர்கள் எந்தவொரு ஜாவாஸ்கிரிப்ட் டெவலப்பரும் புரிந்துகொள்ள வேண்டிய ஒரு சக்திவாய்ந்த மற்றும் அத்தியாவசியமான கருத்தாகும். அவை தரவு என்கேப்சுலேஷன், நிலை பாதுகாப்பு, உயர்-நிலை ஃபங்ஷன்கள் மற்றும் ஒத்திசைவற்ற புரோகிராமிங்கை செயல்படுத்துகின்றன. க்ளோஷர்கள் எவ்வாறு செயல்படுகின்றன மற்றும் அவற்றை எவ்வாறு திறம்படப் பயன்படுத்துவது என்பதைப் புரிந்துகொள்வதன் மூலம், நீங்கள் அதிக திறமையான, பராமரிக்கக்கூடிய மற்றும் பாதுகாப்பான குறியீட்டை எழுத முடியும்.

இந்த வழிகாட்டி நடைமுறை உதாரணங்களுடன் க்ளோஷர்களின் விரிவான கண்ணோட்டத்தை வழங்கியுள்ளது. இந்த உதாரணங்களுடன் பயிற்சி மற்றும் பரிசோதனை செய்வதன் மூலம், க்ளோஷர்கள் பற்றிய உங்கள் புரிதலை ஆழப்படுத்தலாம் மற்றும் மேலும் திறமையான ஜாவாஸ்கிரிப்ட் டெவலப்பராக மாறலாம்.

மேலும் கற்க

• Mozilla Developer Network (MDN): க்ளோஷர்கள் - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
• You Don't Know JS: Scope & Closures by Kyle Simpson
• வெவ்வேறு க்ளோஷர் உதாரணங்களுடன் பரிசோதனை செய்ய CodePen மற்றும் JSFiddle போன்ற ஆன்லைன் கோடிங் தளங்களை ஆராயுங்கள்.