மேம்பட்ட ஜாவாஸ்கிரிப்ட் நேர்காணல் கேள்விகள் (Advanced JavaScript Interview Questions)

1. க்ளோஷர்கள் மற்றும் ஸ்கோப்பிங் (Closures and Scoping)

1.1. ஜாவாஸ்கிரிப்டில் க்ளோஷர் (closure) என்றால் என்ன? க்ளோஷர்களைப் பயன்படுத்துவது பயனுள்ளதாக இருக்கும் உதாரணத்தை வழங்கவும்.

பதில்: ஜாவாஸ்கிரிப்டில் க்ளோஷர் என்பது வெளிப்புறச் செயல்பாடு செயல்படுத்துவதை முடித்த பின்னரும் கூட, அதன் இணைக்கும் ஸ்கோப்பின் (enclosing scope) மாறிகளுக்கான அணுகலைக் கொண்ட ஒரு செயல்பாடாகும். இந்த வழிமுறை செயல்பாடுகளை நிறைவேற்றுதல்களுக்கு இடையில் நிலையைப் பராமரிக்க அனுமதிக்கிறது.

எடுத்துக்காட்டு: க்ளோஷர்களின் பொதுவான பயன்பாடுகளில் ஒன்று தொழிற்சாலை செயல்பாடுகள் (factory functions) அல்லது தனிப்பட்ட மாறிகள் (private variables) உருவாக்குவதாகும். எடுத்துக்காட்டாக, கூறுகளுக்கு (elements) தனிப்பட்ட ID மதிப்புகளை உருவாக்க விரும்பினால்:

function createUniqueIdGenerator() {
  let id = 0;
  return function() {
    return id++;
  };
}

const generateId = createUniqueIdGenerator();

console.log(generateId()); // 0
console.log(generateId()); // 1
console.log(generateId()); // 2

1.2. மாறிகளின் ஸ்கோப் (scope) மற்றும் வாழ்நாளுடன் (lifetime) க்ளோஷர்கள் எவ்வாறு தொடர்புடையவை?

பதில்: க்ளோஷர்கள் ஒரு செயல்பாட்டை அதன் லெக்சிகல் ஸ்கோப்பில் (lexical scope) உள்ள அனைத்து மாறிகள் மற்றும் செயல்பாடுகளை அணுக அனுமதிக்கின்றன, வெளிப்புறச் செயல்பாடு (outer function) முடிந்த பிறகும். இதன் விளைவாக மாறிகள் நினைவகத்தில் (memory) பாதுகாக்கப்படுகின்றன, பொதுவாகச் செயல்படும் நிலையான உள்ளூர் மாறிகளுடன் ஒப்பிடும்போது மாறிகள் நீண்ட வாழ்நாளைக் கொண்டிருக்க அனுமதிக்கிறது.

1.3. ஜாவாஸ்கிரிப்டில் க்ளோஷர்களின் பயன்பாடுகளுக்குச் சில உதாரணங்களைக் கொடுக்க முடியுமா?

பதில்: க்ளோஷர்களின் சில உதாரணங்கள் இங்கே.

• தொகுதி வடிவமைப்பு முறை (Module Design Pattern).
• கரியிங் (Currying).
• மெமோயிஸ் (Memoize)

2. முன்மாதிரி மரபுரிமை (Prototypal Inheritance)

2.1. கிளாசிக்கல் பரம்பரை (classical inheritance) மற்றும் முன்மாதிரி மரபுரிமை (prototypal inheritance) ஆகியவற்றுக்கு இடையேயான வேறுபாட்டை விளக்குங்கள்.

பதில்: கிளாசிக்கல் பரம்பரை என்பது ஜாவா அல்லது சி++ போன்ற பாரம்பரிய ஆப்ஜெக்ட்-ஓரியண்டட் புரோகிராமிங் (Object-Oriented Programming) மொழிகளில் அடிக்கடி காணப்படும் ஒரு கருத்தாகும், அங்கு ஒரு வர்க்கம் பெற்றோர் வகுப்பிலிருந்து (parent class) பண்புகள் (properties) மற்றும் முறைகளைப் (methods) பெறலாம் (inherit). மறுபுறம், முன்மாதிரி மரபுரிமை, ஜாவாஸ்கிரிப்டிற்குத் தனித்துவமானது. ஜாவாஸ்கிரிப்டில், ஒவ்வொரு பொருளும் (object) மற்றொரு பொருளை அதன் முன்மாதிரியாகக் (prototype) கொண்டிருக்கலாம், மேலும் அது அதன் முன்மாதிரியிலிருந்து பண்புகளைப் பெறலாம்.

முக்கிய வேறுபாடு என்னவென்றால், பாரம்பரிய மரபுரிமை வகுப்பு அடிப்படையிலானது (class-based), அதேசமயம் முன்மாதிரி மரபுரிமை பொருள் அடிப்படையிலானது (object-based). ES6 ஆனது ஜாவாஸ்கிரிப்டில் class முக்கியச்சொல்லை (keyword) அறிமுகப்படுத்தியிருந்தாலும், இது ஏற்கனவே உள்ள முன்மாதிரியான மரபுரிமையின் (prototypal inheritance) மீது சின்டாக்டிகல் சுகர் (syntactical sugar) ஆகும்.

2.2. உள்ளமைக்கப்பட்ட (built-in) ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட்களை எவ்வாறு நீட்டிக்கலாம் (extend)?

பதில்: உள்ளமைக்கப்பட்ட (built-in) ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட்களை (objects) நீட்டிக்க, அவற்றின் முன்மாதிரியில் (prototype) முறைகள் அல்லது பண்புகளைச் (methods or properties) சேர்க்கலாம். எவ்வாறாயினும், நேட்டிவ் முன்மாதிரிகளை (native prototypes) மாற்றுவது பொதுவாக ஊக்கமளிக்காது, ஏனெனில் இது இணக்கத்தன்மை (compatibility) சிக்கல்களுக்கும் எதிர்பாராத நடத்தைக்கும் வழிவகுக்கும், குறிப்பாக எதிர்காலத்தில் ஜாவாஸ்கிரிப்ட் விவரக்குறிப்பில் (JavaScript specification) மாற்றங்கள் இருந்தால்.

3. ஒத்திசைவற்ற ஜாவாஸ்கிரிப்ட் (Asynchronous JavaScript)

3.1. ஜாவாஸ்கிரிப்டில் நிகழ்வு சுழலை (event loop) விளக்குங்கள். இது அழைப்பு ஸ்டாக்குடன் (call stack) எவ்வாறு தொடர்புடையது?

பதில்: நிகழ்வு சுழல் (event loop) என்பது ஜாவாஸ்கிரிப்ட்டில் ஒரு அடிப்படைக் கருத்தாகும் மற்றும் காலப்போக்கில் பல நிரல் துண்டுகளை (chunks of program) செயல்படுத்துவதைக் கையாளுவதற்குப் பொறுப்பாகும், ஒவ்வொன்றும் முடிவடையும் வரை இயங்கும். செய்திக் கியூவில் (message queue) காத்திருக்கும் பணிகள் (tasks) உள்ளதா எனச் சரிபார்க்கும் தொடர்ச்சியான லூப்பாக (continuous loop) இது செயல்படுகிறது. பணிகள் இருந்தால் மற்றும் பிரதான த்ரெட் (அழைப்பு ஸ்டாக் - call stack) காலியாக இருந்தால், அது பணியைத் துண்டித்து (dequeues) செயல்படுத்துகிறது.

அழைப்பு அடுக்கு (call stack), மறுபுறம், ஒரு நிரலில் (program) செயல்பாடுகளை செயல்படுத்துவதைக் கண்காணிக்கும் தரவுக் கட்டமைப்பாகும் (data structure). ஒரு செயல்பாடு அழைக்கப்பட்டால், அது அழைப்பு அடுக்கில் (call stack) சேர்க்கப்படும், மேலும் அது முடிவடையும் போது, அது அடுக்கிலிருந்து அகற்றப்படும்.

