জাভাস্ক্রিপ্ট চলক উত্তোলনের জন্য একটি গাইড let লেট এবং কনস্টের সাথে

নতুন জাভাস্ক্রিপ্ট বিকাশকারীদের প্রায়শই ভেরিয়েবল / ফাংশন উত্তোলনের অনন্য আচরণ বোঝার জন্য কঠোর সময় হয়।

যেহেতু আমরা পরে ভার, কথা এবং কনসাল্টেশন সম্পর্কে কথা বলতে যাচ্ছি, ফাংশন উত্তোলনের পরিবর্তে পরিবর্তনশীল উত্তোলন বোঝা গুরুত্বপূর্ণ important এর মধ্যে ডুব দিন!

পরিবর্তনশীল উত্তোলন কী?

জাভাস্ক্রিপ্ট ইঞ্জিন সমস্ত ভেরিয়েবল ঘোষণাকে "ভার" ব্যবহার করে এমনভাবে আচরণ করে যেন সেগুলি কার্যকরী স্কোপের শীর্ষে ঘোষিত হয় (যদি কোনও ফাংশনের অভ্যন্তরে ঘোষণা করা হয়) অথবা বিশ্বব্যাপী সুযোগ (যদি কোনও ফাংশনের বাইরে ঘোষিত হয়) তবে আসল ঘোষণাটি যেখানেই হয় তা নির্বিশেষে। এটি মূলত "উত্তোলন"।

সুতরাং ভেরিয়েবলগুলি তাদের ঘোষণার আগে উপলব্ধ হতে পারে।

আসুন এটি কার্যকরভাবে দেখা যাক ..

// আউটপুট: অপরিবর্তিত
console.log (আকৃতি);
var আকৃতি = "বর্গ";
// আউটপুট: "স্কোয়ার"
console.log (আকৃতি);

আপনি যদি সি-ভিত্তিক ভাষা থেকে এসে থাকেন, আপনি যখন প্রথম কনসোল.লগটি বলা হয় তখন ভেরিয়েবল শেপটি সেই সময়ে সংজ্ঞায়িত না করা হলে একটি ত্রুটি ছুঁড়ে ফেলার আশা করতেন। তবে জাভাস্ক্রিপ্ট ইন্টারপ্রেটার এগিয়ে দেখায় এবং সমস্ত পরিবর্তনশীল ঘোষণা শীর্ষে "উত্তোলন" করে এবং আরম্ভটি একই জায়গায় থাকে।

পর্দার আড়ালে কী ঘটছে তা এখানে:

// ঘোষণা শীর্ষে উত্তোলন করা হচ্ছে
বিভিন্ন আকার;
// আউটপুট: অপরিবর্তিত
console.log (আকৃতি);
আকৃতি = "বর্গ";
// আউটপুট: "স্কোয়ার"
console.log (আকৃতি);

জিনিসগুলিকে আরও সুস্পষ্ট করার জন্য একটি কার্যকরী সুযোগে এইবার এখানে আরও একটি উদাহরণ রয়েছে:

ফাংশন getShape (শর্ত) {
    // আকৃতি অপরিজ্ঞাতকৃত মান সহ এখানে বিদ্যমান
    // আউটপুট: অপরিবর্তিত
    console.log (আকৃতি);
    যদি (শর্ত) {
        var আকৃতি = "বর্গ";
        // অন্য কিছু কোড
        প্রত্যাবর্তন আকৃতি;
    } অন্য {
        // আকৃতি অপরিজ্ঞাতকৃত মান সহ এখানে বিদ্যমান
        প্রত্যাবর্তন মিথ্যা;
    }
}

উপরের উদাহরণে আপনি দেখতে পারেন কীভাবে আকৃতির ঘোষণাটি getShape () ফাংশনের শীর্ষে উত্তোলিত হয়। এটি অন্য কারণগুলিতে যেমন দেখা যায় / অন্য ব্লকগুলি স্থানীয় সুযোগ তৈরি না করে কারণ এটি। একটি স্থানীয় সুযোগ মূলত জাভাস্ক্রিপ্টে ফাংশন সুযোগ। অতএব, আকারটি ইফ ব্লকের বাইরে এবং 'অপরিজ্ঞাত' মান সহ ফাংশনের মধ্যে সর্বত্র অ্যাক্সেসযোগ্য।

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

ব্লক-স্তরীয় ঘোষণা লিখুন!

ES6 বিকাশকারীদের জীবনকালক্রমে আরও নিয়ন্ত্রণ এবং নমনীয়তা সরবরাহ করতে ব্লক-স্তরের স্কোপিং বিকল্পগুলি প্রবর্তন করে introduced

ব্লক স্তরের ঘোষণাগুলি ব্লক / লেক্সিকাল স্কোপগুলিতে করা হয় যা একটি ব্লকের "{}" এর মধ্যে তৈরি করা হয়।

ঘোষণা দিন

এই সিনট্যাক্সটি ভের মতো, কেবল তার পরিবর্তনের পরিবর্তে ভেরিয়েবলের ঘোষনা দিন যার ব্যাপ্তিটি কেবল সেই কোড ব্লক।

আপনার লেট প্রজ্ঞাপনগুলিকে একটি ব্লকের শীর্ষে রাখুন যাতে সেগুলি পুরো ব্লকের মধ্যে উপলব্ধ থাকে।

উদাহরণ স্বরূপ:

ফাংশন getShape (শর্ত) {
// আকৃতি এখানে নেই
// কনসোল.লগ (আকৃতি); => রেফারেন্স এরিয়ার: আকৃতিটি সংজ্ঞায়িত করা হয়নি
যদি (শর্ত) {
        আকার = "বর্গ";
        // অন্য কিছু কোড
        প্রত্যাবর্তন আকৃতি;
    } অন্য {
        // আকৃতির পাশাপাশি এখানে অস্তিত্ব নেই
        প্রত্যাবর্তন মিথ্যা;
    }
}

লক্ষণীয় কীভাবে কেবল ইফ ব্লকের ভিতরে আকৃতি উপস্থিত রয়েছে এবং ভেরার ডিক্লেয়ারেশন সহ আমাদের পূর্ববর্তী কেসের মতো অপরিশোধিত আউটপুট না দিয়ে তার বাইরে অ্যাক্সেস করা হলে ত্রুটি ছুঁড়ে দেয়।

দ্রষ্টব্য: যদি কোনও সনাক্তকারীকে ইতিমধ্যে ভেরর সাথে কোনও স্কোপের ভিতরে সংজ্ঞায়িত করা হয়, একই স্কোপের ভিতরে কোনও ঘোষণায় একই পরিচয়কারীটি ব্যবহার করে একটি ত্রুটি ছুঁড়ে দেয়।
এছাড়াও, যদি কোনও ঘোষণাপত্রের বহিরাগত সুযোগে কোনও ভেরিয়েবলের একই নামের সাথে একটি ভেরিয়েবল তৈরি করে তবে কোনও ত্রুটি নিক্ষেপ করা হবে না। (এই মামলাটি দৃ const় ঘোষণার সাথে একই রকম যা আমরা শীঘ্রই আলোচনা করব))

উদাহরণ স্বরূপ:

var আকৃতি = "বর্গ";

আকৃতি = "আয়তক্ষেত্র";
// সিন্ট্যাক্সেরর: পরিচায়ক 'আকৃতি' ইতিমধ্যে ঘোষণা করা হয়েছে

এবং:

var আকৃতি = "বর্গ";
যদি (শর্ত) {
    // কোনও ত্রুটি ছুঁড়ে না
    আকৃতি = "আয়তক্ষেত্র";
    // আরও কোড
}
// কোনও ত্রুটি নেই

দৃ const় ঘোষণা

ডিক্লেয়ারেশন সিনট্যাক্সটি লেট এবং ভারের সমান, লাইফাইসাইকেল লেটের মতোই। তবে আপনাকে কিছু নিয়ম মেনে চলতে হবে।

কনস্টের সাহায্যে ঘোষিত বাইন্ডিংগুলিকে ধ্রুবক হিসাবে বিবেচনা করা হয়, এবং সেইজন্য এগুলি পুনরায় নির্ধারিত মানগুলি একবার সংজ্ঞাযুক্ত হতে পারে না। এ কারণে, প্রতিটি কনস্ট্যান্ট ডিক্লেয়ারেশন ঘোষণার সময় অবশ্যই শুরু করতে হবে।

উদাহরণ স্বরূপ:

// বৈধ
গঠন আকৃতি = "ত্রিভুজ";
// সিনট্যাক্স ত্রুটি: সূচনা অনুপস্থিত
কনস্টের রঙ;
// TypeError: ধ্রুবক ভেরিয়েবলের জন্য নিয়োগ
আকৃতি = "বর্গ"

তবে কোনও সামগ্রীর বৈশিষ্ট্যগুলি সংশোধন করা যায়!

গঠন আকৃতি = {
    নাম: "ত্রিভুজ",
    পক্ষ: 3
}
// ওয়ার্কস
আকৃতি.নাম = "বর্গ";
আকৃতি.সাইডস = 4;
// সিনট্যাক্স এরির: অবৈধ শর্টহ্যান্ড প্রপার্টি আরম্ভকারী
আকৃতি =
    নাম: "ষড়ভুজ",
    পক্ষগুলি: 6
}

উপরের উদাহরণে আমরা দেখতে পাচ্ছি যে কেবলমাত্র আকৃতির অবজেক্টের বৈশিষ্ট্যগুলি পরিবর্তিত হতে পারে কারণ আমরা কেবল যা পরিবর্তন করে তা কেবল যা আকার ধারণ করে তা নয় not

আমরা সংক্ষেপে বলতে পারি যে কনস্টেট পুরোপুরিভাবে বাঁধাইয়ের সংশোধনকে বাধা দেয় - এটি যে মানটির সাথে আবদ্ধ তা নয়।

দ্রষ্টব্য: বৈশিষ্ট্যগুলি পরিবর্তিত হতে পারে। সুতরাং প্রকৃত অপরিবর্তনীয়তার জন্য, Immutable.js বা মরি ব্যবহার করুন।

টেম্পোরাল ডেড জোন

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

নোট করুন যে "টেম্পোরাল ডেড জোন" ECMAScript নির্দিষ্টকরণে আনুষ্ঠানিকভাবে উল্লেখ করা হয়নি। প্রোগ্রামারদের মধ্যে এটি একটি জনপ্রিয় শব্দ।

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

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

জেএসে উত্তোলনের বিষয়টি সম্পর্কিত ফাংশন উত্তোলন এবং গুরুত্বপূর্ণ সাক্ষাত্কারের প্রশ্নগুলির জন্য এই অংশটি 2 টি পরীক্ষা করে দেখুন।

ফাংশন সম্পর্কিত ES6 এর দরকারী কয়েকটি নতুন বৈশিষ্ট্য সম্পর্কে আমার নিবন্ধের জন্য এখানে ক্লিক করুন।

পরে আবার দেখা হবে. সালাম ️️