Jassif Team Institution

JavaScript Scope

Scope = Visibility

Scope என்பது மாறிகளின் அணுகல் (தோற்றம்) தீர்மானிக்கிறது.

JavaScript மாறிகள் 3 வகையான scope கொண்டுள்ளன:

• Global scope
• Function scope
• Block scope

Global Scope

Globally அறிவிக்கப்பட்ட மாறிகள் (எந்த தொகுதி அல்லது செயல்பாட்டிற்கும் வெளியே) Global Scope கொண்டுள்ளன.

Global மாறிகள் ஒரு JavaScript நிரலில் எங்கிருந்தும் அணுக முடியும்.

var, let மற்றும் const உடன் அறிவிக்கப்பட்ட மாறிகள் ஒரு தொகுதிக்கு வெளியே அறிவிக்கப்படும் போது மிகவும் ஒத்திருக்கும்.

அவை அனைத்தும் Global Scope கொண்டுள்ளன:

var x = 1;    // Global scope

let y = 2;    // Global scope

const z = 3;  // Global scope

எடுத்துக்காட்டு

ஒரு செயல்பாட்டிற்கு வெளியே அறிவிக்கப்பட்ட மாறி, GLOBAL ஆக மாறுகிறது.

let carName = "Volvo";
// இங்குள்ள குறியீடு carName ஐப் பயன்படுத்தலாம்

function myFunction() {
// இங்குள்ள குறியீடும் carName ஐப் பயன்படுத்தலாம்
}

Global மாறிகள் Global Scope கொண்டுள்ளன:

அதே வலைப்பக்கத்தில் உள்ள அனைத்து ஸ்கிரிப்டுகள் மற்றும் செயல்பாடுகளும் global scope உடன் ஒரு மாறியை அணுக முடியும்.

Function Scope

ஒவ்வொரு JavaScript செயல்பாடும் அதன் சொந்த scope கொண்டுள்ளது.

ஒரு செயல்பாட்டின் உள்ளே வரையறுக்கப்பட்ட மாறிகள் வெளியில் இருந்து அணுக முடியாது (காணப்படாது).

var, let மற்றும் const உடன் அறிவிக்கப்பட்ட மாறிகள் ஒரு செயல்பாட்டின் உள்ளே அறிவிக்கப்படும் போது மிகவும் ஒத்திருக்கும்.

அவை அனைத்தும் Function Scope கொண்டுள்ளன:

function myFunction1() {
  var carName = "Volvo";  // Function Scope
}

function myFunction2() {
  let carName = "Volvo";  // Function Scope
}

function myFunction3() {
  const carName = "Volvo";  // Function Scope
}

எடுத்துக்காட்டு

ஒரு JavaScript செயல்பாட்டிற்குள் அறிவிக்கப்பட்ட மாறிகள், செயல்பாட்டிற்கு LOCAL ஆகும்:

// இங்குள்ள குறியீடு carName ஐப் பயன்படுத்த முடியாது

function myFunction() {
  let carName = "Volvo";
  // இங்குள்ள குறியீடு carName ஐப் பயன்படுத்தலாம்
}

// இங்குள்ள குறியீடு carName ஐப் பயன்படுத்த முடியாது

Local மாறிகள் Function Scope கொண்டுள்ளன:

• அவை செயல்பாட்டிற்குள் இருந்து மட்டுமே அணுக முடியும்
• செயல்பாட்டிற்கு வெளியே உள்ள எந்த ஸ்கிரிப்டுகள் அல்லது செயல்பாடுகளும் அவற்றை அணுக முடியாது
• அதே பெயரைக் கொண்ட மாறிகள் செயல்பாட்டிற்கு வெளியே பயன்படுத்தப்படலாம்
• அதே பெயரைக் கொண்ட மாறிகள் வெவ்வேறு செயல்பாடுகளில் பயன்படுத்தப்படலாம்
• Local மாறிகள் ஒரு செயல்பாடு தொடங்கும் போது உருவாக்கப்படுகின்றன
• Local மாறிகள் செயல்பாடு நிறைவடையும் போது நீக்கப்படும்
• Arguments (parameters) செயல்பாடுகளுக்குள் local மாறிகளாக வேலை செய்கின்றன