ஜாவாஸ்கிரிப்ட்டின் சூழலில், நிகழ்வு சுழற்சியானது அழைப்பு அடுக்கு (call stack) காலியாக உள்ளதா என்பதைத் தீர்மானிக்கத் தொடர்ந்து சரிபார்க்கிறது. அது காலியாக இருந்தால் மற்றும் செய்தி வரிசையில் (message queue) கால்பேக் செயல்பாடுகள் (callback functions) காத்திருந்தால், அந்த கால்பேக்குகள் செயல்படுத்தப்படும்.

3.2. பிராமிஸ்கள் (promises) என்றால் என்ன, மற்றும் ஒத்திசைவற்ற செயல்பாடுகளைக் (asynchronous operations) நிர்வகிப்பதில் கால்பேக்குகளிலிருந்து (callbacks) அவை எவ்வாறு வேறுபடுகின்றன?

பதில்: பிராமிஸ்கள் என்பது ஒத்திசைவற்ற செயல்பாடு மற்றும் அதன் விளைவாக வரும் மதிப்பு (resulting value) ஆகியவற்றின் இறுதி முடிவை (அல்லது தோல்வி) குறிக்கும் பொருட்கள் (objects) ஆகும். ஒரு Promise பின்வரும் நிலைகளில் ஒன்றில் உள்ளது:

• நிலுவையில் உள்ளது (pending): ஆரம்ப நிலை, நிறைவேற்றப்படவுமில்லை, நிராகரிக்கப்படவுமில்லை.
• நிறைவேற்றப்பட்டது (fulfilled): பிராமிஸ் செய்யப்பட்ட செயல்பாடு முடிந்தது மற்றும் பிராமிஸ் இதன் விளைவாக ஒரு மதிப்பைக் கொண்டுள்ளது என்று அர்த்தம்.
• நிராகரிக்கப்பட்டது (rejected): செயல்பாடு தோல்வியடைந்தது, மற்றும் பிராமிஸ் ஒருபோதும் நிறைவேற்றப்படாது.

கால்பேக்குகள் (Callbacks) என்பவை செயல்பாடுகள் (functions) மற்றொன்றுச் செயல்பாட்டிற்கு வாதங்களாக (arguments) அனுப்பப்பட்டு, வெளிப்புறச் செயல்பாடு (outer function) முடிந்த பிறகு செயல்படுத்தப்படும். பிராமிஸ்கள் மற்றும் கால்பேக்குகள் இரண்டும் ஒத்திசைவற்ற செயல்பாடுகளைக் (asynchronous operations) கையாள முடியும் என்றாலும், பிராமிஸ்கள் அவற்றைக் கையாள்வதற்கான வலுவான (robust) வழியை வழங்குகின்றன.

முக்கிய வேறுபாடுகள் பின்வருமாறு:

• பிராமிஸ்கள் ஒத்திசைவற்ற செயல்பாடுகளை (asynchronous operations) சிறப்பாகச் சங்கிலியமைக்க (chaining) அனுமதிக்கின்றன.
• கால்பேக்குகள் (Callbacks) கால்பேக் நரகத்திற்கு (callback hell) அல்லது அழிவின் பிரமிடுக்கு (pyramid of doom) வழிவகுக்கும், அங்கு உள்ளமைக்கப்பட்ட கால்பேக்குகளால் குறியீட்டைப் படிக்கவும் நிர்வகிக்கவும் கடினமாகிவிடும்.
• பிராமிஸ்கள் .then மற்றும் .catch ஐப் பயன்படுத்தும் ஒரு தரப்படுத்தப்பட்ட பிழையைக் கையாளும் பொறிமுறையைக் (standardized error handling mechanism) கொண்டுள்ளன.

3.3. async/await விவரிக்கவும். ஒத்திசைவற்ற (asynchronous) குறியீட்டுடன் வேலை செய்வதை இது எவ்வாறு எளிதாக்குகிறது?

பதில்: async/await என்பது ஒத்திசைவற்ற குறியீட்டைக் (asynchronous code) கொண்டு மிகவும் ஒத்திசைவு போன்ற முறையில் (synchronous-like fashion) வேலை செய்ய ES8 (அல்லது ES2017) இல் அறிமுகப்படுத்தப்பட்ட ஒரு தொடரியல் அம்சமாகும் (syntactic feature). இது கால்பேக்குகள் இல்லாமல் ஒரு நேர்கோட்டு முறையில் ஒத்திசைவற்ற செயல்பாடுகளை எழுத அனுமதிக்கிறது, மேலும் சுத்தமான, படிக்கக்கூடிய குறியீட்டிற்கு வழிவகுக்கிறது.

ஒத்திசைவற்ற செயல்பாட்டை (asynchronous function) அறிவிக்க async முக்கியச்சொல் பயன்படுத்தப்படுகிறது, இது செயல்பாடு ஒரு பிராமிஸைத் (promise) தருவதை உறுதி செய்கிறது. ஒரு async செயல்பாட்டிற்குள், பிராமிஸ் தீர்க்கப்படும் (resolved) அல்லது நிராகரிக்கப்படும் (rejected) வரை செயல்படுத்துவதை இடைநிறுத்த (pause) await முக்கியச்சொல் பயன்படுத்தப்படுகிறது.

async/await ஐப் பயன்படுத்துவது பிழையைக் கையாளுவதை (error handling) எளிதாக்குகிறது, ஏனெனில் நாம் பிராமிஸ்களுடன் .catch க்குப் பதிலாகப் பாரம்பரிய try/catch தொகுதிகளைப் பயன்படுத்தலாம்.

4. மேம்பட்ட வரிசை முறைகள் (Advanced Array Methods)

4.1. map, reduce, மற்றும் filter ஆகியவற்றின் செயல்பாடுகளை விவரிக்கவும். ஒவ்வொன்றுக்கும் ஒரு நடைமுறைப் பயன்பாட்டின் (practical use case) உதாரணத்தை வழங்கவும்.

பதில்: map, reduce, மற்றும் filter செயல்பாடுகள் (functions) கீழே வரையறுக்கப்பட்டுள்ளன.

