Skip to main content

Objects and object references

Objects

In JavaScript objects are used to store key to value pair collection of data. You can think of them as dictionary in Python.

You can create an object using brackets { }, and a list of optional properties that the object will have. For example:

let exampleObj = {
	age: 30,
    name: "John"
};

Access/modify the property using dot notation:

console.log(exampleObj.age);

exampleObj.age = 50;

To delete a property you can use the delete operator

delete exampleObj.age;

You can also create property that is multi-worded, but they must be quoted:

let exampleObj = {
	name: "John",
    age: 30,
    "have computer": true
};

Accessing multi-worded must use the square bracket notation, since dot notation require key to be a valid variable identifier (which excludes  space, digit or special characters).

Single word property you can either use square bracket notation or dot notation, is up to you.

console.log(exampleObj["have computer"]);
Empty Object

You can create empty object using either of these syntax:

let user = new Object();
let user = {};
Accessing object property

With the square bracket notation, you can use a variable to query the property. However, you cannot do the same with dot notation, it doesn't work.

let key = "name";

console.log(exampleObj[key]); // Print out John
console.log(example.key); // Undefined, because it tries to find property named key
Computed properties

To insert a property name that is from a variable you can use the square bracket.

let fruit = prompt("What fruit do you want?");

let bag = {
	[fruit]: 5
}

console.log(bag.apple);

In this case, if the user entered "apple", then the apple property will be inserted into the bag object with value of 5.

Property value shorthand

If the variable you are assigning a property attribute to is the same as the property name, like below:

function makeUser(name, age) {
	return {
    	name: name,
        age: age
    }
}

You can just ignore writing the property assignment part and just put the variable name like below:

function makeUser(name, age) {
	return {
    	name,
        age
    }
}

They are both equivalent, but it is a shorthand way of writing the other. If the property name is the same as the variable, then you can just use the variable name as a shorthand.

You can mix and match property shorthand with normal property assignment.

Property name limitations

Variables cannot have keyword names. However it is not true for object property, the name can be whatever even keywords!

let obj = {
	for: 1,
    let: 2,
    return: 3
}

If you use other types as property name such as 0, they are automatically converted into String so "0".

let obj = {
	0: "test"
};

console.log(obj["0"]);
console.log(obj[0]);
// Print out same thing. The 0 in both the property and the square bracket are converted to String.
Property existence test

You can test if an object has a property via two ways:

console.log(user.noSuchProperty === undefined); // If this is true, then it has no "noSuchProperty"

"key" in object // If this is true, it exists, false it doesn't

The in operator is more preferred, because there are cases where comparing to undefined will fail, for example, if the property's value is undefined.

Looping over keys of object

for (let key in object) {
	// Executes the body for each "key"
  	// Access the value via object[key]
}

Object references

When you assign a primitive data type to another variable, it makes a new copy of the original value.

However, if you assign another variable an existing object you are making an alias, it is a reference to the original object. It does not make a new copy. So if you change the attribute of the alias, it will also change the original object!

Reference comparsion

Two objects are equal if they are the same object

let a = {};
let b = a; // Making a reference of a

a == b; // This is true, because they are referencing the same object
a === b; // Also true.
Duplicating object

The function Object.assign(dest, ...sources) will take in a target object, in which to copy all the property to. One or more list of source object whose's property to copy into dest.

let user = { name: "John" };

let perm1 = { canView: true };
let perm2 = { canEdit: true };

Object.assign(user, perm1, perm2);

console.log(user); // Print out "John", true, true

However, Object.assign() doesn't support deep cloning, if the object we are copying contain another object, then it will be copying the references to the destination object. In order to do deep cloning you will have to use structuredClone(object) function to clone all nested objects.

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = structuredClone(user);

user.sizes == clone.sizes // false, the size object within user object is cloned as well.



Back to top