Objects: Properties, Methods & this

11. Practice Problems

Try each problem yourself first, then click Show Answer to compare. Most answers are runnable right here in the browser.

1. Create an object book with title, author and pages, and print each on its own line.
   title, author এবং pages-সহ একটি book object বানিয়ে প্রতিটি আলাদা লাইনে প্রিন্ট করুন।
   ✨ Show Answer (উত্তর দেখুন)

   ans1.js

   const book = { title: "Pother Panchali", author: "Bibhutibhushan", pages: 320 };
   console.log(`Title : ${book.title}`);
   console.log(`Author: ${book.author}`);
   console.log(`Pages : ${book.pages}`);

   Run Copy

2. Given const key = "score", create an object whose key is score and value is 90 — using a computed property name.
   computed property name ব্যবহার করে এমন object বানান যার key হবে score এবং মান 90।
   ✨ Show Answer (উত্তর দেখুন)

   ans2.js

   const key = "score";
   const obj = { [key]: 90 };
   console.log(obj);
   console.log(obj.score);

   Run Copy

3. Build a rectangle object with width, height, and an area() method that uses this.
   width, height এবং একটি area() method-সহ একটি rectangle object বানান, যেখানে this ব্যবহার করতে হবে।
   ✨ Show Answer (উত্তর দেখুন)

   ans3.js

   const rectangle = {
       width: 8,
       height: 5,
       area() { return this.width * this.height; }
   };
   console.log(`Area = ${rectangle.area()}`);

   Run Copy

4. Use Object.keys to count how many properties a given object has.
   Object.keys ব্যবহার করে একটি object-এর কয়টি property আছে গণনা করুন।
   ✨ Show Answer (উত্তর দেখুন)

   ans4.js

   const obj = { a: 1, b: 2, c: 3, d: 4 };
   console.log(`Property count = ${Object.keys(obj).length}`);

   Run Copy

5. Use Object.entries + for...of to print all key = value pairs of { rice: 75, oil: 180, sugar: 110 }.
   Object.entries ও for...of দিয়ে object-এর প্রতিটি key-value প্রিন্ট করুন।
   ✨ Show Answer (উত্তর দেখুন)

   ans5.js

   const prices = { rice: 75, oil: 180, sugar: 110 };
   for (const [k, v] of Object.entries(prices)) {
       console.log(`${k} = ${v}৳`);
   }

   Run Copy

6. Predict the output: const f = obj.method; f(); when method uses this.x. Why is the result undefined?
   যখন method-এ this.x ব্যবহার হয়, const f = obj.method; f(); চালালে কেন undefined আসে?
   ✨ Show Answer (উত্তর দেখুন)

   Answer: Detaching obj.method into f drops the implicit binding. Calling f() uses default binding — in strict mode this is undefined, so this.x throws or yields undefined. Fix with const f = obj.method.bind(obj).

   obj.method-কে আলাদা variable-এ রাখলে implicit binding চলে যায়। তখন this default-এ চলে আসে — strict mode-এ undefined। সমাধান: obj.method.bind(obj)।

7. Show that call and apply do the same thing — only argument passing differs.
   প্রমাণ করুন call এবং apply একই কাজ করে — শুধু argument পাঠানোর ভঙ্গি ভিন্ন।
   ✨ Show Answer (উত্তর দেখুন)

   ans7.js

   function greet(g, p) { return `${g}, ${this.name}${p}`; }
   const me = { name: "Imran" };
   console.log(greet.call(me, "Hello", "!"));
   console.log(greet.apply(me, ["Hello", "!"]));

   Run Copy

8. Demonstrate that an arrow function inside a method keeps the outer this.
   প্রমাণ করুন method-এর ভিতরে arrow function বাইরের this ধরে রাখে।
   ✨ Show Answer (উত্তর দেখুন)

   ans8.js

   const obj = {
       name: "Riya",
       delayedHi() {
           setTimeout(() => console.log(`Hi ${this.name}`), 10);
       }
   };
   obj.delayedHi();

   Run Copy

9. Make an object frozen and show that mutation in strict mode throws.
   একটি object freeze করে দেখান strict mode-এ mutation চেষ্টা করলে error হয়।
   ✨ Show Answer (উত্তর দেখুন)

   ans9.js

   "use strict";
   const p = Object.freeze({ pi: 3.14 });
   try { p.pi = 3; }
   catch (e) { console.log("Error: " + e.message); }
   console.log(p.pi);

   Run Copy