• map: இது ஒரு செயல்பாட்டின் அடிப்படையில் வரிசையின் (array) ஒவ்வொரு உறுப்பையும் உருமாற்றுகிறது (transforms), அதே நீளத்தின் புதிய வரிசையை வழங்குகிறது. எடுத்துக்காட்டு: வரிசையில் உள்ள ஒவ்வொரு எண்ணையும் இரட்டிப்பாக்குதல்.

  const numbers = [1, 2, 3, 4];
  const doubled = numbers.map((num) => num * 2); // [2, 4, 6, 8]
  

  ```
• reduce: இது ஒரு அக்யூமுலேட்டருக்கும் (accumulator) வரிசையில் உள்ள ஒவ்வொரு உறுப்புக்கும் (இடமிருந்து வலமாக) ஒரு செயல்பாட்டைப் பயன்படுத்துகிறது, அதைக் குறைத்து ஒற்றை மதிப்பாக (single value) மாற்றுகிறது. எடுத்துக்காட்டு: வரிசையில் உள்ள அனைத்து எண்களையும் சுருக்கவும் (Summing).

  const numbers = [1, 2, 3, 4];
  const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 10
  

• filter: இது ஒரு செயல்பாட்டினால் குறிப்பிடப்பட்ட சோதனையில் (test specified by a function) தேர்ச்சி பெறும் உறுப்புகளுடன் ஒரு புதிய வரிசையை (array) உருவாக்குகிறது. எடுத்துக்காட்டு: வரிசையில் உள்ள அனைத்து எண்களையும் சுருக்கவும் (Summing).

  const numbers = [1, 2, 3, 4, 5, 6];
  const evenNumbers = numbers.filter((num) => num % 2 === 0); // [2, 4, 6]
  

4.2. அம்பு செயல்பாடுகளைப் (arrow functions) பயன்படுத்தும் போது சில வரம்புகள் (limitations) அல்லது ஆபத்துகள் (pitfalls) என்ன?

பதில்: அம்பு செயல்பாடுகள் (Arrow functions) ஜாவாஸ்கிரிப்டில் செயல்பாடுகளை எழுதுவதற்கு ஒரு சுருக்கமான வழியை அறிமுகப்படுத்துகின்றன, ஆனால் அவை சில வரம்புகளுடன் (limitations) வருகின்றன:

1. சொந்த this பிணைப்பு இல்லை (No this Binding): அம்பு செயல்பாடுகள் அவற்றின் சொந்த this ஐப் பிணைக்காது (bind). அவை சுற்றியுள்ள ஸ்கோப்பின் (surrounding scope) this பிணைப்பைப் பெறுகின்றன. இது பிரச்சனைக்குரியதாக இருக்கலாம், குறிப்பாக ஆப்ஜெக்ட்களில் முறைகளாக (methods) அல்லது ஈவென்ட் ஹேண்ட்லர்களாக (event handlers) பயன்படுத்தும் போது.

2. சொந்த arguments ஆப்ஜெக்ட் இல்லை: அம்பு செயல்பாடுகளுக்கு அவற்றின் சொந்த arguments பொருள் (object) இல்லை. வாதங்கள் பொருளை (arguments object) நாம் அணுக வேண்டுமானால், நாம் பாரம்பரியச் செயல்பாட்டுக் கோவைகளைப் (traditional function expressions) பயன்படுத்த வேண்டும்.

3. கன்ஸ்ட்ரக்டர்களாகப் (Constructors) பயன்படுத்த முடியாது: அம்பு செயல்பாடுகளை new முக்கியச்சொல்லுடன் கன்ஸ்ட்ரக்டர்களாகப் பயன்படுத்த முடியாது, ஏனெனில் அவற்றிற்கு [[Construct]] அக முறை (internal method) இல்லை.

4. சொந்த prototype பண்பு இல்லை: வழக்கமான செயல்பாடுகளைப் (regular functions) போலன்றி, அம்பு செயல்பாடுகளுக்குப் prototype பண்பு (property) இல்லை.

5. சிக்கலான தர்க்கத்திற்கான குறைவான வாசிப்புத்திறன் (Less Readable for Complex Logic): எளிய செயல்பாடுகளுக்கு, சுருக்கமான தொடரியல் (concise syntax) நன்மை பயக்கும். இருப்பினும், சிக்கலான தர்க்கத்தைக் (complex logic) கொண்ட செயல்பாடுகளுக்கு, சுருக்கமான தொடரியல் குறியீட்டைக் குறைவான வாசிப்புத்திறன் கொண்டதாக மாற்றும்.

5. "this" முக்கியச்சொல் ("this" Keyword)

5.1. ஒரு முறை (method), தனியான செயல்பாடு (standalone function), அம்பு செயல்பாடு (arrow function) மற்றும் நிகழ்வு ஹேண்ட்லர் (event handler) போன்ற வெவ்வேறு சூழல்களில் (contexts) this முக்கியச்சொல்லின் (keyword) நடத்தையை விளக்குங்கள்.

பதில்: this வார்த்தையானது அது பயன்படுத்தப்படும் சூழலைப் (context) பொறுத்து மாறுபடும். அவற்றில் சில கீழே ஆராயப்பட்டுள்ளன:

• முறையில் (In Method): இது முறை (method) அழைக்கப்படும் பொருளைக் (object) குறிக்கிறது.

const person = {
  name: "Alice",
  sayHello: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.sayHello(); // Output: Hello, my name is Alice

• தனித்த செயல்பாட்டில் (In Standalone Function): இங்கே, this நடத்தை செயல்பாடு எவ்வாறு அழைக்கப்படுகிறது என்பதைப் பொறுத்தது. உலகளாவிய ஸ்கோப்பில் (global scope) செயல்பாடு அழைக்கப்பட்டால், this உலகளாவிய பொருளைக் (global object) குறிக்கும்.

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const name = "Alice";
greet(); // Output: Hello, my name is Alice

• அம்பு செயல்பாட்டில் (In Arrow Function): அம்பு செயல்பாடுகள் (Arrow functions) வழக்கமான செயல்பாடுகளைப் போலன்றி, சுற்றியுள்ள லெக்சிகல் ஸ்கோப்பில் (lexical scope) இருந்து இந்த மதிப்பைப் (this value) பிடிக்கின்றன. அதாவது, அவற்றின் சொந்த this சூழல் இல்லை.

const person = {
  name: "Bob",
  sayHello: () => {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.sayHello(); // Output: Hello, my name is undefined

5.2. ஒரு செயல்பாடு (function) ஒரு குறிப்பிட்ட பொருளை (specific object) அதன் this மதிப்பாகப் பயன்படுத்துவதை எவ்வாறு உறுதிப்படுத்துவது?

பதில்: bind, arrow functions, call, apply போன்ற முறைகளைப் பயன்படுத்தி அல்லது ES6 வகுப்புகளுக்குள் (classes) உள்ள முறைகளை வரையறுப்பதன் மூலம் ஜாவாஸ்கிரிப்ட்டில் ஒரு செயல்பாடு ஒரு குறிப்பிட்ட பொருளை (specific object) this மதிப்பாகப் பயன்படுத்துவதை நாம் உறுதிசெய்யலாம். செயல்பாடு இயங்கும் சூழலைக் (context) கட்டுப்படுத்தவும், விரும்பிய பொருளின் (object) பண்புகள் மற்றும் முறைகளை (properties and methods) அது அணுகுவதை உறுதி செய்யவும் இந்த நுட்பங்கள் நம்மை அனுமதிக்கின்றன.

6. நினைவக மேலாண்மை (Memory Management)

6.1. ஜாவாஸ்கிரிப்டில் நினைவகக் கசிவுகள் (memory leaks) என்றால் என்ன? சாத்தியமான காரணங்கள் மற்றும் அவற்றைத் தடுப்பது எப்படி என்று விவாதிக்கவும்.

பதில்: இனித் தேவைப்படாத ஆப்ஜெக்ட்களுக்கான குறிப்புகளை (references) நிரல் (program) தற்செயலாகத் தக்கவைத்துக் கொள்ளும்போது ஜாவாஸ்கிரிப்டில் நினைவகக் கசிவுகள் (Memory leaks) ஏற்படுகின்றன, இது நினைவகப் பயன்பாடு (memory usage) அதிகரிப்பதற்கும் சாத்தியமான பயன்பாட்டுச் சிக்கல்களுக்கும் வழிவகுக்கும். பயன்படுத்தப்படாத மாறிகள் (unused variables), க்ளோஷர்கள் (closures), நிகழ்வைக் கேட்பவர்கள் (event listeners) மற்றும் வட்டக் குறிப்புகள் (circular references) ஆகியவை பொதுவான காரணங்கள். நினைவகக் கசிவுகளைத் (memory leaks) தடுக்க, டெவலப்பர்கள் குறிப்புகளை வெளிப்படையாக அகற்ற வேண்டும், நிகழ்வு கேட்பவர்களை (event listeners) நிர்வகிக்க வேண்டும், வட்ட சார்புகளைத் (circular dependencies) தவிர்க்க வேண்டும், பலவீனமான குறிப்புகளைப் (weak references) பயன்படுத்த வேண்டும், நினைவக விவரக்குறிப்புக் கருவிகளைப் (memory profiling tools) பயன்படுத்த வேண்டும், சோதனை மற்றும் குறியீட்டு மதிப்பாய்வுகளை (code reviews) நடத்த வேண்டும், மேலும் மேம்பாட்டுச் செயல்முறையின் ஆரம்பத்தில் சாத்தியமான சிக்கல்களைக் கண்டறிய லிண்டர்கள் (linters) மற்றும் நிலையான பகுப்பாய்வுக் கருவிகளைப் (static analysis tools) பயன்படுத்த வேண்டும்.

6.2. ஆழமற்ற நகல் (shallow copy) மற்றும் ஆழமான நகல் (deep copy) ஆகியவற்றுக்கு இடையேயான வேறுபாட்டை விவரிக்கவும். ஜாவாஸ்கிரிப்டில் ஒவ்வொன்றையும் எப்படி அடைவது?

பதில்: ஆழமற்ற நகல் மற்றும் ஆழமான நகல் என்பவை ஜாவாஸ்கிரிப்டில் பொருள்கள் (objects) அல்லது வரிசைகளை (arrays) நகலெடுக்கும் (duplicating) முறைகள் ஆகும்.

ஆழமற்ற நகல் (Shallow copy) ஒரு பொருள் (object) அல்லது வரிசையின் மேல்-நிலை அமைப்பு (top-level structure) மற்றும் மதிப்புகளை நகலெடுக்கிறது ஆனால் உள்ளமைக்கப்பட்ட (nested) பொருள்கள் அல்லது வரிசைகளுக்கான குறிப்புகளைத் தக்க வைத்துக் கொள்கிறது. உள்ளமைக்கப்பட்ட (nested) கட்டமைப்புகளின் மாற்றங்கள் அசல் மற்றும் நகல் இரண்டையும் பாதிக்கின்றன. ஆழமான நகல் (Deep copy) ஒரு புதிய பொருள் அல்லது வரிசையை (array) உருவாக்குகிறது மற்றும் உள்ளமைக்கப்பட்ட கட்டமைப்புகளின் (nested structures) அனைத்து நிலைகளையும் மீண்டும் மீண்டும் நகலெடுக்கிறது (recursively duplicates), நகலில் ஏற்படும் மாற்றங்கள் அசலைப் பாதிக்காது என்பதை உறுதி செய்கிறது. ஆழமற்ற நகலை (shallow copy) அடைய, ஸ்ப்ரெட் ஆபரேட்டர் (spread operator) அல்லது slice() போன்ற முறைகளைப் பயன்படுத்தலாம். ஆழமான நகலுக்கு (deep copy), ஜாவாஸ்கிரிப்டில் உள்ளமைக்கப்பட்ட (built-in) ஆழமான நகல் முறைகள் இல்லாததால் தனிப்பயன் தர்க்கம் (custom logic) அல்லது லோடாஷின் (lodash) க்ளோன்டீப் (cloneDeep) போன்ற நூலகங்கள் (libraries) அவசியம்.

7. ES6 மற்றும் அதற்கு அப்பால் (ES6 and Beyond)

7.1. ஜாவாஸ்கிரிப்டின் டிஸ்ட்ரக்சரிங் ஒதுக்கீட்டின் (destructuring assignment) நோக்கம் மற்றும் பயன்பாட்டை விளக்குங்கள்.

பதில்: ஜாவாஸ்கிரிப்ட்டின் டிஸ்ட்ரக்சரிங் அசைன்மென்ட் (destructuring assignment) என்பது பொருள்களிலிருந்தும் (objects) வரிசைகளிலிருந்தும் (arrays) மதிப்புகளைப் பிரித்தெடுப்பதை எளிதாக்கும் ஒரு அம்சமாகும், இது குறியீட்டைச் சுருக்கமாகவும் (concise) படிக்கக்கூடியதாகவும் ஆக்குகிறது. சொத்து பெயர்கள் (பொருள் டிஸ்ட்ரக்சரிங் - object destructuring) அல்லது நிலை (வரிசை டிஸ்ட்ரக்சரிங் - array destructuring) அடிப்படையில் மாறிகளுக்கு மதிப்புகளை ஒதுக்க இது அனுமதிக்கிறது. டிஸ்ட்ரக்சரிங் செயல்பாட்டு அளவுருக்களிலும் (function parameters) பயன்படுத்தப்படலாம் மற்றும் மீதமுள்ள கூறுகளைப் பிடிக்க ரெஸ்ட் சின்டாக்ஸை (rest syntax) ஆதரிக்கிறது. சிக்கலான தரவுக் கட்டமைப்புகளுடன் (complex data structures) வேலை செய்வதற்கு இது ஒரு சக்திவாய்ந்த கருவியாகும்.

7.2. ஜாவாஸ்கிரிப்ட் தொகுதிகள் (modules) மற்றும் ES6 import/export தொடரியல் ஆகியவற்றின் முக்கியத்துவத்தை விவரிக்கவும்.

பதில்: நவீன ஜாவாஸ்கிரிப்ட் மேம்பாட்டிற்கு ES6 import/export தொடரியல் உடன், ஜாவாஸ்கிரிப்ட் தொகுதிகள் (modules) முக்கியமானவை. அவை குறியீட்டைத் திறம்பட ஒழுங்கமைக்கவும், மீண்டும் பயன்படுத்தவும் மற்றும் பராமரிக்கவும் டெவலப்பர்களுக்கு உதவுகின்றன. தொகுதிகள் (Modules) தொடர்புடைய குறியீட்டை இணைக்கின்றன (encapsulate), குறியீடு மறுபயன்பாட்டை (code reusability) மேம்படுத்துகின்றன, சார்புகளை (dependencies) நிர்வகிக்கின்றன மற்றும் குறியீடு அளவிடுதலை (code scalability) மேம்படுத்துகின்றன. ES6 இறக்குமதி/ஏற்றுமதி தொடரியல் (import/export syntax) தொகுதிகளை (modules) அறிவிப்பதற்கும் பயன்படுத்துவதற்கும் தரப்படுத்தப்பட்ட வழியை வழங்குகிறது, சுத்தமான மற்றும் பராமரிக்கக்கூடிய வகையில் குறியீட்டை கட்டமைத்து (structure) பகிர்வதை எளிதாக்குகிறது. கிளையன்ட் மற்றும் சர்வர் பக்கங்களில் மாடுலர் (modular) மற்றும் பராமரிக்கக்கூடிய (maintainable) ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை உருவாக்க இந்த அம்சங்கள் இன்றியமையாததாகிவிட்டன.

7.3. டெம்ப்ளேட் லிட்டரல்கள் (template literals) ES6 இல் சரம் கையாளுதலை (string manipulation) எவ்வாறு மேம்படுத்துகின்றன? உதாரணங்களை வழங்கவும்.

பதில்: ES6 இல் உள்ள டெம்ப்ளேட் லிட்டரல்கள் உட்பொதிக்கப்பட்ட வெளிப்பாடுகள் (embedded expressions) மற்றும் பல வரி உள்ளடக்கத்துடன் (multiline content) மிகவும் படிக்கக்கூடிய (readable) மற்றும் நெகிழ்வான முறையில் (flexible way) சரங்களை உருவாக்க டெவலப்பர்களை அனுமதிப்பதன் மூலம் சரம் கையாளுதலை மேம்படுத்துகிறது. அவை மாறக்கூடிய இடைச்செருகல் (variable interpolation), பல வரிச் சரங்கள் (multiline strings), வெளிப்பாடு மதிப்பீடு (expression evaluation), செயல்பாட்டு அழைப்புகள் (function calls) மற்றும் குறிக்கப்பட்ட டெம்ப்ளேட்கள் (tagged templates) போன்ற மேம்பட்ட பயன்பாட்டு நிகழ்வுகளை (use cases) ஆதரிக்கின்றன. டைனமிக் உள்ளடக்கம் (dynamic content) அல்லது வெளிப்பாடுகளை உள்ளடக்கிய சிக்கலான சரங்களுடன் (complex strings) பணிபுரியும் போது இந்த அம்சம் குறியீடு வாசிப்புத்திறன் (code readability) மற்றும் பராமரிப்பை (maintainability) மேம்படுத்துகிறது.

7.4. நான் let மற்றும் const மாறிகளை மறுஅறிவிப்பு (redeclare) செய்யலாமா?

பதில்: இல்லை, உங்களால் let மற்றும் const மாறிகளை (variables) மறுஅறிவிப்பு செய்ய முடியாது. நீங்கள் அவ்வாறு செய்தால், அது கீழே உள்ள பிழையை (error) எறிகிறது (throws).

Uncaught SyntaxError: Identifier 'someVariable' has already been declared

விளக்கம்: var முக்கியச்சொல்லுடன் (keyword) கூடிய மாறி அறிவிப்பு (variable declaration) ஒரு செயல்பாட்டு ஸ்கோப்பைக் (function scope) குறிக்கிறது மற்றும் ஹொயிஸ்டிங் (hoisting) அம்சம் காரணமாக மாறி ஸ்கோப்பின் உச்சியில் (top of the enclosing scope) அறிவிக்கப்பட்டதைப் போலக் கருதப்படும். எனவே எந்தப் பிழையும் இல்லாமல் ஒரே ஹொயிஸ்டட் மாறிக்கு (hoisted variable) பங்களிக்கும் பல அறிவிப்புகள் அனைத்தும். var மற்றும் let/const மாறிகள் இரண்டிற்கும் ஒரே ஸ்கோப்பில் (scope) மாறிகளை (variables) மீண்டும் அறிவிக்க ஒரு உதாரணத்தை எடுத்துக் கொள்வோம்.

var name = "John";
function myFunc() {
  var name = "Nick";
  var name = "Abraham"; // Re-assigned in the same function block
  alert(name); // Abraham
}
myFunc();
alert(name); // John

பிளாக்-ஸ்கோப்டு (block-scoped) பல-அறிவிப்பு (multi-declaration) தொடரியல் பிழையை (syntax error) எறிகிறது,

let name = "John";
function myFunc() {
  let name = "Nick";
  let name = "Abraham"; // Uncaught SyntaxError: Identifier 'name' has already been declared
  alert(name);
}

myFunc();
alert(name);

7.5. const மாறி மதிப்பை மாற்ற முடியாததாக (immutable) ஆக்குகிறதா?

பதில்: இல்லை, const மாறியானது மதிப்பை மாற்ற முடியாததாக (immutable) ஆக்காது. ஆனால் இது அடுத்தடுத்த பணிகளை (subsequent assignments) அனுமதிக்காது (அதாவது, நீங்கள் ஒதுக்கீட்டுடன் (assignment) அறிவிக்கலாம், ஆனால் பின்னர் மற்றொரு மதிப்பை ஒதுக்க முடியாது)

const userList = [];
userList.push("John"); // Can mutate even though it can't re-assign
console.log(userList); // ['John']

7.6. இயல்புநிலை அளவுருக்கள் (default parameters) என்ன?

பதில்: ES5 இல், செயல்பாட்டு அளவுருக்களின் (function parameters) இயல்புநிலை மதிப்புகளைக் (default values) கையாள தர்க்கரீதியான OR (logical OR) ஆபரேட்டர்களை நாம் சார்ந்திருக்க வேண்டும். ES6 இல், இயல்புநிலைச் செயல்பாட்டு அளவுருக்கள் (Default function parameters) அம்சமானது, எந்த மதிப்பும் இல்லை என்றாலோ அல்லது வரையறுக்கப்படாதது (undefined) எனத் தேர்ச்சி பெற்றாலோ, அளவுருக்கள் இயல்புநிலை மதிப்புகளுடன் துவக்கப்பட அனுமதிக்கிறது. எடுத்துக்காட்டுகளுடன் நடத்தையை (behavior) ஒப்பிடுவோம்,

//ES5
var calculateArea = function (height, width) {
  height = height || 50;
  width = width || 60;

  return width * height;
};
console.log(calculateArea()); //300

இயல்புநிலை அளவுருக்கள் (default parameters) துவக்கத்தை (initialization) எளிமையாக்குகிறது,

//ES6
var calculateArea = function (height = 50, width = 60) {
  return width * height;
};

console.log(calculateArea()); //300

7.7. டெம்ப்ளேட் லிட்டரல்கள் (template literals) என்றால் என்ன?

பதில்: டெம்ப்ளேட் லிட்டரல்கள் (Template literals) அல்லது டெம்ப்ளேட் சரங்கள் (template strings) என்பது உட்பொதிக்கப்பட்ட கோவைகளை (embedded expressions) அனுமதிக்கும் சரம் லிட்டரல்கள் (string literals) ஆகும். இவை இரட்டை அல்லது ஒற்றை மேற்கோள்களுக்குப் (double or single quotes) பதிலாகப் பேக்-டிக் (`) எழுத்தால் இணைக்கப்பட்டுள்ளன. ES6 இல், இந்த அம்சம் கீழே உள்ளதைப் போல டைனமிக் கோவைகளைப் (dynamic expressions) பயன்படுத்த உதவுகிறது,

