বৈশ্বিক এবং স্থানীয় পরিবর্তনশীল সুযোগ

এই নিবন্ধে, আপনি সুযোগ এবং এটি জাভাস্ক্রিপ্টে কীভাবে কাজ করে সে সম্পর্কে শিখবেন।

স্কোপ হল জাভাস্ক্রিপ্ট এবং অন্যান্য প্রোগ্রামিং ভাষার একটি মৌলিক ধারণা যা ভেরিয়েবলগুলি অ্যাক্সেস এবং ব্যবহার করা হয় এমন প্রেক্ষাপটকে সংজ্ঞায়িত করে। আপনি জাভাস্ক্রিপ্ট শিখতে এবং ভেরিয়েবলের সাথে আরও কাজ করার সাথে সাথে এটি আপনার কোডের জন্য আরও দরকারী এবং প্রযোজ্য হয়ে ওঠে।

সুযোগ আপনাকে সাহায্য করতে পারে:

• মেমরি আরও দক্ষতার সাথে ব্যবহার করুন: স্কোপ শুধুমাত্র প্রয়োজন হলেই ভেরিয়েবল লোড করার ক্ষমতা প্রদান করে। যদি একটি ভেরিয়েবল সুযোগের বাইরে থাকে, তাহলে আপনাকে এটি বর্তমানে কার্যকর করা কোডে উপলব্ধ করার দরকার নেই।
• বাগগুলি আরও সহজে খুঁজুন এবং ঠিক করুন: স্থানীয় স্কোপের সাথে ভেরিয়েবলগুলিকে বিচ্ছিন্ন করা আপনার কোডে বাগগুলির সমস্যা সমাধান করা সহজ করে তোলে কারণ, গ্লোবাল ভেরিয়েবলের বিপরীতে, আপনি বিশ্বাস করতে পারেন যে বাইরের স্কোপের কোড স্থানীয়ভাবে স্কোপ করা ভেরিয়েবলগুলিকে ম্যানিপুলেট করতে পারে না৷
• পুনঃব্যবহারযোগ্য কোডের ছোট ব্লক তৈরি করুন: উদাহরণস্বরূপ, আপনি একটি বিশুদ্ধ ফাংশন লিখতে পারেন যা বাইরের সুযোগের উপর নির্ভর করে না। আপনি ন্যূনতম পরিবর্তন সহ সহজেই এই জাতীয় ফাংশন অন্য কোথাও সরাতে পারেন।

সুযোগ কি?

একটি ভেরিয়েবলের সুযোগ নির্ধারণ করে যে কোডের মধ্যে আপনি একটি ভেরিয়েবল ব্যবহার করতে পারেন।

জাভাস্ক্রিপ্ট গ্লোবাল বা স্থানীয় সুযোগের ভেরিয়েবলকে সংজ্ঞায়িত করে:

• গ্লোবাল স্কোপ সহ ভেরিয়েবলগুলি জাভাস্ক্রিপ্ট কোডের মধ্যে অন্যান্য সমস্ত স্কোপ থেকে উপলব্ধ।
• স্থানীয় সুযোগ সহ ভেরিয়েবলগুলি শুধুমাত্র একটি নির্দিষ্ট স্থানীয় প্রেক্ষাপটের মধ্যে উপলব্ধ এবং কীওয়ার্ড দ্বারা তৈরি করা হয়, যেমন var , let , এবং const । আপনি যদি একটি ফাংশনের মধ্যে একটি ভেরিয়েবল তৈরি করতে var , let বা const কীওয়ার্ড ব্যবহার করেন, সেই ভেরিয়েবলের স্থানীয় সুযোগ রয়েছে।

এই নিবন্ধের পরবর্তী বিভাগগুলি ব্লক এবং আভিধানিক সুযোগ নিয়ে আলোচনা করে:

• ব্লক স্কোপ ভেরিয়েবল স্থানীয়ভাবে একটি ব্লকে উপলব্ধ কোঁকড়া বন্ধনীর অবস্থান দ্বারা নির্ধারিত হয় যেখানে ব্লক স্টেটমেন্ট সংজ্ঞায়িত করা হয়েছে। শুধুমাত্র let বা const কীওয়ার্ড দিয়ে ঘোষিত ভেরিয়েবলের ব্লক স্কোপ আছে।
• আভিধানিক স্কোপ সেই ভেরিয়েবলটি কোথায় পাওয়া যায় তা নির্ধারণ করতে সোর্স কোডে একটি ভেরিয়েবল ঘোষণা করা হয় এমন অবস্থান ব্যবহার করে। আপনি আভিধানিক পরিবেশ হিসাবে পরিচিত বাইরের সুযোগে উল্লেখ করা ভেরিয়েবলগুলিতে একটি আবদ্ধ ফাংশন অ্যাক্সেস দিতে ক্লোজার ব্যবহার করেন।

যখন একটি ভেরিয়েবল তার সুযোগের মধ্যে অ্যাক্সেস করা হয়, তখন জাভাস্ক্রিপ্ট তার নির্ধারিত মান ফেরত দেয় বা অন্যথায় একটি ত্রুটি তৈরি করে।

একটি পরিবর্তনশীল ঘোষণা করতে:

• স্থানীয় বা গ্লোবাল-স্কোপ ভেরিয়েবল ঘোষণা করতে var , const বা let কীওয়ার্ড ব্যবহার করুন।
• ব্লক-স্কোপ ভেরিয়েবল ঘোষণা করতে const বা let কীওয়ার্ড ব্যবহার করুন।

আপনি যখন একটি ফাংশনে একটি var ভেরিয়েবল ঘোষণা করেন, তখন ঘোষণাটি ভেরিয়েবলটিকে নিকটতম এনক্লোসিং ফাংশনে উপলব্ধ করে। আপনি ব্লক স্কোপ সহ ভেরিয়েবল ঘোষণা করতে var কীওয়ার্ড ব্যবহার করতে পারবেন না।

সুযোগ উদাহরণ

এই উদাহরণটি বৈশ্বিক সুযোগ প্রদর্শন করে কারণ greeting ভেরিয়েবলটি যেকোনো ফাংশন বা ব্লকের বাইরে ঘোষণা করা হয়, যা বর্তমান নথিতে সমস্ত কোডের জন্য এর মান উপলব্ধ করে:

const greeting = 'hello';
console.log(greeting); // 'hello'

গ্লোবাল-স্কোপের উদাহরণে, greeting ভেরিয়েবলটিকে একটি hello মান নির্ধারণ করা হয়েছে।

এই উদাহরণটি স্থানীয় সুযোগ প্রদর্শন করে কারণ এটি একটি ফাংশনের মধ্যে let কীওয়ার্ড সহ greeting ভেরিয়েবল ঘোষণা করে। greeting ভেরিয়েবল একটি স্থানীয়ভাবে স্কোপড ভেরিয়েবল এবং ফাংশনের বাইরে উপলব্ধ নয়।

function greet() {
  let greeting = 'Hello World!';
  console.log(greeting);
}

এই উদাহরণটি ব্লক স্কোপ প্রদর্শন করে কারণ এটি একটি ব্লকের মধ্যে greeting ভেরিয়েবল ঘোষণা করে যাতে ভেরিয়েবলটি শুধুমাত্র কোঁকড়া বন্ধনীর ভিতরে অ্যাক্সেসযোগ্য হয়:

if (true) {
   const greeting = 'hello';
}

console.log(greeting); // ReferenceError: greeting is not defined

লক্ষ্য করুন যে যখন console.log ফাংশন greeting ভেরিয়েবলের মান আউটপুট করার চেষ্টা করে, তখন জাভাস্ক্রিপ্ট প্রত্যাশিত hello বার্তার পরিবর্তে একটি ReferenceError ত্রুটি বার্তা প্রদান করে। কেন?

