Vivasoft-logo

2.5 এক্সিকিউশন কনটেক্সট

এক্সিকিউশন কন্টেক্সট একটি এনভাইরনমেন্ট যেখানে জাভাস্ক্রিপ্ট কোড এক্সিকিউট করা হয়। যখনই জাভাস্ক্রিপ্টে কোন কোড রান করা হয়, এটি একটি এক্সিকিউশন কন্টেক্সটের মধ্যে রান করা হয়। জাভাস্ক্রিপ্টে তিন ধরনের এক্সিকিউশন কন্টেক্সট আছেঃ-

১) গ্লোবাল এক্সিকিউশন কন্টেক্সট:

এটি ডিফল্ট এক্সিকিউশন কন্টেক্সট। যে কোডটি কোন ফাংশনের ভিতরে নেই তা গ্লোবাল এক্সিকিউশন কন্টেক্সটে আছে। এটি দুটি জিনিস সম্পন্ন করেঃ

  • এটি একটি গ্লোবাল অবজেক্ট তৈরি করে যা একটি window অবজেক্ট (ব্রাউজারের ক্ষেত্রে) এবং global অবজেক্ট (নোডের ক্ষেত্রে)
  • this এর ভ্যালু হিসাবে গ্লোবাল অবজেক্টকে সেট করে। একটি প্রোগ্রামে শুধুমাত্র একটি গ্লোবাল এক্সিকিউশন কন্টেক্সট থাকতে পারে।

২) ফাংশন এক্সিকিউশন কন্টেক্সটঃ

যখনই কোন ফাংশন কল করা হয়, সেই ফাংশনের জন্য জেএস ইঞ্জিন একটি নতুন এক্সিকিউশন কন্টেক্সট তৈরি করে। প্রতিটি ফাংশনের নিজস্ব এক্সিকিউশন কন্টেক্সট আছে। একাধিক সংখ্যক ফাংশন এক্সিকিউশন কন্টেক্সট হতে পারে। ফাংশন এক্সিকিউশন কন্টেক্সটের গ্লোবাল এক্সিকিউশন কন্টেক্সটের সকল কোড অ্যাক্সেস আছে যদিও গ্লোবাল কন্টেক্সটের ফাংশন এক্সিকিউশন কন্টেক্সটের কোডের অ্যাক্সেস নেই। গ্লোবাল এক্সিকিউশন কন্টেক্সটের কোড এক্সিকিউট করার সময় যদি জেএস ইঞ্জিন কোন ফাংশন কল পায়, এটি সেই ফাংশনের জন্য একটি নতুন ফাংশন এক্সিকিউশন কন্টেক্সট তৈরি করে। ব্রাউজার কন্টেক্সটে, যদি কোড strict মোডে এক্সিকিউট করা হয়, তাহলে this এর ভ্যালু undefined অন্যথায় window অবজেক্ট হবে ফাংশন এক্সিকিউশন কন্টেক্সট।

৩) ইভাল এক্সিকিউশন কন্টেক্সটঃ

ইভাল ফাংশনের ভিতরে এক্সিকিউশন কন্টেক্সট।

নিম্নলিখিত কোড দেখুনঃ

				
					let a = 7;
const multByTen = (a) => a * 10;
let results = multByTen(a);
console.log(results); // 70

উপরের কোডে লক্ষ্য করুনঃ

  • প্রথমে, a ভ্যারিয়েবলে 7 অ্যাসাইন করা হয়েছে।
  • দ্বিতীয়ত, একটি ফাংশন multByTen() ডিক্লেয়ার করা হয়েছে যা 10 এর সাথে তার আর্গুমেন্ট কে গুণ করে।
  • তৃতীয়ত, একটি প্যারামিটার হিসাবে a পাস করে multByTen() ফাংশনকে কল করে এবং ভ্যারিয়েবল results – এ রিটার্ন মান অ্যাসাইন করা হয়েছে।
  • পরিশেষে, কনসোলে ভ্যারিয়েবল results আউটপুট করা হয়েছে।

অনেক সহজ কোডটা তাই না? যাইহোক, বিহাইন্ড দ্যা সিন জাভাস্ক্রিপ্ট অনেক কিছু করে। ইতিমধ্যে আমরা এক্সিকিউশন কন্টেক্সট সম্পর্কে জেনে গেছি। কিন্তু প্রতিটি এক্সিকিউশন কন্টেক্সটে দুটি করে phases আছেঃ ১। creation phase এবং ২। execution phase।

১। Creation phase

  • একটি গ্লোবাল অবজেক্ট তৈরি করে অর্থাৎ, ওয়েব ব্রাউজারে window বা নোড জেএসে global।
  • this নামে একটি গ্লোবাল ভ্যারিয়াবল তৈরি করে যা গ্লোবাল অবজেক্টকে নির্দেশ করে।
  • সকল ভ্যারিয়েবল এবং ফাংশনের জন্য একটি মেমোরি স্পেস সেটআপ করে।
  • ভ্যারিয়েবলের ডিফল্ট ভ্যালু হিসাবে undefined অ্যাসাইন করে এবং ফাংশন ডিক্লেয়ারেশনগুলি হীপ মেমোরিতে স্টোর করে।

