Learn JavaScript in Construct, part 7: Objects

27

Index

Tagged

Stats

8,823 visits, 22,572 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 29 Oct, 2021. Last updated 16 Dec, 2021

References

Objects can be passed to functions the same way as with strings and numbers. The example below shows two ways this can be done.

function logFood(obj)
{
	// Log the "food" property of the object
	console.log(obj.food);
}

// An object can be passed via a variable storing an object.
let myObject = {
	food: "banana"
};

logFood(myObject);	// logs "banana"

// An object can also be passed directly. This logs "pizza".
logFood({
	food: "pizza"
});

However if the function modifies the object in any way, it works differently to passing a string or a number. This is due to a key difference between objects and strings/numbers: objects are passed around by reference, so changes affect the original. On the other hand, strings and numbers are copied - also referred to as passing by value - so changes don't affect the original.

A simple way to demonstrate this is with variables. Normally if you have a string variable, assigning it to another variable makes a copy, as shown in the below example.

// Create a variable with a string.
let food1 = "pizza";

// Create another variable and assign it the same string.
// This creates a second copy of the string for this variable.
let food2 = food1;

// Change the food2 variable.
food2 = "noodles";

// Log both variables. They are different.
console.log(`food1 is: ${food1}`);
console.log(`food2 is: ${food2}`);

However if you have two variables assigned to the same object, they both reference the same object. So if a property on the object is changed, it returns the same value through both variables, as they both reference the same single object.

// Create a variable with an object.
let ref1 = {
	food: "pizza"
};

// Create a variable also assigned to the same object.
let ref2 = ref1;

// Change the 'food' property through the second variable.
ref2.food = "noodles";

// Log the 'food' property of both variables. They are the same,
// as they both reference the same object.
console.log(`ref1.food is: ${ref1.food}`);
console.log(`ref2.food is: ${ref2.food}`);

A similar thing happens when calling functions with parameters. If you pass a string or a number, the function receives a copy, and cannot change the original.

function changeFood(food)
{
	// Change the parameter. This does not affect
	// the originally passed variable.
	food = "noodles";
}

// The variable starts off with the string "pizza"
let food = "pizza";

console.log(`First, the food is: ${food}`);

// Calling the function does not change the variable
changeFood(food);

// Log the variable again. It's still "pizza".
console.log(`Second, the food is: ${food}`);

On the other hand if the function changes any of the properties of a passed object, it modifies the original, just as with variables. The example below demonstrates a function modifying the passed object: this time the original is changed.

function changeFoodProperty(obj)
{
	// Change the property. This affects
	// the originally passed object.
	obj.food = "noodles";
}

// The 'food' property starts off as "pizza"
let myObject = {
	food: "pizza"
};

console.log(`First, the food is: ${myObject.food}`);

// Calling the function changes the 'food' property
changeFoodProperty(myObject);

// Log the 'food' property again - it's now "noodles"
console.log(`Second, the food is: ${myObject.food}`);

Remember that in general:

  • Strings and numbers are passed by value - assigning them or passing them to functions will make a copy
  • Objects are passed by reference - assigning them or passing them to functions will reference the same object

These are key rules to know when writing JavaScript code. It might seem inconsistent at first, but it's actually a useful feature that you can depend on. It's also often more efficient to pass objects by reference: if you need to pass a large and complex object to a function, copying it could be a relatively time-consuming operation that considerably slows down the program. Passing it by reference avoids the need to copy anything, ensuring the program runs efficiently. Copying strings and numbers is generally a quick and simple thing for programs to do, so the efficiency difference isn't so important there.

Equality

You can also use the equality operators === and !== to test if references refer to the same object. Note this only checks the reference - it doesn't check any of the object properties or their values, only if the two things refer to exactly the same object. The example below demonstrates how this works.

// Create an object
let objA = {
	food: "pizza"
};

// objB refers to the same object as objA
let objB = objA;

// objC refers to a different object, even though
// it has the same property and value
let objC = {
	food: "pizza"
};

// Display equality
console.log("objA === objB: ", objA === objB);	// true
console.log("objA === objC: ", objA === objC);	// false

Next Tutorial In Course

Learn JavaScript in Construct, part 8: object methods 15:36

Learn how objects and functions can be used together, including how the 'this' keyword works.

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!