একটি ত্রুটি ফেরত দেওয়া হয়েছে কারণ greeting ভেরিয়েবলের ব্লক স্কোপ রয়েছে এবং নিকটতম ব্লকটি if কন্ডিশনাল স্টেটমেন্টের অংশ। আপনি ব্লকের বাইরে থেকে ব্লকের ভিতরে ঘোষণা করা let এবং const ভেরিয়েবল অ্যাক্সেস করতে পারবেন না। এইভাবে, আপনি শুধুমাত্র কোঁকড়া বন্ধনীর মধ্যে greeting ভেরিয়েবল অ্যাক্সেস করতে পারেন, যা ব্লক সুযোগ নির্দিষ্ট করে।

এই উদাহরণটি ত্রুটিটি সংশোধন করে কারণ এটি console.log(message) পদ্ধতিটি কোঁকড়া বন্ধনীর ভিতরে নিয়ে যায়। আপডেট করা কোডটি ব্লকের ভিতরে console.log(message) পদ্ধতিটিকে স্থানান্তরিত করে।

if (true) {
   const greeting = 'hello';
   console.log(greeting);
}

সুযোগের প্রকারভেদ

বিশ্বব্যাপী সুযোগ

আপনি প্রোগ্রামের যেকোনো জায়গা থেকে বিশ্বব্যাপী সুযোগ সহ ভেরিয়েবল অ্যাক্সেস করতে পারেন।

একটি HTML ফাইল বিবেচনা করুন যা দুটি জাভাস্ক্রিপ্ট ফাইল আমদানি করে: file-1.js এবং file-2.js :

<script src="file-1.js"></script>
<script src="file-2.js"></script>

এই উদাহরণে, globalMessage ভেরিয়েবলের একটি বিশ্বব্যাপী সুযোগ রয়েছে এবং এটি একটি ফাংশনের বাইরে লেখা। রান এবং এক্সিকিউশনের সময়, আপনি জাভাস্ক্রিপ্ট প্রোগ্রামের যেকোনো জায়গা থেকে globalMessage ভেরিয়েবলের মান অ্যাক্সেস করতে পারেন।

আপনি এই কোড স্নিপেটে file-1.js এবং file-2.js ফাইলের বিষয়বস্তু দেখতে পারেন। উভয় ফাইলেই globalMessage ভেরিয়েবলের উপলব্ধতা লক্ষ্য করুন।

// file-1.js
function hello() {
    var localMessage = 'Hello!';
}

var globalMessage = 'Hey there!';

// file-2.js
console.log(localMessage); // localMessage is not defined
console.log(globalMessage); // Hey there!

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

স্থানীয় সুযোগ এবং ফাংশনের সুযোগ

আপনি যখন একটি JavaScript ফাংশনে var , let বা const কীওয়ার্ড দিয়ে ভেরিয়েবল তৈরি করেন, তখন ভেরিয়েবলগুলি ফাংশনের জন্য স্থানীয় হয়, তাই আপনি শুধুমাত্র ফাংশনের মধ্যে থেকে সেগুলি অ্যাক্সেস করতে পারেন৷ একটি ফাংশন শুরু হলে স্থানীয় ভেরিয়েবল তৈরি করা হয় এবং ফাংশন সম্পাদন শেষ হলে কার্যকরভাবে মুছে ফেলা হয়।

এই উদাহরণ addNumbers() ফাংশনে total ভেরিয়েবল ঘোষণা করে। আপনি addNumbers() ফাংশনের মধ্যে শুধুমাত্র a , b, এবং total ভেরিয়েবল অ্যাক্সেস করতে পারবেন।

function addNumbers(a, b) {
    const total = a + b;
}

addNumbers(3, 4);

আপনি ভেরিয়েবলের নাম দিতে let এবং const কীওয়ার্ড ব্যবহার করতে পারেন। আপনি যখন let কীওয়ার্ড ব্যবহার করেন, তখন JavaScript ভেরিয়েবল আপডেট করতে পারে। যাইহোক, const কীওয়ার্ডের সাথে, ভেরিয়েবলটি স্থির থাকে।

var variable1 = 'Declared with var';
var variable1 = 'Redeclared with var';
variable1; // Redeclared with var

let variable2 = 'Declared with let. Cannot be redeclared.';
variable2 = 'let cannot be redeclared, but can be updated';
variable2; // let cannot be redeclared, but can be updated

