Jassif Team Institution

JavaScript Hoisting

ஹோயிஸ்டிங் என்பது அறிவிப்புகளை மேலே நகர்த்தும் JavaScript இன் இயல்புநிலை நடத்தையாகும்.

JavaScript Declarations are Hoisted

JavaScript இல், ஒரு மாறி அதைப் பயன்படுத்திய பிறகு அறிவிக்கப்படலாம்.

வேறு வார்த்தைகளில் கூறுவதானால்; ஒரு மாறி அது அறிவிக்கப்படுவதற்கு முன்பு பயன்படுத்தப்படலாம்.

எடுத்துக்காட்டு 1, எடுத்துக்காட்டு 2 போன்ற அதே முடிவைத் தருகிறது:

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

x = 5; // x க்கு 5 ஐ ஒதுக்கு

elem = document.getElementById("demo"); // ஒரு உறுப்பைக் கண்டறி
elem.innerHTML = x;                     // உறுப்பில் x ஐக் காட்டு

var x; // x ஐ அறிவி

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

var x; // x ஐ அறிவி
x = 5; // x க்கு 5 ஐ ஒதுக்கு

elem = document.getElementById("demo"); // ஒரு உறுப்பைக் கண்டறி
elem.innerHTML = x;                     // உறுப்பில் x ஐக் காட்டு

இதைப் புரிந்துகொள்ள, "ஹோயிஸ்டிங்" என்ற வார்த்தையைப் புரிந்துகொள்ள வேண்டும்.

ஹோயிஸ்டிங் என்பது அனைத்து அறிவிப்புகளையும் தற்போதைய scope இன் மேல் (தற்போதைய ஸ்கிரிப்ட் அல்லது தற்போதைய செயல்பாட்டின் மேல்) நகர்த்தும் JavaScript இன் இயல்புநிலை நடத்தையாகும்.

The let and const Keywords

let மற்றும் const உடன் வரையறுக்கப்பட்ட மாறிகள் தொகுதியின் மேல் hoist செய்யப்படுகின்றன, ஆனால் துவக்கப்படுவதில்லை.

அர்த்தம்: குறியீட்டின் தொகுதி மாறியை அறிந்திருக்கிறது, ஆனால் அது அறிவிக்கப்படும் வரை அதைப் பயன்படுத்த முடியாது.

அது அறிவிக்கப்படுவதற்கு முன் ஒரு let மாறியைப் பயன்படுத்துவது ReferenceError க்கு வழிவகுக்கும்.

மாறி தொகுதி தொடங்கியதிலிருந்து அது அறிவிக்கப்படும் வரை "தற்காலிக இறந்த மண்டலத்தில்" உள்ளது:

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

இது ஒரு ReferenceError க்கு வழிவகுக்கும்:

carName = "Volvo";
let carName;

அது அறிவிக்கப்படுவதற்கு முன் ஒரு const மாறியைப் பயன்படுத்துவது ஒரு தொடரியல் பிழை, எனவே குறியீடு இயங்காது.

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

இந்த குறியீடு இயங்காது.

carName = "Volvo";
const carName;

JS Let / Const இல் let மற்றும் const பற்றி மேலும் படிக்கவும்.

JavaScript Initializations are Not Hoisted

JavaScript ஆனது அறிவிப்புகளை மட்டுமே hoist செய்கிறது, துவக்கங்களை hoist செய்யாது.

எடுத்துக்காட்டு 1, எடுத்துக்காட்டு 2 போன்ற அதே முடிவைத் தராது:

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

var x = 5; // x ஐ துவக்கு
var y = 7; // y ஐ துவக்கு

elem = document.getElementById("demo"); // ஒரு உறுப்பைக் கண்டறி
elem.innerHTML = x + " " + y;           // x மற்றும் y ஐக் காட்டு

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

var x = 5; // x ஐ துவக்கு

elem = document.getElementById("demo"); // ஒரு உறுப்பைக் கண்டறி
elem.innerHTML = x + " " + y;           // x மற்றும் y ஐக் காட்டு

var y = 7; // y ஐ துவக்கு

கடைசி எடுத்துக்காட்டில் y undefined ஆக இருப்பது அர்த்தமுள்ளதாக உள்ளதா?

இதற்குக் காரணம், அறிவிப்பு மட்டுமே (var y), துவக்கம் (=7) அல்ல, மேலே hoist செய்யப்படுகிறது.

ஹோயிஸ்டிங் காரணமாக, y அது பயன்படுத்தப்படுவதற்கு முன்பே அறிவிக்கப்பட்டுள்ளது, ஆனால் துவக்கங்கள் hoist செய்யப்படாததால், y இன் மதிப்பு undefined ஆகும்.

எடுத்துக்காட்டு 2 எழுதுவது போலவே உள்ளது:

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

var x = 5; // x ஐ துவக்கு
var y;     // y ஐ அறிவி

elem = document.getElementById("demo"); // ஒரு உறுப்பைக் கண்டறி
elem.innerHTML = x + " " + y;           // x மற்றும் y ஐக் காட்டு

y = 7;    // y க்கு 7 ஐ ஒதுக்கு

Declare Your Variables At the Top!

ஹோயிஸ்டிங் (பல டெவலப்பர்களுக்கு) JavaScript இன் தெரியாத அல்லது புறக்கணிக்கப்பட்ட நடத்தையாகும்.

ஒரு டெவலப்பர் ஹோயிஸ்டிங்கைப் புரிந்துகொள்ளாவிட்டால், நிரல்கள் பிழைகளை (தவறுகள்) கொண்டிருக்கலாம்.

பிழைகளைத் தவிர்க்க, எப்போதும் அனைத்து மாறிகளையும் ஒவ்வொரு scope இன் தொடக்கத்திலும் அறிவிக்கவும்.

இது JavaScript குறியீட்டை எவ்வாறு விளக்குகிறது என்பதால், இது எப்போதும் ஒரு நல்ல விதியாகும்.

Exercise

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

x = 5;
alert(x);
var x;

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