The latest articles on DEV Community by Jahid Hasan (@jahidhasan). https://dev.to/jahidhasan https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F659398%2F23cbda3b-3edc-4136-9051-05a6e2dadd31.jpeg https://dev.to/jahidhasan en Jahid Hasan Sun, 22 Aug 2021 20:38:48 +0000 https://dev.to/jahidhasan/hoisting-lip https://dev.to/jahidhasan/hoisting-lip <p>হোইস্টিং নিয়ে আসলে আমাদের কিছু করতে হবে না। এটা জাভাস্ক্রিপ্ট এর ডিফল্ট বিহেভিয়ার। আগের পর্বে যেখানে আমি জাভাস্ক্রিপ্ট এর বিহ্যাইন্ড দ্যা সীন নিয়ে আলোচনা করেছি সেখানে দেখে থাকবেন জাভাস্ক্রিপ্ট যাবতীয় ডিক্লেয়ারেশনগুলোকে সবসময় সবকিছুর আগে নিয়ে যায়। এটাই মূলত হোইস্টিং। এটা যেহেতু ডিফল্ট বিহেভিয়ার তাই হয়তো অনেকজায়গায় এটা নিয়ে লেখা নাও পেতে পারেন। তবে জাভাস্ক্রিপ্ট এর বেস স্ট্রং করার জন্যে সবকিছু নিয়ে জানা উচিত। আর হোইস্টিং এর উদাহরন আমি বেশ কয়েকটা আগের পর্বেও উল্ল্যেখ করেছি। কিন্তু এই পর্বে শুধুমাত্র স্পেসেফিকলি হোইস্টিং নিয়েই আলোচনা করবো।</p> <p>যেহেতু হোইস্টিং ডিফল্ট বিহেভিয়ার, তাই জাভাস্ক্রিপ্ট এ সব ফাংশনগুলো ক্রিয়েশন ফেজে হোইস্টেড করা থাকে। এজন্যে আসলে আমরা চাইলে একটা ফাংশন ডিক্লেয়ার করার আগে সেটাকে কল করতে পারি।<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">aFunc</span><span class="p">();</span> <span class="kd">function</span> <span class="nx">aFunc</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Sum: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">sum</span><span class="p">);</span> <span class="p">}</span> </code></pre> </div> <p>আউটপুটঃ<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_5y62NwS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqsktentk2hoz3jrhcip.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_5y62NwS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqsktentk2hoz3jrhcip.png" alt="Js hoisting"></a></p> <p>কাজ করার কারণ ক্রিয়েশন ফেজে জাভাস্ক্রিপ্ট এর ডিফল্ট বিহেভিয়ারের জন্যে। আমি ক্রিয়েশন ফেজ নিয়ে গত পর্বে আলোচনা করেছিলাম, তারপরেও সুবিধার্থে এখানেও কিছু পয়েন্ট তুলে ধরলামঃ</p> <p>ফাংশনে যতগুলো আর্গুমেন্ট পাস করা হয়েছে সেগুলার আর্গুমেন্ট লিস্ট তৈরী করা হয়<br> কোড সব ফাংশন স্ক্যান করে এবং প্রত্যেকটা ফাংশন একটা ভ্যারিয়েবল অবজেক্ট এ স্টোর করা হয় যেটা সাধারণত ফাংশনটাকে পয়েন্ট করে।<br> তারপর কোড ভ্যারিয়েবল এর ডিক্লেয়ারেশনগুলো খোঁজ করে। এবং প্রত্যেকটা ডিক্লেয়ারকৃত ভ্যারিয়েবলের জন্যে undefined প্রপার্টি সেট করে দেয়।<br> তারপর কোড এক্সিকিউশেন ফেজে যায় এবং এক্সকিউশেন কন্টেক্সট অনুযায়ী লাইন বাই লাইন কোড এক্সিকিউট হয়।</p> <p>আর এজন্যেই ফাংশন ডিক্লেয়ারেশন আগে আগে ক্রিয়েশন ফেজে থাকার কারনে এবং ফাংশন কল এক্সিকিউশেন ফেজে এক্সিকিউট হওয়ার কারণে আমরা ফাংশন ডিক্লেয়ার করার আগেও চাইলে ব্যবহার করতে পারি।</p> <p>কিন্তু ফাংশন এক্সপ্রেশন এইভাবে কাজ করবে না। কারণ ফাংশন এক্সপ্রেশনে আমাদের ফাংশন একটা ভ্যারিয়েবলে স্টোর করে রাখি। আর সেই ভ্যারিয়েবল ক্রিয়েশন ফেজে undefined হিসাবে সেট করা হয়। অরিজিনাল ফাংশনটা পরে এক্সিকিউট হয়, তাই ফাংশন এক্সপ্রেশনের ক্ষেত্রে ডিক্লেয়ারের আগে ফাংশন কল করলে সেটা ফাংশন না বলে এরর দেখাবে। কারণ আসলেই সেটা এই মূহূর্তে ফাংশন না, জাস্ট একটা ভ্যারিয়েবল।<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">name</span><span class="p">();</span> <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">My name is Jahid Hasan</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vcy-VAjZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbxr2w2gmsh1cakemx58.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vcy-VAjZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbxr2w2gmsh1cakemx58.png" alt="Javascript Hoisting"></a><br> সেইমভাবে আমরা চাইলে একটা ভ্যারিয়েবলও ডিক্লেয়ার করার আগে সেটা ব্যবহার করতে পারি। ক্রিয়েশন ফেজের কারণে আপনি একটা ভ্যারিয়েবল ডিক্লেয়ার করার আগে সেটা ব্যবহার করলে কোনো এরর দেখাবে না, কিন্তু সেই ভ্যারিয়েবলটা undefined দেখাবে যেহেতু ক্রিয়েশন ফেজে এটাকে undefined হিসাবে সেট করা হয়েছে।<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Value: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">a</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3TCpGvBw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsztnh32rvoigo4fsqgu.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3TCpGvBw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsztnh32rvoigo4fsqgu.png" alt="Javascript Hoisting"></a></p> <p>কিন্তু পরে যদি কখনোই সেই ভ্যারিয়েবল ডিক্লেয়ার করে না থাকেন তাহলে সেটা ব্যবহার করতে চাইলে এরর আসবেঃ<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Value: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">x</span><span class="p">);</span> </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--t0VkTxzR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbvkk7f93n4qjj4ialyc.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--t0VkTxzR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbvkk7f93n4qjj4ialyc.png" alt="Javascript Hoisting"></a></p> <p>তো আশা করি এবার হোইস্টিং সম্পর্কে ক্লিয়ার ধারণা হয়েছে। তবে ভালো প্র্যাক্টিসের জন্যে কখনোই ফাংশন ডিক্লেয়ার করার আগে সেটা ইউজ করা ঠিক না। কিন্তু জাভাস্ক্রিপ্ট বিহ্যাইন্ড দ্যা সীনে কীরকমভাবে কাজ করে সেটা বুঝার জন্যে অবশ্যই অনেক কাজের। কোনো কোনো সিচুয়েশানে হয়তো এধরনের টেকনিকের জন্যে অনেক হেল্পফুল হতে পারে।</p> <p>তো আজকে এই পর্যন্তই, ভালো থাকবেন আর পাশের মানুষটিকে ভালো রাখবেন।</p> javascript es6 jshoisting