জাভাস্ক্রিপ্টে ফাংশন এক্সপ্রেশন বনাম ফাংশন ডিক্লেয়ারেশন পার্থক্য

জাভাস্ক্রিপ্টে ফাংশন ডিক্লেয়ারেশন এবং ফাংশন এক্সপ্রেশনের পার্থক্য শিখুন।

এটি একটি ফাংশন এক্সপ্রেশন:

// Function expression let excuteMe = function () { console.log('Function Expression') }

এটি একটি ফাংশন ডিক্লেয়ারেশন:

// Function declaration function excuteMe() { console.log('Function Declaration') }

ফাংশন এক্সপ্রেশন এবং ডিক্লেয়ারেশন প্রায় একই কাজ করে। উপরের দুটি উদাহরণে, আপনি সেগুলো এভাবে কল করবেন executeMe() এবং তারপর সেগুলো তাদের কোড ব্লক {..}-এর ভিতরে যা আছে সেটি এক্সিকিউট করবে।

“하지만 পার্থক্য আছে, না সেগুলো কী করে সেটি নয়, বরং কীভাবে সেগুলো এক্সিকিউট হয় — বা بالأحرে, সেগুলো কোন ক্রমে পড়া এবং এক্সিকিউট হয় — এবং এটি মানে রাখে।

এই ফাংশনটি ঠিকমতো রান করবে:

// ফাংশন ডিক্লেয়ারেশন কল করুন executeMe() // ফাংশন ডিক্লেয়ারেশন function excuteMe() { console.log('Function Declaration') }

তবে, এই ফাংশনটি ঠিকমতো রান করবে না (এরর থ্রো করবে):

// ফাংশন কল করুন executeMe() // ফাংশন এক্সপ্রেশন let excuteMe = function () { console.log('Function Expression') }

কেন প্রথম উদাহরণ (ফাংশন ডিক্লেয়ারেশন) কাজ করে, কিন্তু দ্বিতীয় উদাহরণ (ফাংশন এক্সপ্রেশন) কাজ করে না সেটি বুঝতে আপনাকে শিখতে হবে হোইস্টিং (Hoisting) কী জাভাস্ক্রিপ্টে, এবং তারপর এটি বোঝা যাবে।

হোইস্টিং (Hoisting)

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

হোইস্টিং মানে আপনার ব্রাউজারের কোড ইন্টারপ্রেটার সবসময় আপনার ফাংশন ডিক্লেয়ারেশনগুলো সম্পর্কে জানে (পড়েছে) সেগুলো কল করা (এক্সিকিউট করার জন্য বলা) হওয়ার আগে।

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

ফাংশন ডিক্লেয়ারেশন

যেকোনো কোড রান করার আগে, আপনার ব্রাউজার আপনার সম্পূর্ণ JS স্ক্রিপ্ট ফাইল লোড করে (পড়ে), এবং যেহেতু ফাংশন ডিক্লেয়ারেশনগুলো এক্সিকিউশন অর্ডারের টপে সরানো হয় (হোইস্ট), আপনার কোড আসলে ইন্টারপ্রেটার দ্বারা এই ক্রমে এক্সিকিউট হয়:

// 1. ফাংশন ডিক্লেয়ারেশন function excuteMe() { console.log('Function Declaration') } // 2. ফাংশন ডিক্লেয়ারেশনের কল executeMe()

যদি আপনার কোড আপনার স্ক্রিপ্ট ফাইলে ফিজিক্যালি উল্টো অর্ডারে লেখা থাকে:

// ফাংশন ডিক্লেয়ারেশনের কল executeMe() // ফাংশন ডিক্লেয়ারেশন function excuteMe() { console.log('Function Declaration') }

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

ফাংশন এক্সপ্রেশন হোইস্ট হয় না

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

তাই এটি কাজ করবে না:

// ফাংশন এক্সপ্রেশন কল করুন executeMe() // ফাংশন এক্সপ্রেশন let excuteMe = function () { console.log('Function Expression') }

উপরোক্ত কোড আপনাকে এরর দেবে কারণ আপনি একটি ফাংশন (executeMe()) রান করার চেষ্টা করছেন আপনার ব্রাউজারের কোড ইন্টারপ্রেটার আপনার ফাংশন এক্সপ্রেশনের অস্তিত্ব সম্পর্কে জানা (পড়া) যাওয়ার আগে।

কোড অর্ডার সওয়াপ করুন এবং এটি কাজ করবে:

// ফাংশন এক্সপ্রেশন let excuteMe = function () { console.log('Function Expression') } // ফাংশন এক্সপ্রেশন কল করুন executeMe()

উপরোক্ত কোডটি কোড অর্ডারের কারণে কাজ করে। আপনার ব্রাউজার প্রথমে আপনার ভেরিয়েবল let executeMe যে লাইনটি থাকে সেটি পড়বে যেটি আপনার ফাংশন এক্সপ্রেশন ধারণ করে — এবং তারপর সেটি এক্সিকিউট করতে বলা হয় executeMe()-দিয়ে।

আপনি কোনটি ব্যবহার করবেন?

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

এখনের চেয়ে আরও গুরুত্বপূর্ণ, আপনি যদি এমন একটি টিমে যোগ দেন যারা ফাংশন এক্সপ্রেশন ব্যবহার করে, ঠিক তখন আপনি তাদের রেসিপি ফলো করবেন কোডবেস কনসিস্টেন্ট রাখতে, আপনার পারসোনাল প্রেফারেন্স কী সেটি দেখে না।

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

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