DEV Community

loading...
Cover image for JavaScript Objects Tutorial

JavaScript Objects Tutorial

jamesqquick profile image James Q Quick ・4 min read

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 = {};
Enter fullscreen mode Exit fullscreen mode

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: "james@learnbuildteach.com"
}
Enter fullscreen mode Exit fullscreen mode

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); //"james@learnbuildteach.com"
Enter fullscreen mode Exit fullscreen mode

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']); //"james@learnbuildteach.com
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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]}`);
}

Enter fullscreen mode Exit fullscreen mode

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]}`)
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Now you can simply do this.


const {first, last} = person5; 
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

You can do this.

const first = "James"
const person6 = {
    first
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion

pic
Editor guide