জাভাস্ক্রিপ্ট ক্লোজার

জাভাস্ক্রিপ্ট ভ্যারিয়েবলগুলো লোকাল বা গ্লোবাল স্কোপে থাকতে পারে।

ভ্যারিয়েবলকে ক্লোজারের মাধ্যমে প্রাইভেট ভ্যারিয়েবল করা যায়।

গ্লোবাল ভ্যারিয়েবল

ফাংশনের ভিতরে ডিফাইন করা সকল ভ্যারিয়েবলকে একটি ফাংশন এক্সেস করতে পারে। নিচের উদাহরণে ভ্যারিয়েবল a হচ্ছে লোকাল ভ্যারিয়েবল। লোকাল ভ্যারিয়েবল শুধুমাত্র ফাংশনের ভিতর থেকে এক্সেস করা যায়, ফাংশনের বাহিরের কোথাও একে এক্সেস করা যাবে না।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>ফাংশনটি  দ্বারা ফাংশনের ভিতর উল্লেখিত সকল ভেরিয়েবলকে অ্যাক্সেস করা যায়ঃ</p>
<button type="button" onclick="myFunction()">ক্লিক কর!</button>
    <p id="demo"></p>
<script>
    function myFunction() {
        var a = 4;
        document.getElementById("demo").innerHTML = a * a;
    }
</script>
</body>
</html>

ফলাফল

ফাংশনের বাহিরে ডিফাইন করা ভ্যারিয়েবলকেও এক্সেস করতে পারে। নিচের উদাহরণে ভ্যারিয়েবল a হচ্ছে গ্লোবাল ভ্যারিয়েবল। গ্লোবাল ভ্যারিয়েবল ওয়েব পেজে উইন্ডো অবজেক্টের অধীনস্থ। গ্লোবাল ভ্যারিয়েবলকে সকল স্ক্রিপ্ট ব্যবহার এবং পরিবর্তন করতে পারে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>ফাংশনটি  দ্বারা ফাংশনের বাইরের ভেরিয়েবলকে অ্যাক্সেস করা যায়ঃ</p>
<button type="button" onclick="myFunction()">ক্লিক কর!</button>
    <p id="demo"></p>
<script>
    var a = 4;
    function myFunction() {
        document.getElementById("demo").innerHTML = a * a;
    }
</script>
</body>
</html>

ফলাফল

একই নামের গ্লোবাল ও লোকাল ভ্যারিয়েবল পরস্পর থেকে ভিন্ন। একটি পরিবর্তন করলেও অন্যটি অপরিবর্তিত থাকে।

var কি-ওয়ার্ড ছাড়া তৈরিকৃত সকল ভ্যারিয়েবল গ্লোবাল ভ্যারিয়েবলে পরিণত হয়।

গননা সমস্যা

ধরুণ আপনি কোনোকিছু গণনা করার জন্য একটি ভ্যারিয়েবল ব্যবহার করবেন এবং আপনি চান এটি সব ফাংশনে কাজ করুক।

এক্ষেত্রে আপনি একটি গ্লোবাল ভ্যারিয়েবল এবং ফাংশন ব্যবহার করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>গ্লোবাল ভেরিয়েবল এর মাধ্যমে গননা করা হচ্ছে।</p>
<button type="button" onclick="myFunction()">গননা কর!</button>
    <p id="demo">0</p>
<script>
    var counter = 0;

    function add() {
        return counter += 1;
    }

    function myFunction(){
        document.getElementById("demo").innerHTML = add();
    }
</script>
</body>
</html>

ফলাফল

এখানে একটি সমস্যা হচ্ছে, add() ফাংশনকে কল করা ছাড়াই যেকোনো স্ক্রিপ্ট পেজের counter পরিবর্তন করতে পারবে।

counter কে শুধুমাত্র add() পরিবর্তন করতে পারবে, এমন অবস্থা তৈরি করতে হবে।

যদি আমরা ফাংশনের ভিতরে counter ডিক্লেয়ার করি, তাহলে add() ফাংশন ছাড়া counter পরিবর্তন করা যাবে নাঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
    <p>Counting with a local variable.</p>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo">0</p>
<script>
    function add() {
        var counter = 0;
        return counter += 1;
    }

    function myFunction(){
        document.getElementById("demo").innerHTML = add();
    }
</script>
</body>
</html>

ফলাফল

ইহা কার্যকর না! প্রতিবার যখন add() ফাংশন কল করা হয়, counter এর মান 1 থাকে।

জাভাস্ক্রিপ্ট নেস্টেড ফাংশন

সকল ফাংশন গ্লোবাল স্কোপকে এক্সেস করতে পারে।

জাভাস্ক্রিপ্টের সকল ফাংশন তাদের উপরের স্কোপকে এক্সেস করতে পারে।

জাভাস্ক্রিপ্ট নেস্টেড ফাংশন সাপোর্ট করে। নেস্টেড ফাংশন তাদের উপরের স্কোপকে এক্সেস করতে পারে।

নিচের উদাহরণে, plus() ফাংশনটি প্যারেন্ট ফাংশনের counter ভ্যারিয়েবলকে এক্সেস করতে পারবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>লোকাল ভেরিএবল এর মাধ্যমে গননা করা হচ্ছে।</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();
    return counter;
}
</script>
</body>
</html>

ফলাফল

এখনও সমাধান পাওয়া যায়নি। যদি আমরা বাইরে থেকে plus() ফাংশনকে এক্সেস করতে পারি তবে এই সমস্যার সমাধান পাওয়া যাবে।

counter = 0 এই স্টেটমেন্টটি শুধুমাত্র একবার এক্সিকিউট করার একটি উপায় বের করতে হবে।