var greeting = `Welcome to JS World, Mr. ${firstName} ${lastName}.`;

ES5 இல், நீங்கள் கீழே உள்ளதைப் போல சரத்தை உடைக்க வேண்டும்,

var greeting = 'Welcome to JS World, Mr. ' + firstName + ' ' + lastName.`

குறிப்பு: டெம்ப்ளேட் லிட்டரல்களுடன் (template literals) பல வரிச் சரங்கள் (multi-line strings) மற்றும் சரம் இடைக்கணிப்பு (string interpolation) அம்சங்களை நீங்கள் பயன்படுத்தலாம்.

7.8. டெம்ப்ளேட் லிட்டரல்களில் (template literals) பல வரிச் சரங்களை (multi-line strings) எப்படி எழுதுகிறீர்கள்?

பதில்: ES5 இல், பல வரிச் சரங்களைப் (multi-line strings) பெறுவதற்கு நீங்கள் புதிய வரி (newline) தப்பிக்கும் எழுத்துகள் ('\n') மற்றும் இணைத்தல் (concatenation) குறியீடுகள் (+) ஆகியவற்றைப் பயன்படுத்த வேண்டும்.

console.log("This is string sentence 1\n" + "This is string sentence 2");

அதேசமயம் ES6 இல், எந்தப் புதிய வரிசை எழுத்தையும் (newline sequence character) நீங்கள் குறிப்பிடத் தேவையில்லை,

console.log(`This is string sentence 'This is string sentence 2`);