const variable3 = 'Declared with const. Cannot be redeclared or updated';
variable3; // Declared with const. Cannot be redeclared or updated

ব্লক সুযোগ

ব্লকগুলি একটি একক বিবৃতি বা বিবৃতিগুলির একটি সেটকে একত্রিত করতে ব্যবহৃত হয়। আপনি const ব্যবহার করতে পারেন বা একটি ব্লক-স্কোপ স্থানীয় ভেরিয়েবল ঘোষণা করতে কীওয়ার্ড let । নোট করুন যে আপনি ব্লক স্কোপ সহ ভেরিয়েবল ঘোষণা করতে var কীওয়ার্ড ব্যবহার করতে পারবেন না।

উদাহরণস্বরূপ, এই ব্লকে, name পরিবর্তনশীলের সুযোগ এবং এর "Elizabeth" মান কোঁকড়া ধনুর্বন্ধনীর মধ্যে রয়েছে। ব্লক স্কোপের মধ্যে ভেরিয়েবল ব্লকের বাইরে পাওয়া যায় না।

{
    const name = "Elizabeth";
}

আপনি if , for , অথবা while স্টেটমেন্টের মধ্যে ব্লক-স্কোপড ভেরিয়েবল ব্যবহার করতে পারেন।

এই কোড স্নিপেটের মধ্যে লুপের for দুটি নোট নিন। One for loop ইনিশিয়ালাইজার ভেরিয়েবল ঘোষণা করতে var কীওয়ার্ড ব্যবহার করে, যা 0 , 1 , এবং 2 সংখ্যার মাধ্যমে বৃদ্ধি পায়। অন্য for লুপ ইনিশিয়ালাইজার ভেরিয়েবল ঘোষণা করতে let কীওয়ার্ড ব্যবহার করে।

for (var i = 0; i < 2; i++) {
    // ...
}

console.log(i); // 2

for (let j = 0; j < 2; j++) {
    // ...
}

console.log(j); // The j variable isn't defined.

পূর্ববর্তী কোডের উদাহরণে, আপনি লক্ষ্য করতে পারেন যে প্রথম for লুপের i ভেরিয়েবলটি for বাইরে ফাঁস হয়ে গেছে এবং এখনও একটি 2 মান ধরে রেখেছে কারণ var কীওয়ার্ড ব্লক স্কোপ ব্যবহার করে না। ইস্যুটি for সেকেন্ডে স্থির করা হয়েছে যেখানে let কীওয়ার্ডের সাথে ঘোষিত j ভেরিয়েবলটি for loop-এর ব্লকে স্কোপ করা হয়েছে এবং for loop শেষ হওয়ার পরে বিদ্যমান নেই।

একটি ভিন্ন সুযোগে একটি পরিবর্তনশীল নামের পুনঃব্যবহার

স্কোপ একটি ফাংশনের মধ্যে একটি ভেরিয়েবলকে বিচ্ছিন্ন করতে পারে, এমনকি যখন আপনি একই ভেরিয়েবলের নাম অন্য কোথাও অন্য জায়গায় ব্যবহার করেন।

এই উদাহরণটি আপনাকে দেখায় কিভাবে সুযোগের ব্যবহার আপনাকে বিভিন্ন ফাংশনে একই পরিবর্তনশীল নাম পুনরায় ব্যবহার করতে দেয়:

function listOne() {
    let listItems = 10;
    console.log(listItems); // 10
}

function listTwo() {
   let listItems = 20;
   console.log(listItems); // 20
}

listOne();
listTwo();

listOne() এবং listTwo() ফাংশনে listItems ভেরিয়েবলগুলি প্রত্যাশিত মান নির্ধারণ করা হয় এবং তাই একে অপরের সাথে সংঘর্ষ হয় না।

বন্ধ এবং আভিধানিক সুযোগ

