Skip to main content

Building Blocks in JS

Object references

Alright, let's dive into the world of Object references and copying in JavaScript! Buckle up, because this is as important as knowing the difference between paneer tikka and chicken tikka. Trust me, you don't want to mix those up!

So, what's the big deal with objects in JavaScript? Well, they're like that one friend who always shows up uninvited to your house parties - they behave differently from everything else!

Let's start with the basics. You know how when you copy a string or a number, it's like making a photocopy? You get two separate things. Like this:

let chai = "Masala";
let beverage = chai;

beverage = "Green Tea";
console.log(chai); // Still "Masala"
console.log(beverage); // "Green Tea"

See? Chai remains Masala (as it should!), while the beverage becomes Green Tea. They're independent, like two different cups on your kitchen counter.

But objects? Oh boy, they're trickier than a Bollywood plot twist!

When you copy an object, you're not making a new object. You're just creating another nameplate (that's "nameplate" for our non-Indian friends) that points to the same house. Check this out:

let samosa = {
  filling: "Aloo",
  spiciness: "Extra Hot"
};

let snack = samosa;

snack.filling = "Paneer";
console.log(samosa.filling); // "Paneer"

Wait, what? We changed snack, but samosa changed too? Yep, that's right! It's like samosa and snack are just two names for the same food stall. Change the menu on one, and it changes for both.

This is what we call "copying by reference". The object itself is like a popular street food stall, and the variables are just different ways to find it. You can call it "Sharma's Samosas" or "Best Snacks in Town", but you're still talking about the same stall.

Now, what if you want to actually create a new, independent object? Well, you've got a few options:

  1. Trivial way
let originalDosa = {
  type: "Masala",
  chutney: "Coconut"
};

let newDosa = {};
for (let key in originalDosa) {
  newDosa[key] = originalDosa[key];
}

newDosa.chutney = "Tomato";
console.log(originalDosa.chutney); // Still "Coconut"
  1. The fancy way - Using Object.assign
let originalDosa = {
  type: "Masala",
  chutney: "Coconut"
};

let newDosa = Object.assign({}, originalDosa);

newDosa.chutney = "Tomato";
console.log(originalDosa.chutney); // Still "Coconut"
  1. Using spread operators
let originalDosa = {
  type: "Masala",
  chutney: "Coconut"
};

let newDosa = {...originalDosa};

newDosa.chutney = "Tomato";
console.log(originalDosa.chutney); // Still "Coconut"

But wait, there's a catch! (Isn't there always in programming?) These methods only create a shallow copy. It's like copying only the top layer of a layered biryani. If your object has nested objects (like a thali with multiple dishes), you might need to do a deep copy.

For a deep copy, you can use the structuredClone() method:

let thali = {
  mainCourse: "Chole Bhature",
  sides: {
    dairy: "Raita",
    pickle: "Mango Achaar"
  }
};

let newThali = structuredClone(thali);

newThali.sides.pickle = "Lemon Pickle";
console.log(thali.sides.pickle); // Still "Mango Achaar"

Remember, structuredClone() is like that one friend who can perfectly mimic everyone - it can clone almost anything!

So there you have it! Objects in JavaScript are like that one relative who insists on being involved in everything - they're everywhere and behave in unexpected ways. But now you know how to handle them like a pro!

Just remember: when you're dealing with objects, you're dealing with references. It's like having multiple remote controls for the same TV. Change the channel with one, and they all show the same thing!

Keep coding, keep learning, and may your objects always behave the way you expect them to!