7.9. நெஸ்டிங் டெம்ப்ளேட்கள் (nesting templates) என்ன?

பதில்: நெஸ்டிங் டெம்ப்ளேட் (nesting template) என்பது டெம்ப்ளேட் லிட்டரல்கள் (template literals) தொடரியலில் ஆதரிக்கப்படும் ஒரு அம்சமாகும், இது டெம்ப்ளேட்டிற்குள் ப்ளேஸ்ஹோல்டர் ${ } உள்ளே உள் பேக்டிக்குகளை (inner backticks) அனுமதிக்கிறது. எடுத்துக்காட்டாக, பயனர் அனுமதிகளின் (user permissions) அடிப்படையில் ஐகான்களைக் காண்பிக்கக் கீழே உள்ள நெஸ்டிங் டெம்ப்ளேட் பயன்படுத்தப்படுகிறது, அதே சமயம் வெளிப்புற டெம்ப்ளேட் இயங்குதள வகையைச் (platform type) சரிபார்க்கிறது:

const iconStyles = `icon ${
  isMobilePlatform()
    ? ""
    : `icon-${user.isAuthorized ? "submit" : "disabled"}`
}`;

நெஸ்டிங் டெம்ப்ளேட் அம்சங்கள் (nesting template features) இல்லாமலும் மேலே உள்ள பயன்பாட்டு வழக்கையும் நீங்கள் எழுதலாம். இருப்பினும், நெஸ்டிங் டெம்ப்ளேட் அம்சம் மிகவும் கச்சிதமானது மற்றும் படிக்கக்கூடியது.

//Without nesting templates
const iconStyles = `icon ${
  isMobilePlatform()
    ? ""
    : user.isAuthorized
    ? "icon-submit"
    : "icon-disabled"
}`;

7.10. குறியிடப்பட்ட வார்ப்புருக்கள் (tagged templates) என்றால் என்ன?

