৮ জানুয়ারী, ২০২৩
পড়তে মিনিট লাগতে পারে

রহস্যময়ী জাভাস্ক্রিপ্টঃ [] + {} আবার কেনো '[object Object]’ দেখাচ্ছে?

শেয়ার করুনঃ

আপনারা অনেকে হয়তো এই জিনিসটা খেয়াল করেছেন যে কখনো একটা খালি অ্যারে আর একটা খালি অবজেক্ট অ্যাডিশন অপারেটর + দিয়ে অ্যাড করলে একটা উইয়ার্ড ফলাফল দেখায়। খেয়াল করবেন কিন্তু এখানে আগে খালি অ্যারেটি এসেছে, আর পরে অবজেক্টটিঃ

[] + {}
// '[object Object]'

এখানেও সেই অ্যাডিশন অপারেটর + এর কারসাজি চলছে। আমরা জানি যে এই + অপারেটরটি দুইটা অপারেন্ডের মাঝখানে বসলে এটা দুইরকমের কাজ করতে পারে। একটা তো হচ্ছে সরাসরি যোগ করা, আরেকটা হচ্ছে স্ট্রিং যুক্ত(String Concatenation) করে। এখানে যেহেতু এর দুইপাশের অপারেন্ডই নাম্বার না, তাই এদেরকে মূলত স্ট্রিং হিসেবে যুক্ত করা হয়েছে। তবে তার পূর্বে টাইপ কোয়ারশনের সাহায্যে এদেরকে ইকমাস্ক্রিপ্টের স্টান্ডার্ড অনুযায়ী একটা প্রিমিটিভ ভ্যালুতে বা এখানে স্ট্রিং এ কনভার্ট করা হয়েছেঃ

String([])
// ''

String({})
// '[object Object]'

স্বভাবতই এখন এদেরকে স্ট্রিং হিসেবে যুক্ত করতে আমাদের সেই ফলাফলই দেখতে পাবঃ

[] + {}
// '[object Object]'

'' + '[object Object]'
// '[object Object]'

এখন এখানে যদি খালি অ্যারে না থেকে অ্যারেতে কিছু থাকতো, তাহলেও সেইম আচরণই পেতেন। অ্যারে এবং অবজেক্টটি স্ট্রিং এ কনভার্ট হতো এবং শেষে এদেরকে স্ট্রিং হিসেবে যুক্ত করা হতোঃ

[1, 2] + {}
// '1,2[object Object]'

কিন্তু আবার যদি অবজেক্টটা খালি না হতো তাহলে কিন্তু আবার একটু অন্যরকম বা উইয়ার্ড ব্যাপারই লক্ষ্য করবেনঃ

[1, 2] + { name: 'Code with Zonayed' }
// '1,2[object Object]'

এটা হবার মূল কারণ হচ্ছে অবজেক্ট খালি হউক আর যাই হউক এটাকে স্ট্রিং এ নিলে সবসময়েই সেই সেইম ফলাফলঃ

String({ name: 'Code with Zonayed' })
// '[object Object]'

অবজেক্টকে স্ট্রিং এ কনভার্ট করা হয় ইকমাস্ক্রিপ্ট এর স্টান্ডার্ড অনুযায়ী। তাছাড়া এখানে আরেকটু উইয়ার্ড ব্যাপার আছে, সেটা হচ্ছে আপনি যদি এটাকে রিভার্স করে এমন {} + [] এর ফলাফল দেখেন তাহলে দেখবেন সেটা সম্পূর্ণ ভিন্ন একটা ফলাফল দেখাচ্ছে। এটা নিয়ে বিস্তারিত পরের পর্বে আলোচনা করবো।

ট্যাগঃ
শেয়ার করুনঃ

ক্রমানুসারে এই জাভাস্ক্রিপ্ট সিরিজঃ

