JavaScript Objects Tutorial

JavaScript objects are used everywhere, and to be successful with JavaScript you must understand them. In this article, let's walk through the basics of working with JavaScript objects.

What is a JavaScript Object

Objects in JavaScript consist of key/value pairs of any type, and they are similar to a Dictionaries in Python, HashMaps in Java, etc. Let's take a look!

Creating JavaScript Objects

Use {} to create an empty object.

const person = {};

You can also define an object with key/value pairs already included by using the object literal syntax. In this case, I'm creating an object with four properties: first, last, age, and email.

const person = {
    first: "James",
    last: "Quick",
    age: 28,
    email: "[e-mail]"
}

Working with Object Properties

After creating an object with properties, you can access each property by using the dot notation. After your object you use a dot (.) followed by the name of the property you are looking for.

console.log(person.first); //"James"
console.log(person.last); //"Quick"
console.log(person.email); //"[e-mail]"

Alternatively, you can use the following syntax by using brackets and the name of the property you are looking for inside of the brackets.

console.log(person['first']); //"James"
console.log(person['last']); //"Quick"
console.log(person['email']); //"[e-mail]

With the "named notation" we just did, you can also pass in a variable. For example, if we create a variable with the value of "first", we can use that inside of the brackets to get that property.

const keyName = "first";
console.log(person[keyName]);//"James"

You can also used dot notation or named notation to update properties as well.

person.name="Jessica";
person.age = 29;
console.log(person.name); //"Jessica"
console.log(person.age); //"29

To delete a property from an object, you can call delete followed by the property you want to remove. After removing a property, it will return undefined when you try to access it.

delete person.age;
console.log(person.age); //undefined

Object Equality and Copying

Comparing objects for equality can be a bit tricky. It's important to understand that when you create an object, the variable itself is a pointer instead of the value itself. This point will point to an address in memory where the object is stored. Because of this, even if two objects have the same properties, they will not be considered equal, since the pointers are pointing to two different things.

const person1 = {
    name:"James"
}

const person2 = {
    name: "James"
}

console.log(person1 == person2); //false

You could, however, assign one pointer to another pointer. In this case, both person objects (person1 and person2) point to the same object in memory so they are equal.

const person1 = {
    name:"James"
}

const person2 = person1;
console.log(person1 == person2); //true

Remember, if two variables are pointing to the same object in memory, then changing the property of one will change the other one as well. Since both pointers are pointing to the same object, those changes are reflected in any other pointer to that object.

const person1 = {
    name:"James"
}

const person2 = person1;

person2.name = "Bob";
console.log(person1.name); //"Bob"
console.log(person2.name); //"Bob"

Iterating Through an Object

The easiest way to iterate through key/value pairs of an object is to use a let...in loop. This will iterate through the keys, and you can use each key to get the associated value.

for(let key in person){
    console.log(`${key}: ${person[key]}`);
}

You can also get a list of the keys of an object by calling Object.getKeys(myObject);. Then you can use the let...of loop to iterate through that list of keys and do the same thing to get the appropriate value.

const keys = Object.keys(person);
console.log(keys); //["first", "last","age", "email"]
for(let key of keys){
    console.log(`${key}: ${person[key]}`)
}

ES6 Object Features

The Spread Operator is a really neat feature in ES6 JavaScript. It always you to make copies of objects in this case. Remember above that when we assigned person2 to person1, it meant that changes to the object were reflected in both. By using the Spread Operator, you can quickly make a true copy of an object.

const person3 = {
    name:"James"
}

const person4 = {...person3};

person3 == person4; //false

There's also a fancy feature in ES6 called Object Destructuring. This allows you to quickly create variables associated with properties of an object. Without Object Destructuring, you would need to do this.

const person5 = {
    first: "James",
    last: "Quick",
}

const first = person5.first;
const last = person.last;

Now you can simply do this.

const {first, last} = person5; 

Lastly, if the name of the variable you want to use for a value in an object is the same as the key, you can simply type the variable name once. For example, instead of this.

const first = "James"
const person6 = {
    first:first
}

You can do this.

const first = "James"
const person6 = {
    first
}

Recap

Objects are an essential part of JavaScript and you'll use them constantly. It's worth taking some time to refresh how to work with them. Hopefully this helped!