আমাদের উদাহরণে, creation phase – এ জাভাস্ক্রিপ্ট ইঞ্জিন গ্লোবাল এক্সিকিউশন কন্টেক্সটে ভ্যারিয়েবল a ও results এবং ফাংশন ডিক্লেয়ারেশন multByTen() স্টোর করে। এছাড়াও, এটি ভ্যারিয়েবল a এবং results কে undefined হিসাবে ইনিশিয়ালাইজ করে।

Global Execution Context (Execution Phase Browser)

  • window: Global Object
  • this: window
  • a: undefined
  • multByTen: fn()
  • results: undefined

Creation phase এর পর, গ্লোবাল এক্সিকিউশন কন্টেক্সট execution phase শুরু করে।

২) Execution phase

Execution phase – এ, জাভাস্ক্রিপ্ট ইঞ্জিন লাইন বাই লাইন কোড এক্সিকিউট করে। এই phase -এ, এটি ভ্যারিয়েবলের মান অ্যাসাইন করে এবং ফাংশন কল এক্সিকিউট করে।

Global Execution Context (Execution Phase Browser)

  • window: Global Object
  • this: window
  • a: 7
  • multByTen: fn()
  • results: multByTen(a)

আমরা আগেই জেনেছি প্রতিটি ফাংশন কলের জন্য জাভাস্ক্রিপ্ট ইঞ্জিন একটি নতুন ফাংশন এক্সিকিউশন কন্টেক্সট তৈরি করে। ফাংশন এক্সিকিউশন কন্টেক্সট গ্লোবাল এক্সিকিউশন কন্টেক্সটের মতই কিন্তু ফাংশন এক্সিকিউশন কন্টেক্সট গ্লোবাল অবজেক্ট তৈরি করার পরিবর্তে এটি arguments অবজেক্ট তৈরি করে যা ফাংশনে পাস করা সকল প্যারামিটারের একটি রেফারেন্স ধারণ করে:

Function Execution Context (Creation Phase Browser)

  • arguments: Local Object
  • this: window
  • a: undefined

আমাদের উদাহরণে, ফাংশন এক্সিকিউশন কন্টেক্সট arguments অবজেক্ট তৈরি করে যা ফাংশনে পাস করা সকল প্যারামিটারকে নির্দেশ করে, this এর মান হিসাবে গ্লোবাল অবজেক্টে window কে সেট করে। এবং a প্যারামিটার কে undefined হিসাবে ইনিশিয়ালাইজ করে।

Function Execution Context (Execution Phase Browser)

  • arguments: Local Object
  • this: window
  • a: 7

ফাংশন এক্সিকিউশন কন্টেক্সটে Execution phase চলার সময়, এটি a প্যারামিটারে 7 অ্যাসাইন করে এবং ফলাফল (70) গ্লোবাল এক্সিকিউশন কন্টেক্সটের results ভ্যারিয়েবলে রিটার্ন করে। 

Global Execution Context (Execution Phase Browser)

  • window: Global Object
  • this: window
  • a: 7
  • multByTen: fn()
  • results: 70
  • নিচের উদাহরণটি দেখুন কিভাবে আউটপুট 100 আসে
     
     
     
    let x = 10;
    function timesTen(a){
        return a * 10;
    }
    let y = timesTen(x);
    console.log(y);
     
output: 100

 

  • নিচের কোডটি রান করুন এবং দেখুন কি আউটপুট আসে
     
     
     
    function a() {
        console.log(‘It is the first function’);
        function b() {
            console.log(‘It is the second function’);
        }
        b();
    }
    a();
    console.log(‘It is GEC’);
     
 
 
 
output:
 
It is the first function
It is the second function
It is GEC
 
  • নিচের কোডটি রান করুন এবং দেখুন কি আউটপুট আসে
     
     
     
    function first() {
        setTimeout(() => {
          console.log(‘It is the first function’);
       }, 3000);
     
       function second() {
            console.log(‘It is the second function’);
        }
        second();
    }
    first();
    console.log(‘It is GEC’);
     
 
 
 
Output:
It is the second function
It is GEC
It is the first function
 
  • নিচের কোডটি রান করুন এবং দেখুন কি আউটপুট আসে
    let a = 20;
    const b = 30;
    var mul;
    function multiply(e, f) {
        var g = 20;
        return e * f * g;
    }
    mul = multiply(a, b);
    console.log(mul)
     