ক্লোজারগুলি একটি আবদ্ধ ফাংশনকে বোঝায় যেখানে একটি অভ্যন্তরীণ ফাংশন বাইরের ফাংশন স্কোপ অ্যাক্সেস করতে পারে, যা আভিধানিক পরিবেশ হিসাবেও পরিচিত। সুতরাং, জাভাস্ক্রিপ্টে, আপনি ফাংশনগুলিকে বাইরের আভিধানিক পরিবেশের রেফারেন্স দেওয়ার জন্য ক্লোজার ব্যবহার করেন, যা ফাংশনের বাইরে ঘোষিত ফাংশন রেফারেন্স ভেরিয়েবলের ভিতরে কোড করতে দেয়। আসলে, আপনি বাইরের আভিধানিক পরিবেশের রেফারেন্সের একটি চেইন কোড করতে পারেন যাতে একটি ফাংশনকে একটি ফাংশন দ্বারা কল করা হয়, যা অন্য ফাংশন দ্বারা বলা হয়।

এই উদাহরণে, কোডটি আভিধানিক পরিবেশের সাথে একটি বন্ধ তৈরি করে যা তৈরি হয় যখন outer() ফাংশনটি চালু করা হয়, যা hello ভেরিয়েবলের উপর বন্ধ হয়ে যায়। সুতরাং, hello ভেরিয়েবল setTimeout কলব্যাক ফাংশনের মধ্যে ব্যবহৃত হয়।

function outer() {
    const hello = 'world';

    setTimeout(function () {
        console.log('Within the closure!', hello)
    }, 100);
}

outer();

আভিধানিক সুযোগের সাথে, সুযোগটি উৎস কোড সংকলনের সময় নির্ধারিত হয়, রানটাইমে নয়। আভিধানিক পরিবেশ সম্পর্কে আরও জানতে, লেক্সিকাল স্কোপিং এবং ক্লোজার দেখুন।

মডিউল

জাভাস্ক্রিপ্ট মডিউল জাভাস্ক্রিপ্ট কোড সংগঠিত করতে সাহায্য করে। সঠিকভাবে ব্যবহার করা হলে, তারা আপনার কোডবেসে একটি কার্যকরী কাঠামো প্রদান করে এবং কোড পুনঃব্যবহারের ক্ষেত্রে সহায়তা করে। বিভিন্ন ফাইলে ভেরিয়েবল শেয়ার করার জন্য গ্লোবাল ভেরিয়েবল ব্যবহার করার পরিবর্তে, জাভাস্ক্রিপ্ট মডিউলগুলি ভেরিয়েবল রপ্তানি এবং আমদানি করার একটি কৌশল প্রদান করে।

// hello.js file
function hello() {
  return 'Hello world!';
}

export { hello };

// app.js file
import { hello } from './hello.js';

console.log(hello()); // Hello world!

স্কোপ ভিজ্যুয়ালাইজার ডেমো

স্কোপ একটি মৌলিক ধারণা যা প্রতিটি জাভাস্ক্রিপ্ট বিকাশকারীকে বোঝা উচিত। স্কোপ সিস্টেমটি আরও ভালভাবে বোঝার জন্য, আপনি JS Scope Visualizer- এর সাথে আপনার নিজের কোড লেখার চেষ্টা করতে পারেন। ডেমো আপনাকে জাভাস্ক্রিপ্ট স্কোপগুলি কল্পনা করতে সাহায্য করতে কোডে রঙ ব্যবহার করে।

উপসংহার

এই নিবন্ধটি সুযোগ বিভিন্ন ধরনের পরিচয় করিয়ে দেয়. JavaScript স্কোপ হল ওয়েব ডেভেলপমেন্টের মধ্যে আরও উন্নত ধারণাগুলির মধ্যে একটি, তাই এটি দুর্দান্ত যে আপনি এই বিষয়বস্তুটি পড়েছেন এবং এই বিষয়টি বুঝতে সময় নিয়েছেন৷

স্কোপ একটি ব্যবহারকারী-মুখী বৈশিষ্ট্য নয়। এটি শুধুমাত্র ওয়েব ডেভেলপারকে প্রভাবিত করে যিনি কোড লেখেন, কিন্তু স্কোপ কীভাবে কাজ করে সে সম্পর্কে জ্ঞান আপনাকে বাগগুলি উঠলে ঠিক করতে সাহায্য করতে পারে।