Block Scope

ES6 க்கு முன், JavaScript மாறிகள் Global Scope அல்லது Function Scope மட்டுமே கொண்டிருக்க முடியும்.

ES6 இரண்டு முக்கியமான புதிய JavaScript வார்த்தைகளை அறிமுகப்படுத்தியது: let மற்றும் const.

இந்த இரண்டு வார்த்தைகள் JavaScript இல் Block Scope வழங்குகின்றன.

let மற்றும் const உடன் ஒரு குறியீடு தொகுதிக்குள் அறிவிக்கப்பட்ட மாறிகள் "block-scoped," அதாவது அவை அந்த தொகுதிக்குள் மட்டுமே அணுக முடியும்.

இது தற்செயலான மாறி மேலெழுதலைத் தடுக்கவும் சிறந்த குறியீடு அமைப்பை ஊக்குவிக்கவும் உதவுகிறது:

எடுத்துக்காட்டு

{
  let x = 2;
}
// x இங்கே பயன்படுத்த முடியாது

var வார்த்தையுடன் அறிவிக்கப்பட்ட மாறிகள் block scope கொண்டிருக்க முடியாது.

var வார்த்தையுடன் அறிவிக்கப்பட்ட மாறிகள், ஒரு { } தொகுதிக்குள்; தொகுதிக்கு வெளியே இருந்து அணுக முடியும்.

எடுத்துக்காட்டு (பரிந்துரைக்கப்படாதது)

{
  var x = 2;
}
// x இங்கே பயன்படுத்தலாம்

Automatically Global

நீங்கள் அறிவிக்கப்படாத ஒரு மாறிக்கு ஒரு மதிப்பை ஒதுக்கினால், அது GLOBAL மாறியாக மாறும்.

இந்த குறியீடு எடுத்துக்காட்டு ஒரு global மாறி carName ஐ அறிவிக்கும், மதிப்பு ஒரு செயல்பாட்டிற்குள் ஒதுக்கப்பட்டிருந்தாலும் கூட.

எடுத்துக்காட்டு

myFunction();

// இங்குள்ள குறியீடு carName ஐப் பயன்படுத்தலாம்

function myFunction() {
  carName = "Volvo";
}

Strict Mode

அனைத்து நவீன உலாவிகளும் "Strict Mode" இல் JavaScript ஐ இயக்குவதை ஆதரிக்கின்றன.

"Strict Mode" இல், அறிவிக்கப்படாத மாறிகள் தானாகவே global ஆக மாறாது.

Global Variables in HTML

JavaScript உடன், global scope என்பது JavaScript சூழல் ஆகும்.

HTML இல், global scope என்பது window object ஆகும்.

var வார்த்தையுடன் வரையறுக்கப்பட்ட global மாறிகள் window object க்கு சொந்தமானவை:

எடுத்துக்காட்டு (பரிந்துரைக்கப்படாதது)

var carName = "Volvo";
// இங்குள்ள குறியீடு window.carName ஐப் பயன்படுத்தலாம்

let வார்த்தையுடன் வரையறுக்கப்பட்ட global மாறிகள் window object க்கு சொந்தமானவை அல்ல:

எடுத்துக்காட்டு

let carName = "Volvo";
// இங்குள்ள குறியீடு window.carName ஐப் பயன்படுத்த முடியாது

The Lifetime of JavaScript Variables

ஒரு JavaScript மாறியின் வாழ்நாள் அது அறிவிக்கப்படும் போது தொடங்குகிறது.

Function (local) மாறிகள் செயல்பாடு நிறைவடையும் போது நீக்கப்படும்.

ஒரு வலை உலாவியில், global மாறிகள் நீங்கள் உலாவி சாளரத்தை (அல்லது தாவலை) மூடும் போது நீக்கப்படும்.

Exercise

பின்வரும் குறியீட்டைக் கவனியுங்கள்:

let x = 5;
{
  let x = 3;
}
alert(x);

அலர்ட் செய்யப்பட்ட முடிவு என்னவாக இருக்கும்?