2.6 জাভাস্ক্রিপ্টে স্কোপ

 

Scope কি?

Scope মূলত একটা নির্দিষ্ট সীমানাকে বোঝায়। যার বাহিরে Variable এবং Function-গুলো এক্সেসিবল না। যদি এই সীমানার বাহিরে কোন Variable এবং Function কে কল করা হয় তাহলে তার কোন অস্তিত্ব থাকবে না। একটি কথা ভাল করে মাথায় সংরক্ষণ করে রাখেন যে, জাভাস্ক্রিপ্টে একমাত্র তখনই Scope তৈরি হয়, যখন আমরা কোন function ইনভোক বা কল করি। হ্যাঁ, function ছাড়া আর কোথাও Scope তৈরি হয় না। আর এই Scope হচ্ছে দুই প্রকার-

  • Global Scope
  • Local Scope

১. Global Scope

জাভাস্ক্রিপ্টে বাই ডিফল্ট সব কিছু Global Scope – এ রান হয়। যার এক্সেস সব জায়গায় থাকে। উদাহরণস্বরূপ-

 
 
 
var globalVariable = “I am global variable.”;
console.log(globalVariable); // I am global variable.
 
var myFunc = function () {
console.log(globalVariable);
};
 
myFunc(); // I am global variable.
 

উপরের কোডটুকু রান করলে দেখতে পারবেন যে globalVariable নামের ভেরিয়েবলটিকে সব যায়গায় ব্যবহার করা যাচ্ছে এবং সবার আউটপুটও একই দেখাচ্ছে।

২. Local Scope

আগেই বলেছিলাম যে, জাভাস্ক্রিপ্ট একমাত্র তখনই Scope তৈরি করে যখন কোন Function কে ইনভোক বা কল করা হয়। এই Scope কেই বলা হয় Local Scope। মানে হচ্ছে, তার ভিতরে যা কিছু থাকবে তার নিজস্ব Scope – এর বাহিরে এর কোন অস্তিত্ব থাকবে না। অর্থাৎ, তার Scope – এর ভিতরে লেখা কোন ভেরিয়েবলকে যদি আমরা বাহিরে অন্য কোথাও ব্যবহার করতে চাই তাহলে জাভাস্ক্রিপ্ট খুব সুন্দর করে একটি আনকট রেফারেন্সে ইরর দিয়ে বলে দিবে যে খোকা তুমি যাকে ব্যবহার করতে চাচ্ছ সে তো কোথাও ডিফাইন করা নেই। চলুন একটা উদাহরণ দিয়ে দেখা যাক-

 
 
 
var globalVariable = “I am global variable.”;
 
var myFunc = function () {
var localVariable = “I am local variable.”;
 
console.log(globalVariable);
console.log(localVariable);
};
 
myFunc();
// I am global variable.
// I am local variable.
 
console.log(localVariable); // undefined
 

 

উপরের কোডটুকু রান করলে দেখতে পারবেন যে প্রথমে দেখাচ্ছে I am global variable. এবং I am local variable. তারপর অতি ভদ্রতার সাথে খুব সুন্দর করে এরর দিয়ে বলে দিচ্ছে যে Uncaught ReferenceError: localVariable is not defined।

Lexical Scoping কি?

এখন সবার মনে প্রশ্ন আসতে পারে যে, এই Lexical Scoping – টা আবার কি? একটু অপেক্ষা করেন মাথা গরম করার কোন দরকার নেই। আসলে জাভাস্ক্রিপ্টকে বলা হয় Lexical Scoping ল্যাঙ্গুয়েজ। আমরা ফাংশনের ভিতরে আমাদের প্রয়োজন অনুযায়ী একাধিক ফাংশন তৈরি করতে পারি এবং চাইল্ড ফাংশনগুলো তার প্যারেন্ট ফাংশনের সব ভেরিয়েবলস এবং আর্গুমেন্টেসের এক্সেস পায়। কিন্তু আউটার ফাংশনগুলো তার চাইল্ড ফাংশনের ভেরিয়াবলস এবং আর্গুমেন্টসের কোন এক্সেস পায় না। এই যে চাইল্ড ফাংশনগুলো তার প্যারেন্ট ফাংশনের ভেরিয়েবলস এবং আর্গুমেন্টেসের এক্সেস পাচ্ছে এই এক্সেস পাওয়াকেই বল হয় Lexical Scoping।

 
 
 
function outerFunc(a) {
var outerFuncVariable = “Hi there, I am outer “ + a;
 
console.log(outerFuncVariable); // Hi there, I am outer function variable
 
function innerFunc() {
var innerFuncVariable = “Hi there, I am inner “ + a;
console.log(innerFuncVariable); // Hi there, I am inner function variable
}
 
innerFunc();
 
console.log(innerFuncVariable); // undefined
}
 