பதில்: குறியிடப்பட்ட வார்ப்புருக்கள் (Tagged templates) என்பது டெம்ப்ளேட்களின் மேம்பட்ட வடிவமாகும், இதில் குறிச்சொற்கள் (tags) ஒரு செயல்பாட்டுடன் (function) டெம்ப்ளேட் லிட்டரல்களைப் பாகுபடுத்த (parse) உங்களை அனுமதிக்கின்றன. டேக் (tag) செயல்பாடு முதல் அளவுருவை (parameter) சரங்களின் வரிசையாகவும் (array of strings) மீதமுள்ள அளவுருக்களை வெளிப்பாடுகளாகவும் (expressions) ஏற்றுக்கொள்கிறது. இந்தச் செயல்பாடு அளவுருக்களின் அடிப்படையில் கையாளப்பட்ட (manipulated) சரங்களையும் திருப்பி அனுப்பலாம் (return). ஒரு நிறுவனத்தில் உள்ள ஐடி (IT) நிபுணத்துவத் திறன் தொகுப்பின் (professional skill set) இந்த குறியிடப்பட்ட வார்ப்புருவின் நடத்தை பயன்பாட்டைப் (behavior usage) பார்ப்போம்,

var user1 = "John";
var skill1 = "JavaScript";
var experience1 = 15;

var user2 = "Kane";
var skill2 = "JavaScript";
var experience2 = 5;

function myInfoTag(strings, userExp, experienceExp, skillExp) {
  var str0 = strings[0]; // "Mr/Ms. "
  var str1 = strings[1]; // " is a/an "
  var str2 = strings[2]; // "in"

  var expertiseStr;
  if (experienceExp > 10) {
    expertiseStr = "expert developer";
  } else if (skillExp > 5 && skillExp <= 10) {
    expertiseStr = "senior developer";
  } else {
    expertiseStr = "junior developer";
  }

  return `${str0}${userExp}${str1}${expertiseStr}${str2}${skillExp}`;
}

var output1 = myInfoTag`Mr/Ms. ${user1} is a/an ${experience1} in ${skill1}`;
var output2 = myInfoTag`Mr/Ms. ${user2} is a/an ${experience2} in ${skill2}`;

console.log(output1); // Mr/Ms. John is a/an expert developer in JavaScript
console.log(output2); // Mr/Ms. Kane is a/an junior developer in JavaScript

7.11. மூலச் சரங்கள் (raw strings) என்ன?

பதில்: ES6 String.raw() முறையைப் பயன்படுத்தி மூலச் சரங்களின் (raw strings) அம்சத்தை வழங்குகிறது, இது டெம்ப்ளேட் சரங்களின் (template strings) மூல சரம் (raw string) வடிவத்தைப் பெறப் பயன்படுகிறது. எஸ்கேப் தொடர்களைச் (escape sequences) செயலாக்காமல், உள்ளிட்ட மூலச் சரங்களை அணுக இந்த அம்சம் உங்களை அனுமதிக்கிறது. உதாரணமாக, பயன்பாடு கீழே இருக்கும்,

 var calculationString = String.raw`The sum of numbers is \n${
  1 + 2 + 3 + 4
}!`;
console.log(calculationString); // The sum of numbers is \n10!

நீங்கள் மூலச் சரங்களைப் (raw strings) பயன்படுத்தாவிட்டால், பல வரிகளில் வெளியீட்டைக் (output) காண்பிப்பதன் மூலம் புதிய வரிசை (newline) எழுத்துத் தொடர் செயலாக்கப்படும்

var calculationString = `The sum of numbers is \n${1 + 2 + 3 + 4}!`;
console.log(calculationString);
// The sum of numbers is
// 10!

மேலும், டேக் செயல்பாட்டின் (tag function) முதல் வாதத்தில் (argument) மூலப் பண்பு (raw property) கிடைக்கிறது

function tag(strings) {
  console.log(strings.raw[0]);
}

8. செயல்பாட்டு நிரலாக்கம் (Functional Programming)

8.1. ஜாவாஸ்கிரிப்டில் அவசியமான நிரலாக்கத்திலிருந்து (imperative programming) செயல்பாட்டு நிரலாக்கம் (functional programming) எவ்வாறு வேறுபடுகிறது?

பதில்: செயல்பாட்டு நிரலாக்கம் (Functional programming) மற்றும் அவசியமான நிரலாக்கம் (imperative programming) ஆகிய இரண்டு முக்கிய நிரலாக்க முன்னுதாரணங்கள் (predominant programming paradigms) ஆகும்.

