JavaScript Scope and Hoisting

Scope అంటే ఒక variable లేదా function ను program లో ఎక్కడ access చేయవచ్చో నిర్ణయించే పరిధి. JavaScript లో ప్రధానంగా global scope, function scope, block scope ఉంటాయి.

Global Scope

Function లేదా block వెలుపల declare చేసిన variable global scope లో ఉంటుంది. దాన్ని program లోని అనేక ప్రాంతాల నుంచి access చేయవచ్చు. అయితే global variables ఎక్కువగా ఉపయోగిస్తే naming conflicts రావచ్చు.

Function Scope

Function లో declare చేసిన variable ఆ function లోపల మాత్రమే access చేయవచ్చు. Function వెలుపల దాన్ని access చేయడానికి ప్రయత్నిస్తే variable అందుబాటులో ఉండదు.

Block Scope

let మరియు const variables block-scoped. అంటే వాటిని curly braces {} లో declare చేస్తే అదే block లో access చేయగలం. if, for వంటి blocks దీనికి ఉదాహరణలు.

Hoisting

Hoisting అంటే JavaScript execution ప్రారంభించే ముందు కొన్ని declarations ను వాటి scope పైభాగంలో ఉన్నట్లుగా గుర్తించడం. var declaration hoist అవుతుంది, కానీ దాని assignment hoist కాదు. అందువల్ల assignment ముందు var variable ను access చేస్తే సాధారణంగా undefined వస్తుంది.

Function declarations కూడా hoist అవుతాయి. అందువల్ల function declaration రాసే ముందు దాన్ని call చేయవచ్చు. let మరియు const declarations కూడా technically hoist అవుతాయి, కానీ initialization ముందు వాటిని access చేయలేని Temporal Dead Zone లో ఉంటాయి. అందుకే modern JavaScript లో variables ను ఉపయోగించే ముందు declare చేయడం ఉత్తమ పద్ధతి.

Simple Explanation

Scope ను ఒక room లాగా ఊహించండి. Room లో ఉన్న వస్తువులు ఆ room లో కనిపిస్తాయి; బయటివారికి కనిపించవు. అలాగే function లోని local variable ఆ function లోనే ఉపయోగించాలి. Hoisting ను JavaScript ముందుగా declarations ను గుర్తుపెట్టుకోవడం అని భావించవచ్చు. కానీ var విషయంలో పేరు ముందుగా సిద్ధంగా ఉన్నా value assignment తర్వాత జరుగుతుంది.

let మరియు const — block scope.
var — function scope.
Function declaration — call కు ముందు కూడా ఉపయోగించవచ్చు.
Variables ను ముందుగా declare చేసి తర్వాత ఉపయోగించడం safest practice.

Real-Life Example

ఒక office building ను ఊహించండి. Building reception వద్ద ఉన్న information అందరికీ కనిపించవచ్చు; ఇది global scope లాంటిది. ఒక department room లోని confidential file ఆ department వారికి మాత్రమే అందుబాటులో ఉంటుంది; ఇది function scope లాంటిది. ఒక meeting room లో ఉన్న temporary notes ఆ meeting ముగిసిన తర్వాత బయట ఉపయోగించలేం; ఇది block scope లాంటిది. Office ప్రారంభించే ముందు employee names list సిద్ధం చేయడం hoisting లాంటిది, కానీ ప్రతి employee కి task assignment తరువాతే జరుగుతుంది.

Code Examples

Function Scope మరియు Local Variable

function showMessage() {
  const message = "Local message";
  console.log(message);
}

showMessage();
console.log(typeof message);

message అనే variable function లోపల declare చేయబడింది. అందువల్ల అది local variable. showMessage() function లోపల దాన్ని access చేయగలం. Function వెలుపల అదే పేరు access చేసినప్పుడు variable కనిపించదు; అందుకే typeof ద్వారా “undefined” వస్తుంది.

Local message
undefined

var Hoisting మరియు Function Declaration Hoisting

console.log(count);
var count = 5;

sayHello();

function sayHello() {
  console.log("Hello from function");
}

var count declaration hoist అవుతుంది, కానీ count = 5 assignment తర్వాత జరుగుతుంది. కాబట్టి మొదటి output undefined. Function declaration మొత్తం hoist అవుతుంది కాబట్టి declaration కంటే ముందు sayHello() ను call చేయవచ్చు.

undefined
Hello from function

Block Scope తో let

let color = "blue";

if (true) {
  let color = "green";
  console.log(color);
}

console.log(color);

Block లోని let color ఒక కొత్త local variable. అది block లో ఉన్నప్పుడు మాత్రమే ఉపయోగించబడుతుంది. Block వెలుపల ఉన్న color value మారదు.

green
blue

Line-by-Line Explanation

console.log(count);

