JS Object Reference 🎯

Welcome to this comprehensive guide on JavaScript Object Reference! This lesson is designed to help you understand one of the core concepts in JavaScript, perfect for both beginners and intermediates.

Understanding JavaScript Objects 📝

Before diving into object references, let's quickly revise what JavaScript objects are and why they're essential.

An object is a collection of properties and methods in JavaScript. Properties are key-value pairs, while methods are functions associated with the object.

javascript

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2020,
  // methods can be added too!
  drive: function() {
    console.log('Vroom!');
  }
};

Creating Object References 💡

Now, let's discuss what object references are and how they work in JavaScript.

In JavaScript, when we assign an object to a variable, we create an object reference. This means that the variable holds a reference to the actual object in memory, not the object itself.

Here's an example to help clarify:

javascript

let car1 = { brand: 'Toyota', model: 'Corolla', year: 2020 };
let car2 = car1;

car2.model = 'Camry';

console.log(car1); // Output: { brand: 'Toyota', model: 'Camry', year: 2020 }
console.log(car2); // Output: { brand: 'Toyota', model: 'Camry', year: 2020 }

In the example above, car1 and car2 are both references to the same object. Changing the model property of car2 affects the model property of car1 as well.

Object Reference vs Object Copy 💡

It's important to understand the difference between object references and object copies.

To create a copy of an object, you can use the Object.assign() method:

javascript

let car1 = { brand: 'Toyota', model: 'Corolla', year: 2020 };
let car3 = Object.assign({}, car1);

car3.model = 'Camry';

console.log(car1); // Output: { brand: 'Toyota', model: 'Corolla', year: 2020 }
console.log(car3); // Output: { brand: 'Toyota', model: 'Camry', year: 2020 }

In this case, car3 is a separate object that shares the same properties as car1, but changing the properties of car3 does not affect the properties of car1.

Practical Example 💡

Let's consider a real-world example where object references can be useful. Suppose we're building a simple inventory system for a bookstore:

javascript

let inventory = [
  { bookId: 1, title: 'Book One', author: 'Author One', quantity: 10 },
  { bookId: 2, title: 'Book Two', author: 'Author Two', quantity: 5 }
];

let soldBooks = [];

function sellBook(bookId, quantity) {
  // Find the book in inventory
  let book = inventory.find(book => book.bookId === bookId);

  // If the book exists and we have enough quantity, sell it
  if (book && book.quantity >= quantity) {
    // Decrease the quantity in inventory
    book.quantity -= quantity;

    // Add the book to soldBooks
    soldBooks.push(book);

    console.log(`Successfully sold ${quantity} copies of '${book.title}' by ${book.author}`);
  } else {
    console.log('Insufficient stock or book not found');
  }
}

sellBook(1, 3);
console.log(inventory); // Output: [ { bookId: 1, title: 'Book One', author: 'Author One', quantity: 7 }, { bookId: 2, title: 'Book Two', author: 'Author Two', quantity: 5 } ]

console.log(soldBooks); // Output: [ { bookId: 1, title: 'Book One', author: 'Author One', quantity: 3 } ]

In the example above, we create an inventory array containing our books. When we sell a book, we're actually changing the quantity property of the book in the inventory array. This demonstrates how object references work in JavaScript.

Quiz 💡

That's it for this lesson on JavaScript Object Reference! Keep practicing and exploring JavaScript objects, and soon you'll be an expert. 🚀

Happy coding! 🌟