output: 12000
 
  • নিচের কোডটি রান করুন এবং দেখুন কি আউটপুট আসে
    console.log(‘Global Execution context’)
     
    function fn1() {
        setTimeout(() => {
            console.log(‘Inside function fn1 with the SetTimeout of 3 seconds’);
        }, 3000);
    }
     
    setTimeout(() => {
        console.log(‘Inside the Global Execution context With SetTimeout of 10 seconds’);
    }, 10000);
     
    function fn2() {
        console.log(‘inside function fn2’);
    }
     
    function fn3(){
        setTimeout(() => {
            console.log(‘Inside function fn3 with the SetTimeout of 3 seconds’);
        }, 3000);
    }
     
    fn1();
    fn2();
    fn3();
     
    console.log(‘Last line Output of Global Execution Context’);
     
 
 
 
output:
Global Execution context
inside function fn2
Last line Output of Global Execution Context
Inside function fn1 with the SetTimeout of 3 seconds
Inside function fn3 with the SetTimeout of 3 seconds
 
  • নিচের কোডটি রান করুন এবং দেখুন কি আউটপুট আসে
     
     
     
    function f1() {
        console.log(‘Inside f1’);
        function f2() {
            setTimeout(() => {
                console.log(‘Inside f2’);
            }, 3000);
     
            function f3() {
                console.log(‘Inside f3’);
            }
            f3();
        }
     
        function f4() {
            console.log(‘Inside f4’);
        }
     
        setTimeout(() => {
            console.log(‘Done execution’);
        }, 5000);
     
        f2();
        f4();
    }
     
    f1();
    console.log(‘Global context’);
     
     
     
     
    output:
    Inside f1
    Inside f3
    Inside f4
    Global context
    Inside f2
    Done execution
  • নিচের কোডের আউটপুট কি?
     
     
     
    let c = 10;
    let a = 3;
    let b = 9;
     
    function timesTen(x,y,z) {
        return x+y+z;
    }
     
    let d = timesTen(c,b,a);
     
    console.log(d);
     
  • কেন এটা referenceError দেখাচ্ছে
     
     
     
    let x
    function timesTen(a) {
        x = 10;
        return a * 10;
    }
     
    let y = timesTen(x);
    console.log(y);
     

     

  • কিভাবে এই কোড সঠিক উত্তর দিতে পারে
     
     
     
    var z
    function timesTen(a) {
        z = 10;
        return a * 10;
    }
     
    let res = timesTen(z);
     
    console.log(res);
     

     

  • কোডটি চালানোর আগে কনসোলে কী দেখানো হচ্ছে তা খুঁজে বের করার চেষ্টা করুন
 
 
 
function first() {
    setTimeout(() => {
        console.log(‘It is the first function’);
        function second() {
            console.log(‘It is the second function’);
        }
        second();
    },  3000);
 
    function third() {
        console.log(‘It is the third function’);
    }
    third();
}
first();
 
console.log(‘It is GEC’);
 
  • কোডটি চালানোর আগে কনসোলে কী দেখানো হচ্ছে তা খুঁজে বের করার চেষ্টা করুন
 
 
 
function fn1(a) {
    console.log(‘In fn1’);
    return function() {
        console.log(a*a);
        function fn2() {
            console.log(‘Inside fn2’);
        }
        fn2();
    }
}
let result = fn1(3);
result();
2.4. কম্পাইলিং বনাম পলিফিলিং
2.6. জাভাস্ক্রিপ্টে স্কোপ
Vivasoft-logo

প্রিমিয়াম কোয়ালিটির সফটওয়্যার সলুশ্যনের জন্য নির্ভরযোগ্য প্রতিষ্ঠান থেকে আউটসোর্স করুন আপনার কাঙ্ক্ষিত সফটওয়্যার এবং ব্যবসাকে করুন আগের থেকে আরো বেশি তরান্বিত। আউটসোর্সিং এর ব্যাপারে এমন একটি টিম নির্বাচন করুন যারা তাদের দক্ষতা ও সৃষ্টিশীলতার মাধ্যমে আপনার ভিশনকে করবে আরো সুদৃঢ়।

সামাজিক মিডিয়াতে আমরা

Facebook Linkden Instagram

ঠিকানা

বনানী অফিস

ফ্লোর #১১, ১৬ ও ১৯ , আহমেদ টাওয়ার ২৮-৩০,কামাল আতাতুর্ক এভিনিউ, ঢাকা ১২১৩।

রাজশাহী অফিস

৬/এ, রাবেয়া ভিলা, বালিয়াপাকুর বোরো বটতলা, ওয়ার্ড - ২৭, বোয়ালিয়া, রাজশাহী-৬২০৪

লিংকসমূহ

অন্যান্য

যোগাযোগ করুন

contact@vivasoftltd.com

+880 1713428432

অফিসের সময়: সোমবার থেকে শুক্রবার সকাল 10:00 - 7:00 PM GMT +6:00

© Vivasoft 2023 • All rights reserved.