outerFunc(“function variable”);
 

 

নোটসঃ

  • জাভাস্ক্রিপ্টের গ্লোবাল স্কোপ এবং লোকাল স্কোপ আছে।
  • যে কোন ফাংশনের বাইরে ডিক্লেয়ারড এবং ইনিশিয়ালাইজড ভ্যারিয়েবলগুলো গ্লোবাল ভ্যারিয়েবল হয়ে যায়।
  • ফাংশনের ভিতরে ডিক্লেয়ারড এবং ইনিশিয়ালাইজড ভ্যারিয়েবলগুলো সেই ফাংশনের লোকাল ভ্যারিয়েবল হয়।
  • গ্লোবাল ভ্যারিয়েবলগুলো প্রোগ্রামের যেকোন জায়গায় অ্যাক্সেস এবং পরিবর্তন করা যেতে পারে।
  • ফাংশন ডিক্লেয়ারেশনের বাইরে লোকাল ভ্যারিয়েবল সমূহ অ্যাক্সেস করা যাবে না।
  • গ্লোবাল ভ্যারিয়েবল এবং লোকাল ভ্যারিয়েবল একই নাম থাকতে পারে। কিন্তু একই নাম ব্যবহার না করায় ভালো।
  • global scope পরিবর্তন দেখুন
    var x=23;
    function myFunc()
    {
    x=20
    console.log(x)
    }
    myFunc()
    console.log(x)
output:
20
20
  • নীচের উদাহরণটি বোঝার চেষ্টা করুন
    function myFunc()
    {
    var y=20
    console.log(y)
    }
    myFunc()
    console.log(y)
output:
ReferenceError : y is not defined because y is only defined in functional scope not in global scope
  • নীচের উদাহরণটি বোঝার চেষ্টা করুন
    let animal=‘dog’;
    console.log(animal);
    if(true){
    let animal = ‘cat’;
    console.log(animal);
    }
    console.log(animal);
output:
dog
cat
dog
  • নীচের উদাহরণটি বোঝার চেষ্টা করুন
    var a=10
    function check(){
    console.log(a+y)
    }
    check()
    var y=5
output: NaN কারণ var y=undefined এইজন্য a+y= Nan
 
  • নীচের উদাহরণটি বোঝার চেষ্টা করুন
    function scope(){
    if(true){
    var a=‘This is funtional scope’
    let b=“this is block scope”
    }
    console.log(a)
    console.log(b)
    }
    scope()
    output:
    This is functional scope
    ReferenceError: b is not defined
  • কেন x এর value এইখানে unchanged global scope এ
var x=10;
function myFunc()
{
varx=20
console.log(x)
}
myFunc()
console.log(x)
  • কেন এমন আউটপুট দেখাছে
function myFunc()
{
const y=10;
y=20
console.log(y)
}
myFunc()
console.log(y)
  • কোড চালানোর আগে চিন্তা করুন আউটপুট কি হবে এবং তারপর রান করুন এবং বলুন কেন এটি এই আউটপুট দেখাচ্ছে
let str1 = ‘Hello’;
function greet() {
let str2 = ‘World’;
console.log(str1+ ‘ ‘ + str2);
if (str2== ‘World’) {
let str3= ‘hello’;
console.log(str1 + ‘ ‘ + str2 + ‘ ‘ + str3);
}
console.log(str1 + ‘ ‘ + str2 + ‘ ‘ + str3);
}
greet();
  • কোড চালানোর আগে চিন্তা করুন আউটপুট কি হবে এবং তারপর রান করুন এবং বলুন কেন এটি এই আউটপুট দেখাচ্ছে
if (true) {
const foo = “foo”;
console.log(foo);
if (true) {
const bar = “bar”;
console.log(foo,bar);
if (true) {
const hello = “hello”;
console.log(foo, bar,hello);
}
console.log(foo, bar,hello);
}
}
  • কোড চালানোর আগে চিন্তা করুন আউটপুট কি হবে এবং তারপর রান করুন এবং বলুন কেন এটি এই আউটপুট দেখাচ্ছে
function run() {
const two = 2;
let count = 0;
function run2(){}
console.log(two);
console.log(count);
console.log(run2);
}
run();
console.log(two);
console.log(count);
console.log(run2);