10. Merge default settings with user settings using spread, and show user values win.
    spread দিয়ে default settings-এর ওপর user settings মিশিয়ে দেখান user-এর মান জেতে।
    ✨ Show Answer (উত্তর দেখুন)

    ans10.js

    const defaults = { theme: "light", lang: "en", font: 14 };
    const user = { theme: "dark", font: 18 };
    const merged = { ...defaults, ...user };
    console.log(merged);

    Run Copy

11. Show that a shallow spread copy of an object with a nested object still shares the nested reference.
    shallow copy করলে যে nested object reference share হয় — সেটি প্রমাণ করুন।
    ✨ Show Answer (উত্তর দেখুন)

    ans11.js

    const a = { x: 1, nested: { y: 2 } };
    const b = { ...a };
    b.nested.y = 99;
    console.log(a.nested.y); // 99 — shared
    console.log(b.nested.y); // 99

    Run Copy

12. Use structuredClone to deep-copy a nested object and prove the inner object is now independent.
    structuredClone দিয়ে deep copy করে দেখান ভিতরের object আর share হয় না।
    ✨ Show Answer (উত্তর দেখুন)

    ans12.js

    const a = { nested: { y: 2 } };
    const b = structuredClone(a);
    b.nested.y = 99;
    console.log(a.nested.y); // 2 — untouched
    console.log(b.nested.y); // 99

    Run Copy

13. Build a counter object with value, inc(), dec(), and reset() methods.
    value এবং inc/dec/reset method-সহ একটি counter object বানান।
    ✨ Show Answer (উত্তর দেখুন)

    ans13.js

    const counter = {
        value: 0,
        inc() { this.value++; return this; },
        dec() { this.value--; return this; },
        reset() { this.value = 0; return this; }
    };
    counter.inc().inc().inc().dec();
    console.log(counter.value); // 2
    counter.reset();
    console.log(counter.value); // 0

    Run Copy

14. Demonstrate Object.values with reduce to sum all numeric values of an object.
    Object.values এবং reduce-এ object-এর সব মান যোগ করে দেখান।
    ✨ Show Answer (উত্তর দেখুন)

    ans14.js

    const bills = { electric: 1200, gas: 450, internet: 800 };
    const total = Object.values(bills).reduce((s, n) => s + n, 0);
    console.log(`Total bill = ${total}৳`);

    Run Copy

15. In one paragraph, explain why arrow functions are the wrong choice for object methods that need this.
    কেন arrow function কোনো method-এ this দরকার হলে ব্যবহার করা উচিত নয় — এক অনুচ্ছেদে ব্যাখ্যা করুন।
    ✨ Show Answer (উত্তর দেখুন)

    Answer: Arrow functions inherit this from the enclosing lexical scope at the moment they are defined, not from how they are called. When you write a method as an arrow, that lexical scope is usually the module or the global scope — not the object — so this ends up undefined instead of the object you expected. Use a regular method (or shorthand name() {}) for object methods, and reserve arrows for inner callbacks.

    Arrow function-এ this ঠিক হয় যেখানে এটি লেখা হয়েছে সেখান থেকে — যেখান থেকে call হচ্ছে সেখান থেকে নয়। তাই কোনো object-এর method হিসেবে arrow ব্যবহার করলে this object না হয়ে module বা global scope হয়ে যায়। তাই method লিখতে regular function বা shorthand name() {} ব্যবহার করুন; callback-এ arrow।

16. Write a function renameKey(obj, oldKey, newKey) that returns a new object with the key renamed (without mutating the input).
    renameKey(obj, oldKey, newKey) ফাংশন লিখুন যা mutate না করে একটি নতুন object দেবে যেখানে নাম বদল হয়েছে।
    ✨ Show Answer (উত্তর দেখুন)

    ans16.js

    function renameKey(obj, oldKey, newKey) {
        const { [oldKey]: value, ...rest } = obj;
        return { ...rest, [newKey]: value };
    }
    
    const u = { id: 1, name: "Mim", city: "Dhaka" };
    console.log(renameKey(u, "name", "fullName"));
    console.log(u); // untouched

    Run Copy