ఇక్కడ count ను assignment కు ముందు print చేస్తున్నాం. var declaration hoist అవుతుంది కాబట్టి error రాదు; value ఇంకా assign కాలేదు కాబట్టి undefined వస్తుంది.

var count = 5;

ఈ line లో count variable declare చేసి దానికి 5 value assign చేస్తున్నాం. Declaration ముందే hoist అయినా assignment ఈ line వద్దే జరుగుతుంది.

sayHello();

ఈ line sayHello function ను call చేస్తుంది. Function declaration hoist అయినందున function declaration కంటే ముందే call చేయవచ్చు.

function sayHello() {

ఇది sayHello అనే function declaration ప్రారంభం. Function declaration execution ప్రారంభానికి ముందు గుర్తించబడుతుంది.

console.log(“Hello from function”);

Function call అయినప్పుడు ఈ line execute అయి console లో Hello from function ను print చేస్తుంది.

}

ఈ closing brace function body ముగిసిందని సూచిస్తుంది.

Try It

Try this JavaScript code:

Example

const userName = "Ravi";

function createGreeting() {
  const greeting = "Hello, " + userName;
  return greeting;
}

console.log(createGreeting());

Try It Yourself »

Practice

Practice:

calculateTotal function ను complete చేయండి. Function లో local variable tax ను create చేసి, ఇచ్చిన price కు 10% tax కలిపిన total ను return చేయండి. taxRate global variable ను function లో access చేయాలి.

Hint:

tax ను price * taxRate తో calculate చేయండి. తర్వాత price + tax ను return చేయండి.

Common Mistakes

var variable assignment కు ముందు value ఉపయోగిస్తే assigned value వస్తుందని అనుకోవడం.

var declaration మాత్రమే hoist అవుతుంది; assignment hoist కాదు. కాబట్టి assignment ముందు సాధారణంగా undefined వస్తుంది.

Function లో declare చేసిన local variable ను function వెలుపల access చేయడం.

Function లోని variable function scope లో ఉంటుంది. అవసరమైతే value ను return చేసి బయట ఉపయోగించండి.

let లేదా const ను declare చేయకముందే access చేయడం.

Initialization ముందు let మరియు const Temporal Dead Zone లో ఉంటాయి. అందువల్ల variables ను ఉపయోగించే ముందు declare చేయండి.

ఒకే పేరు ఉన్న variable ను global scope మరియు block scope లో ఉపయోగించినప్పుడు రెండూ ఒకటే variable అని అనుకోవడం.

Block లోని let లేదా const కొత్త block-scoped variable కావచ్చు. Scope ను గమనించి variable names ను స్పష్టంగా ఉంచండి.

Interview Questions

JavaScript లో scope అంటే ఏమిటి?

Answer:

Scope అంటే ఒక variable లేదా function ను program లో ఎక్కడ access చేయవచ్చో నిర్ణయించే పరిధి. Global, function మరియు block scopes JavaScript లో ముఖ్యమైన scopes.

var, let మరియు const మధ్య scope పరంగా తేడా ఏమిటి?

Answer:

var function-scoped. let మరియు const block-scoped. అందుకే modern JavaScript లో సాధారణంగా let మరియు const ను prefer చేస్తారు.

Hoisting అంటే ఏమిటి?

Answer:

JavaScript execution కు ముందు declarations ను వాటి scope పైభాగంలో ఉన్నట్లుగా గుర్తించే behavior ను hoisting అంటారు. var declaration మరియు function declarations దీనికి ముఖ్యమైన ఉదాహరణలు.

var declaration ను assignment ముందు access చేస్తే ఏమవుతుంది?

Answer:

var declaration hoist అవుతుంది, కానీ assignment కాదు. అందువల్ల assignment ముందు access చేస్తే సాధారణంగా undefined వస్తుంది.

Exam Questions

ఈ code యొక్క output ఏమిటి? console.log(value); var value = 10;

Answer:

Output undefined. var value declaration hoist అవుతుంది, కానీ value = 10 assignment ఆ line వద్దే జరుగుతుంది.

Block scope కోసం ఏ keywords ఉపయోగిస్తారు?

Answer:

let మరియు const block-scoped keywords.

Function declaration ను declaration కు ముందు call చేయగలమా?

Answer:

అవును. Function declarations hoist అవుతాయి కాబట్టి declaration కు ముందు call చేయవచ్చు.

Quick Revision

Scope ఒక variable ఎక్కడ access చేయవచ్చో నిర్ణయిస్తుంది.
var function-scoped; let మరియు const block-scoped.
var declaration hoist అవుతుంది, assignment hoist కాదు.
Function declarations ను declaration కు ముందే call చేయవచ్చు.
let మరియు const ను initialization ముందు access చేయకూడదు.
Variables ను ముందుగా declare చేసి తర్వాత ఉపయోగించడం మంచి coding practice.

JavaScript Scope and Hoisting