জাভাস্ক্রিপ্ট ব্যাসিক
জাভাস্ক্রিপ্টঃ কি, কেন, কখন? জাভাস্ক্রিপ্টঃ কোথায় এবং কিভাবে ইউজ করা হয়? জাভাস্ক্রিপ্টঃ ব্যাসিক ক্রোম ডেভেলপার কন্সোল জাভাস্ক্রিপ্টঃ ভ্যারিয়েবল এবং ডাটা টাইপ জাভাস্ক্রিপ্টঃ অপারেটর নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ কন্ডিশনাল স্টেটমেন্ট নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ লুপ নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ অ্যারে নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ ব্যাসিক অবজেক্ট জাভাস্ক্রিপ্টঃ ব্যাসিক ফাংশন জাভাস্ক্রিপ্টঃ স্টেটমেন্ট আর এক্সপ্রেশন জাভাস্ক্রিপ্টঃ ড্রাই প্রিন্সিপ্যাল জাভাস্ক্রিপ্টঃ নাকি ইকমাস্ক্রিপ্ট? জাভাস্ক্রিপ্টঃ বিহ্যাইন্ড দ্যা সীন জাভাস্ক্রিপ্টঃ হোইস্টিং(Hoisting) নিয়ে ধারণা জাভাস্ক্রিপ্টঃ স্কোপ(Scope) নিয়ে ধারণা জাভাস্ক্রিপ্টঃ ক্লোজারস(Closures) নিয়ে ধারণা জাভাস্ক্রিপ্টঃ ইফি, Immediately Invoked Function Expressions (IIFE)
জাভাস্ক্রিপ্ট অ্যাডভান্স
জাভাস্ক্রিপ্ট অ্যাডভান্সঃ ‘this’ কীওয়ার্ড জাভাস্ক্রিপ্ট অ্যাডভান্সঃ call(), bind() এবং apply() মেথড জাভাস্ক্রিপ্ট অ্যাডভান্সঃ অবজেক্ট ওরিয়েন্টেড জাভাস্ক্রিপ্ট জাভাস্ক্রিপ্ট অ্যাডভান্সঃ ফাংশন কন্সট্রাকটর(Constructor) এবং ‘new’ কীওয়ার্ড জাভাস্ক্রিপ্ট অ্যাডভান্সঃ ইনহেরিট্যান্স (Inheritance) জাভাস্ক্রিপ্ট অ্যাডভান্সঃ স্ট্রিক্ট (Strict) মোড
জাভাস্ক্রিপ্ট ইএস ৬(ES6)
জাভাস্ক্রিপ্ট ইএস ৬(ES6): নতুন কি আছে? জাভাস্ক্রিপ্ট ইএস ৬(ES6): let এবং const দিয়ে ভ্যারিয়েবল ডিক্লেয়ার করা জাভাস্ক্রিপ্ট ইএস ৬(ES6):ইফি (Immediately Invoked Function Expressions) জাভাস্ক্রিপ্ট ইএস ৬(ES6): টেমপ্লেট লিটারেল(Template Literal) ও স্ট্রিং মেথড জাভাস্ক্রিপ্ট ইএস ৬(ES6): অ্যারো (Arrow) ফাংশন ও লেক্সিক্যাল(Lexical) ‘this’ কীওয়ার্ড জাভাস্ক্রিপ্ট ইএস ৬(ES6): অ্যারে জাভাস্ক্রিপ্ট ইএস ৬(ES6): স্প্রেড(Spread) অপারেটর জাভাস্ক্রিপ্ট ইএস ৬(ES6): ডি-স্ট্রাকচারিং (Destructuring) জাভাস্ক্রিপ্ট ইএস ৬(ES6): রেস্ট(Rest) প্যারামিটার জাভাস্ক্রিপ্ট ইএস ৬(ES6): ডিফল্ট(Default) প্যারামিটার জাভাস্ক্রিপ্ট ইএস ৬(ES6): ম্যাপ (Map) জাভাস্ক্রিপ্ট ইএস ৬(ES6): ক্লাস (Class) জাভাস্ক্রিপ্ট ইএস ৬(ES6): ক্লাস ও ইনহেরিট্যান্স (Inheritance) জাভাস্ক্রিপ্ট ইএস ৬(ES6): সব ইনভারোমেন্ট এ ইএস৬
নিত্যদিনের জাভাস্ক্রিপ্ট
নিত্যদিনের জাভাস্ক্রিপ্টঃ ফার্স্ট ক্লাস ফাংশন ও হাইয়ার অর্ডার ফাংশন নিত্যদিনের জাভাস্ক্রিপ্টঃ map(), filter() ও reduce() নিত্যদিনের জাভাস্ক্রিপ্টঃ some() ও every() মেথড নিত্যদিনের জাভাস্ক্রিপ্টঃ অবজেক্ট এ লুপ চালানো নিত্যদিনের জাভাস্ক্রিপ্টঃ ডট নোটেশন এবং ব্র্যাকেট নোটেশন নিত্যদিনের জাভাস্ক্রিপ্টঃ ম্যাথ (Math) অবজেক্ট নিত্যদিনের জাভাস্ক্রিপ্টঃ ডেট (Date) অবজেক্ট নিত্যদিনের জাভাস্ক্রিপ্টঃ লজিক্যাল অপারেটর অর (।।) এবং অ্যান্ড (&&) নিত্যদিনের জাভাস্ক্রিপ্টঃ কন্ডিশনাল/টার্নারি (Ternary) অপারেটর নিত্যদিনের জাভাস্ক্রিপ্টঃ রেগুলার এক্সপ্রেশন (Regular Expression) নিত্যদিনের জাভাস্ক্রিপ্টঃ এরর হ্যান্ডলিং (Error Handling) নিত্যদিনের জাভাস্ক্রিপ্টঃ ডেভেলপার কন্সোল (Console) নিত্যদিনের জাভাস্ক্রিপ্টঃ অ্যাসিনক্রোনাস (Asynchronous) নিত্যদিনের জাভাস্ক্রিপ্টঃ কলব্যাক(Callback) ফাংশন নিত্যদিনের জাভাস্ক্রিপ্টঃ প্রমিস (Promise) নিত্যদিনের জাভাস্ক্রিপ্টঃ async এবং await
রহস্যময়ী জাভাস্ক্রিপ্ট
রহস্যময়ী জাভাস্ক্রিপ্টঃ type of NaN === “number” কেনো? রহস্যময়ী জাভাস্ক্রিপ্টঃ 9 + '1’ সমান ‘91’, আবার 91 - ‘1’ সমান 90 হচ্ছে কিভাবে? রহস্যময়ী জাভাস্ক্রিপ্টঃ true + true + true === 3, true - true === 0 হচ্ছে কিভাবে? রহস্যময়ী জাভাস্ক্রিপ্টঃ [] === 0 মিথ্যা(false) হলেও [] == 0 আবার সত্য(true) হয় কিভাবে? রহস্যময়ী জাভাস্ক্রিপ্টঃ [] === ‘’ মিথ্যা(false) হলেও [] == ‘’ আবার সত্য(true) হয় কিভাবে? রহস্যময়ী জাভাস্ক্রিপ্টঃ [] + [] খালি স্ট্রিং(’’) হচ্ছে কেনো? রহস্যময়ী জাভাস্ক্রিপ্টঃ [] + {} আবার কেনো '[object Object]’ দেখাচ্ছে? রহস্যময়ী জাভাস্ক্রিপ্টঃ {} + [] আবার শূন্য(0) কেনো? রহস্যময়ী জাভাস্ক্রিপ্টঃ [] + {} === {} + [] কিভাবে সত্য true হচ্ছে?