• இம்பரேடிவ் புரோகிராமிங் (Imperative Programming): இந்த முன்னுதாரணம் (paradigm) கணினிக்கு ஒரு காரியத்தை "எப்படி (how)" செய்ய வேண்டும் என்று சொல்வது மற்றும் நிரல்களின் நிலையை (programs state) மாற்றும் அறிக்கைகளை (statements) நம்பியுள்ளது. சாராம்சத்தில், இது ஒரு குறிப்பிட்ட பணியை அடைவதற்கான படிகளை விவரிப்பதில் கவனம் செலுத்துகிறது. இது பெரும்பாலும் லூப்கள் (loops), நிபந்தனைகள் (conditionals) மற்றும் மாறிகளை (variables) மாற்றும் அறிக்கைகளை (statements) உள்ளடக்கியது.

  let total = 0;
  for(let i = 0; i < array.length; i++) {
      total += array[i];
  }```
  

செயல்பாட்டு நிரலாக்கம் (Functional Programming - FP)

FP என்பது கணினிக்கு அதை "எப்படி (how)" அடைவது என்பதை விவரிப்பதை விட, "என்ன (what)" அடைய வேண்டும் என்பதைக் கற்பிப்பதாகும். இது கணக்கீட்டுப் பணிகளை (computational tasks) கணிதச் செயல்பாடுகளின் (mathematical functions) மதிப்பீடுகளாகக் கருதுகிறது மற்றும் மாற்றக்கூடிய தரவு (mutable data) மற்றும் நிலை மாற்றங்களைத் (state alterations) தவிர்க்கிறது. ஜாவாஸ்கிரிப்ட் மற்றும் பெரும்பாலான FP மொழிகளின் சூழலில்:

• தூய செயல்பாடுகள் (Pure Functions): இவையே வெளியீட்டு மதிப்பானது (output value) கவனிக்கக்கூடிய பக்க விளைவுகள் (side effects) இல்லாமல், அதன் உள்ளீட்டு மதிப்புகளால் (input values) பிரத்தியேகமாகத் தீர்மானிக்கப்படும் செயல்பாடுகளாகும். அதாவது, அதே உள்ளீட்டிற்கு, செயல்பாடு எப்போதும் ஒரே வெளியீட்டைத் (output) தரும்.

• மாற்ற முடியாத தரவு (Immutable Data): தரவு உருவாக்கப்பட்டவுடன், அது மாறவே முடியாது. ஏற்கனவே உள்ள தரவை மாற்றுவதற்குப் பதிலாக, செயல்பாட்டு நிரலாக்க நடைமுறைகள் (functional programming practices) புதிய தரவு கட்டமைப்புகளை (data structures) உருவாக்குவதை உள்ளடக்கியது.

• முதல் தர மற்றும் உயர்-வரிசை செயல்பாடுகள் (First-Class and Higher-Order Functions): FP இல், செயல்பாடுகள் முதல்-தரக் குடிமக்கள் (first-class citizens). இதன் பொருள் அவை மாறிகளுக்கு (variables) ஒதுக்கப்படலாம், மற்ற செயல்பாடுகளுக்கு அளவுருக்களாக (parameters) அனுப்பப்படலாம் மற்றும் மதிப்புகளாக (values) திரும்பப் பெறலாம். உயர்-வரிசை செயல்பாடு (higher-order function) என்பது ஒரு வாதமாக (argument) மற்றொரு செயல்பாட்டைப் பெறும் ஒரு செயல்பாடாகும், ஒரு செயல்பாட்டை வழங்குகிறது அல்லது இரண்டும்.

8.2. முதல் தரச் செயல்பாடுகளை (first-class functions) விளக்கி, செயல்பாட்டு நிரலாக்கத்தில் (functional programming) அவற்றின் முக்கியத்துவத்தை விளக்குங்கள்.

பதில்: ஜாவாஸ்கிரிப்ட் மற்றும் பல நிரலாக்க மொழிகளில், செயல்பாடுகள் "முதல் தரக் குடிமக்கள் (first-class citizens)" என்று கருதப்படுகின்றன. இதன் பொருள் செயல்பாடுகள் இருக்கலாம்:

• மாறிகளுக்கு (variables) ஒதுக்கப்பட்டது.
• மற்றச் செயல்பாடுகளுக்கு வாதங்களாக (arguments) அனுப்பப்பட்டது.
• மற்றச் செயல்பாடுகளிலிருந்து மதிப்புகளாக (values) திரும்பியது.
• வரிசைகள் (arrays) மற்றும் பொருள்கள் (objects) போன்ற தரவுக் கட்டமைப்புகளில் (data structures) சேமிக்கப்படுகிறது.

இந்த பண்புகளை (properties) நிரூபிக்கும் எளிய எடுத்துக்காட்டு இங்கே:

// Assigning a function to a variable
const greet = function(name) {
  return "Hello, " + name;
}
// Passing a function as an argument to another function
function runFunction(fn, value) {
  return fn(value);
}
runFunction(greet, 'John'); // Returns: "Hello, John"
// Returning a function from another function
function multiplier(factor) {
  return function(number) {
    return number \* factor;
  }
}
const double = multiplier(2);
double(5); // Returns: 10
// Storing function in an array
const functions = [greet, double];

8.3. எக்ஸிகியூஷன் கான்டெக்ஸ்ட் (Execution Context) மற்றும் லெக்சிகல் சூழல் (Lexical Environment) என்றால் என்ன?

பதில்: பொதுவாக, ஒரு செயல்பாடு அதன் கற்பனைக் கொள்கலனைக் (imaginary container) கொண்டுள்ளது அல்லது சில வகையான சூழல் API (context API) என்று கூறலாம். இது செயல்பாட்டிற்கு 3 விஷயங்களை வழங்குகிறது:

• செயல்பாட்டில் அறிவிக்கப்பட்ட மாறிகள் (variables)
• செயல்பாட்டில் வரையறுக்கப்பட்ட செயல்பாடுகள் (functions)
• லெக்சிகல் சூழல் (Lexical environment) இது ஒரு செயல்பாட்டின் எக்ஸிகியூஷன் கான்டெக்ஸ்ட் (Execution Context) எனப்படும்.

லெக்சிகல் சூழல் (lexical environment) என்பது ஒரு வகையான தகவல் மூலமாகும் (information source), இது பெற்றோர் செயல்பாட்டிற்கு (parent function) அதைப் பயன்படுத்தக்கூடிய மாறிகளின் ஸ்கோப்பை (scope) வழங்குகிறது. உதாரணமாக:

// Assigning a function to a variable
function parent() {
  var a;
  var b;

  function child() {
    var x;
    var y;
    {rest code}
  }
}

இங்கே, லெக்சிகல் சூழல் (lexical environment) பெற்றோர் செயல்பாடு a மற்றும் b மாறியைப் பயன்படுத்த முடியும் ஆனால் x மற்றும் y அல்ல (பெற்றோருக்கு ஸ்கோப்பை வழங்குகிறது) என்ற தகவலைக் கொண்டிருக்கும்.

9. உலாவிக்குள் (browser) தரவைச் சேமித்தல்

A. உள்ளூர் சேமிப்பகம் (Local storage) மற்றும் அமர்வு சேமிப்பகம் (Session storage)

9.1 லோக்கல் ஸ்டோரேஜ் (Local Storage) மற்றும் செஷன் ஸ்டோரேஜ் (Session Storage) இடையே உள்ள முக்கிய வேறுபாடுகள் என்ன?

பதில்: வெப் ஸ்டோரேஜ் (Web Storage) என்பது இணைய உலாவியில் (web browser) தரவைச் சேமிப்பதற்கான இரண்டு வழிமுறைகளை வழங்கும் இணைய API (web API) ஆகும்: உள்ளூர் சேமிப்பகம் (Local Storage) மற்றும் அமர்வு சேமிப்பகம் (Session Storage). முக்கிய வேறுபாடுகள்:

• வாழ்நாள் (Lifetime): உலாவி மூடப்பட்ட பின்னரும் லோக்கல் ஸ்டோரேஜ் தரவு (Local Storage data) தொடர்ந்து இருக்கும், அதே சமயம் செஷன் ஸ்டோரேஜ் தரவு (Session Storage data) பக்க அமர்வின் (page session) காலத்திற்கு மட்டுமே கிடைக்கும்.
• ஸ்கோப் (Scope): ஒரே தோற்றத்தில் (same origin) உள்ள பல சாளரங்கள் (windows) மற்றும் தாவல்களில் (tabs) இருந்து லோக்கல் ஸ்டோரேஜ் தரவை அணுக முடியும், அதேசமயம் செஷன் ஸ்டோரேஜ் தரவு தற்போதைய பக்கம் அல்லது தாவலுக்கு மட்டுமே (current page or tab) வரையறுக்கப்பட்டுள்ளது.
• சேமிப்பக வரம்பு (Storage Limit): செஷன் ஸ்டோரேஜ் (சுமார் 5-10 MB) உடன் ஒப்பிடும்போது லோக்கல் ஸ்டோரேஜ் பொதுவாகப் பெரிய சேமிப்பக வரம்பைக் (சுமார் 5-10 MB) கொண்டுள்ளது.

9.2 ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜில் தரவை எப்படிச் சேமிப்பது?

பதில்: தரவைச் சேமிக்க நீங்கள் localStorage மற்றும் sessionStorage பொருள்களைப் (objects) பயன்படுத்தலாம். லோக்கல் ஸ்டோரேஜில் (Local Storage) தரவைச் சேமிப்பதற்கான உதாரணம் இங்கே:

localStorage.setItem('username', 'JohnDoe');

செஷன் ஸ்டோரேஜில் (Session Storage) தரவைச் சேமிக்க, localStorage ஐ sessionStorage ஆக மாற்றவும்.

9.3 லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜில் உள்ள தரவை எப்படி அகற்றுவது அல்லது அழிப்பது?

பதில்: removeItem முறையைப் பயன்படுத்திச் சேமிப்பகத்திலிருந்து ஒரு உருப்படியை (item) அகற்றலாம். அனைத்து உருப்படிகளையும் (items) அழிக்க, நீங்கள் clear முறையைப் பயன்படுத்தலாம். எடுத்துக்காட்டாக:

ஒரு உருப்படியை அகற்று (Remove an item) : localStorage.removeItem('username');

அனைத்து உருப்படிகளையும் அழிக்கவும் (Clear all items) : localStorage.clear();

9.4 வெப் ஸ்டோரேஜ் (Web Storage) தொடர்பான பாதுகாப்புக் கவலைகளை (security concerns) விளக்குங்கள்.

பதில்: வெப் ஸ்டோரேஜ் (Web Storage) என்பது டொமைன் சார்ந்ததாகும் (domain-specific), அதாவது தரவைச் சேமித்த அதே டொமைனில் (same domain) இருந்து மட்டுமே அணுக முடியும். இருப்பினும், வெப் ஸ்டோரேஜில் முக்கியமான தகவல்களைச் (sensitive information) சேமிப்பதில் பாதுகாப்புக் கவலைகள் உள்ளன. தரவு மறைகுறியாக்கப்பட்டிருக்காது (not encrypted), மேலும் இது கிராஸ்-சைட் ஸ்கிரிப்டிங் (cross-site scripting - XSS) தாக்குதல்களால் பாதிக்கப்படக்கூடியது (vulnerable), அங்குத் தீங்கிழைக்கும் ஸ்கிரிப்டுகள் (malicious scripts) சேமிக்கப்பட்ட தரவை அணுகலாம் மற்றும் மாற்றலாம்.

B. IndexDB

IndexedDB ஐ "localStorage on steroids" என்று கருதலாம். இது ஒரு எளிய விசை-மதிப்பு தரவுத்தளமாகும் (key-value database), ஆஃப்லைன் பயன்பாடுகளுக்குப் (offline apps) போதுமான சக்தி வாய்ந்தது, ஆனால் பயன்படுத்த எளிதானது.

9.5 IndexDB என்றால் என்ன, வெப் ஸ்டோரேஜ் (Local Storage and Session Storage) இலிருந்து இது எவ்வாறு வேறுபடுகிறது?

பதில்: IndexDB என்பது ஒரு குறைந்த-நிலை ஜாவாஸ்கிரிப்ட் அடிப்படையிலான தரவுத்தளமாகும் (low-level JavaScript-based database), இது அதிக அளவிலான கட்டமைக்கப்பட்ட தரவைச் (structured data) சேமிப்பதற்கானது. இது பல வழிகளில் வெப் ஸ்டோரேஜிலிருந்து (Web Storage) வேறுபடுகிறது:

• தரவுக் கட்டமைப்பு (Data Structure): IndexedDB கட்டமைக்கப்பட்ட தரவைச் (structured data) சேமிக்கிறது, வெப் ஸ்டோரேஜ் (Web Storage) முக்கிய-மதிப்பு ஜோடிகளைச் (key-value pairs) சேமிக்கிறது.
• சேமிப்பக வரம்பு (Storage Limit): வெப் ஸ்டோரேஜின் வரையறுக்கப்பட்ட சேமிப்பகத்துடன் ஒப்பிடும்போது IndexedDB பொதுவாகப் பெரிய சேமிப்பக வரம்பை (பெரும்பாலும் மெகாபைட்களில்) வழங்குகிறது.
• API சிக்கலானது (API Complexity): IndexedDB ஆனது மிகவும் சிக்கலான API ஐக் கொண்டுள்ளது, டெவலப்பர்கள் ஒரு தரவுத்தளத் திட்டத்தை (database schema) வரையறுக்கவும் மற்றும் பரிவர்த்தனைகளுடன் (transactions) வேலை செய்யவும் தேவைப்படுகிறது.

9.6 ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி இன்டெக்ஸ்டிபியில் (IndexedDB) டேட்டாபேஸை (database) திறந்து ஆப்ஜெக்ட் ஸ்டோரை (object store) எப்படி உருவாக்குவது?

பதில்: நீங்கள் ஒரு தரவுத்தளத்தைத் (database) திறந்து இது போன்ற ஒரு ஆப்ஜெக்ட் ஸ்டோரை (object store) உருவாக்கலாம்:

தரவுத்தளத்தைத் திறக்கவும் (அல்லது இல்லை என்றால் உருவாக்கவும்) :

const request = indexedDB.open('myDatabase', 1);

ஆப்ஜெக்ட் ஸ்டோரை (object store) உருவாக்கவும் :

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('myStore', { keyPath: 'id' });
};

10. குறியீடு உகப்பாக்கம் (Code Optimization)

10.1. ட்ரீ ஷேக்கிங் (tree shaking) என்றால் என்ன?

பதில்: ட்ரீ ஷேக்கிங் (Tree shaking) என்பது டெட் கோட் எலிமினேஷனின் (dead code elimination) ஒரு வடிவமாகும். கட்டமைப்பின் செயல்பாட்டின் (build process) போதுப் பயன்படுத்தப்படாத தொகுதிகள் (unused modules) மூட்டையில் (bundle) சேர்க்கப்படாது என்பதாகும், அதற்காக இது ES2015 தொகுதி தொடரியலின் (module syntax) நிலையான அமைப்பை (static structure) (அதாவது import மற்றும் export) நம்பியுள்ளது. ஆரம்பத்தில் இது ES2015 தொகுதி பண்ட்லர் ரோலப்பால் (module bundler rollup) பிரபலப்படுத்தப்பட்டது.

10.2. ட்ரீ ஷேக்கிங்கின் தேவை என்ன?

பதில்: ட்ரீ ஷேக்கிங் (Tree Shaking) எந்தப் பயன்பாட்டிலும் குறியீட்டின் அளவைக் கணிசமாகக் குறைக்கும். அதாவது, வயர் (wire) வழியாக நாம் எவ்வளவு குறைவான குறியீட்டை அனுப்புகிறோமோ அந்த அளவுக்குப் பயன்பாடு (application) சிறப்பாக இருக்கும். எடுத்துக்காட்டாக, SPA கட்டமைப்புகளைப் (SPA frameworks) பயன்படுத்தி ஒரு “Hello World” பயன்பாட்டை (Application) உருவாக்க விரும்பினால், அதற்குச் சில MBகள் தேவைப்படும், ஆனால் ட்ரீ ஷேக்கிங் (tree shaking) மூலம் அதன் அளவைச் சில நூறு KBகளுக்குக் குறைக்கலாம். ட்ரீ ஷேக்கிங் (Tree shaking) Rollup மற்றும் Webpack பண்ட்லர்களில் செயல்படுத்தப்படுகிறது.

10.3. ட்ரீ ஷேக்கிங்கில் (tree shaking) ES2015 தொகுதி தொடரியலின் (module syntax) நிலையான அமைப்பின் பங்கை விளக்குங்கள். டெட் கோடை (dead code) அகற்ற மர குலுக்கல் (tree shaking) இந்த அமைப்பை எவ்வாறு பயன்படுத்துகிறது?

பதில்: ட்ரீ ஷேக்கிங் (Tree shaking) ES2015 தொகுதி தொடரியல் நிலையான அமைப்பை நம்பியுள்ளது, அதாவது import மற்றும் export அறிக்கைகள் தொகுக்கும் நேரத்தில் (compile time) தெளிவான மற்றும் நிலையான அமைப்பைக் (static structure) கொண்டுள்ளன. கட்டும் செயல்பாட்டின் போது, பண்ட்லர் (எ.கா., Rollup அல்லது Webpack) எந்தத் தொகுதிகள் பயன்படுத்தப்படுகின்றன, எவை பயன்படுத்தப்படவில்லை என்பதைத் தீர்மானிக்க இறக்குமதி (import) அறிக்கைகளை பகுப்பாய்வு (analyzes) செய்கிறது. இது பயன்படுத்தப்படாத தொகுதிகளை (unused modules) இறுதி மூட்டையிலிருந்து (final bundle) நீக்குகிறது, இதன் விளைவாகச் சிறிய மற்றும் திறமையான குறியீடு (efficient code) கிடைக்கும்.

10.4. பல சார்புகள் (dependencies) மற்றும் ஆழமான தொகுதி படிநிலைகளைக் (module hierarchies) கொண்ட சிக்கலான ஜாவாஸ்கிரிப்ட் திட்டத்தில் ட்ரீ ஷேக்கிங்கை (tree shaking) மேம்படுத்த என்ன படிகள் எடுக்கலாம்?

பதில்: ஒரு சிக்கலான திட்டத்தில் ட்ரீ ஷேக்கிங்கை (tree shaking) மேம்படுத்த:

• அனைத்துச் சார்புகளும் (dependencies) ES2015 தொகுதி தொடரியலைப் பயன்படுத்துவதை உறுதி செய்யவும்.
• ட்ரீ ஷேக்கிங் செய்ய உங்கள் பண்ட்லரை (bundler) கட்டமைக்கவும்.
• கோப்புகள் (files) அல்லது கோப்பகங்களைப் (directories) பக்கவிளைவு இல்லாதவை (side-effect free) எனக் குறிக்க உங்கள் package.json இல் உள்ள "sideEffects" பண்பைப் (property) பயன்படுத்தவும்.
• டைனமிக் இறக்குமதிகளின் (dynamic imports) பயன்பாட்டைக் குறைக்கவும்.
• பயன்படுத்தப்படாத ஏற்றுமதிகள் (unused exports) மற்றும் செயல்பாடுகளை (functions) அகற்ற உங்கள் குறியீட்டைத் தொடர்ந்து தணிக்கை (audit) செய்து புதுப்பிக்கவும்.