Learning Javascript : Variables Scope

က်ြန္ေတာ္ JavaScritp ကို စေလ့လာတုန္းက variable scope နဲ့ data type နဲ့ ပတ္သက္တဲ့ အခန္းေတြကို ေက်ာ္ဖတ္ခဲ့တယ္။ ေနာ္ကမွ ေသခ်ာ သိတာက Variable scope က က်ြန္ေတာ္တိုံ ပံုမွန္ေလ့လာေနက် OOP language ေတြ အထူးသျဖင့္ Java, C# တုိ့နဲ့ မတူဘူးဆိုတာပါ။ Javascript မွာ block-level scope မရွိဘူး။ Java, C# တုိ့နဲ့ မတူတာက သူ့မွာ global scope concept ရွိတယ္။  var keyword မပါတဲ့ variable ေတြက global scope ထဲ ပါသြားတာပါ။


var name="foo";

function sayName(){
     var name="boo"
     console.log(name);
}

sayName();
console.log(name);

boo
foo

ဒါကိုေတာ့ အားလံုးသိျပီးသား ျဖစ္မွာပါ၊ function sayName() ထဲမွာ ရ်ိတဲ့ local variable name က global variable name ကို hide လုပ္သြားတာပါ။ သူတို့ နွစ္ခုက မတူညီတဲ့ variable နွစ္ခုပါ။ local variable name ကို function အျပင္ဘက္ကေန access လုပ္လို့မရပါဘူး။


var name="foo";

function sayName(){
name="boo";
console.log(name);
}

sayName();
console.log(name);


boo

boo

အေပါ္က script က function sayName() ထဲက name က global scope ထဲက name ပါ။ override လုပ္သြားတာ ျဖစ္ပါတယ္။ ဒါေျကာင့္ output အေနနဲ့ တူညီတဲ့ result ကိုပဲ ျမင္ေနရတာပါ။


var name="foo";

function sayName(){
name="boo";
age=25;
console.log(name);
}

sayName();
console.log(age);

Output

boo
25

Javascript မွာ variable တစ္ခုေျကညာရင္ var keyword မျဖစ္မေန ထည့္စရာမလိုပါဘူး။ ကြ်န္ေတာ္ အေပါ္မွာ ေျပာခဲ့သလိုပါပဲ variable တစ္ခုဟာ var keyword မပါရင္ global scope မွာ ပါပါတယ္။ သူ့တုိ့ကို ဘယ္ေနရာက access လုပ္လုပ္ လုပ္လို့ရပါတယ္။ window object က global scope object တစ္ခုျဖစ္ပါတယ္။ ေအာက္က script ကို ျကည့္ရေအာင္။

</pre>
var name="foo";

function sayName(){
name="boo";
age=25;
console.log(name);
}

window.sayName();
console.log(window.name);
console.log(window.age);
<pre>

             Output

<pre>boo
boo
25</pre>

global scope variables  ေတြက window object ရဲ့ property အေနနဲ့ attach လုပ္သြားတာပါ။ ဒါေျကာင့္မလို့ window object ကေန တဆင့္ ျပန္ေခါ္သံုးလို့ရတာပါ။

ေအာက္က script ကို run လိုက္ရင္ အေျဖက အားလံုးသိျပီးသားျဖစ္မွာပါ။ Output က  “abc” ဆိုျပီးထြက္လာမွာပါ။


var test=function(){

 var a='a';
 var b='b';
 var c='c';
 console.log(a+''+b+''+c);
};

test();

ဒါဆိုရင္ ေအာက္က script ကို run ျကည့္ပါဦး။


var test=function(){
console.log(a+''+b+''+c);
var a='a';
var b='b';
var c='c';

};

test();

output က “undefinedundefinedundefined” ဆုိျပီး ျမင္ရပါလိမ့္မယ္။

Hoisting

Javascript မွာ variables ေတြကို လက္ရွိ scope ရဲ့ အေပါ္ကို ဆြဲတင္လိုက္တာကို hoisting လုပ္တယ္လို့ေခါ္ပါတယ္။ အထက္က script ကို Javascript က ေအာက္ပါအတိုင္း translate လုပ္သြားပါတယ္။


var test=function(){
var a;
var b;
var c;

console.log(a+''+b+''+c);

a='a';
b='b';
c='c';

};

test();

တစ္ခု သတိထားရမွာက Javascript က variable declaration ကိုပဲ hoist လုပ္သြားတာပါ။ initialization မပါ ပါဘူး။

Javascript က function declaration ေတြကိုလည္း hoist လုပ္ပါတယ္။


say()
function say(){
 console.log('say');
}

အထက္က script ကို run လိုက္ရင္ ‘say’ ဆိုတဲ့ output ရပါလိမ့္မယ္။ ဒါေပမယ့္ variable တစ္ခုထဲ့ assign လုပ္သြားတဲ့ function ေတြဆို hoist မလုပ္ပါဘူး။


say();

var say=function(){

console.log('say');

}

အေပါ္က script ကို run လုိက္ရင္ exception တက္ပါလိမ့္မယ္။ Javascript က variable declaration ကိုပဲ hoisted လုပ္တာပါ။ function initialization ကို hoist မလုပ္ပါဘူး။

Hoisting က Javascript မွာ သိသင့္တဲ့ concept တစ္ခုျဖစ္ပါတယ္။ မဟုတ္ရင္ မထင္မွတ္တဲ့ bugs ေတြ တက္လာနိုင္ပါတယ္။ ဒါေျကာင့္ အေကာင္းဆံုးကေတာ့ variable declaration ေတြကို scope ရဲ့ အစမွာ ေျကညာတာအေကာင္းဆံုးပါပဲ။

ဒါကေတာ့ က်ြန္ေတာ္ ေလ့လာမိသေလာက္ Javascript hoisting နဲ့ variable scope အေျကာင္းပါ။ မွားေနတာေတြ မျပည့္စံုတာေတြ ရွိရင္ ေထာက္ျပျကပါဦး။ ေက်းဇူးတင္ပါတယ္။

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: