Javascript Objects Cheatsheet

Overview

Objects are:

  • mutable so any changes made to the object will be reflected in the original object.
  • unordered so the order of the properties in an object is not guaranteed
  • dynamic so you can add, update, and delete properties from an object
  • iterable so you can loop through the properties of an object using a for...in loop

Objects can be converted to a:

  • string by calling the toString method on the object
  • JSON string by calling the JSON.stringify method on the object
  • JavaScript object by calling the JSON.parse method on the JSON string
  • number by calling the valueOf method on the object (only works for certain objects like Date)

Accessing properties

There are two ways to access properties of an object:

Dot notation is shorter and easier to read, and is generally preferred when you know the name of the property you're trying to access.

Bracket notation is more flexible because it can take any string expression, including variables. This is useful when you need to access a property dynamically, or when the property name is not a valid identifier (e.g., it includes spaces or special characters), or when the property name is a reserved word.

const person = { firstname: "Mike", lastname: "Dingle", age: 30 };
const firstname = person.firstname;     // Output: Mike
const lastname = person['lastname'];    // Output: Dingle

Object methods

Object.keys(obj) - returns an array of a given object's own property names

const person = { firstname: "Mike", lastname: "Dingle", age: 30 };
const keys = Object.keys(person); // Output: ['firstname', 'lastname', 'age']

Object.values(obj) - returns an array of a given object's own property values

const person = { firstname: "Mike", lastname: "Dingle", age: 30 };
const values = Object.values(person); // Output: ['Mike', 'Dingle', 30]

Object.entries(obj) - returns an array of a given object's own enumerable property [key, value] pairs

const person = { firstname: "Mike", lastname: "Dingle", age: 30 };
const entries = Object.entries(person); // Output: [['firstname', 'Mike'], ['lastname', 'Dingle'], ['age', 30]]

Object destructuring

Object destructuring is a way to extract multiple properties from an object and assign them to variables.

const person = { firstname: "Mike", lastname: "Dingle", age: 30 };
const { firstname, lastname, age } = person;
console.log(firstname, lastname); // Output: Mike Dingle

Techniques for working with objects

Delete a property from an object

const person = { firstname: "Mike", lastname: "Dingle", age: 30 };
delete person.age;
console.log(person); // Output: { firstname: 'Mike', lastname: 'Dingle' }

Check if a property exists in an object

const person = { firstname: "Mike", lastname: "Dingle", age: 30 };
const hasAge = person.hasOwnProperty('age');
console.log(hasAge); // Output: true

Merge two objects

const person = { firstname: "Mike", lastname: "Dingle" };
const address = { city: "New York", country: "USA" };
const merged = { ...person, ...address };
console.log(merged); // Output: { firstname: 'Mike', lastname: 'Dingle', city: 'New York', country: 'USA' }

Clone an object (shallow copy)

const person = { firstname: "Mike", lastname: "Dingle" };
const clone = { ...person };
console.log(clone); // Output: { firstname: 'Mike', lastname: 'Dingle' }

Techniques for working with arrays of objects

All the following examples use the `people` array of objects defined below.
const people = [
    { id: 1, name: 'John', age: 30, hobbies: ['reading', 'gaming', 'coding'] },
    { id: 2, name: 'Jane', age: 25, hobbies: ['painting', 'running', 'cooking'] },
    { id: 3, name: 'Bob', age: 35, hobbies: ['swimming', 'coding', 'hiking'] }
];

Removing an Object from an Array

You can remove an object from an array using either a non-mutating method (filter) or a mutating method (splice).

Non-mutating Method: filter

This method returns a new array excluding the object that matches the specified condition. It works by using the filter method to create a new array that includes only the items that do not match the specified condition.

const removePersonById = (people, id) => people.filter(person => person.id !== id);

const updatedPeople = removePersonById(people, 2);
console.log(updatedPeople);

Mutating Method: splice

This method removes the object directly from the original array. It works by using the findIndex method to get the index of the object to be removed, and then using the splice method to remove it from the array.

const removePersonById = (people, id) => {
    const index = people.findIndex(person => person.id === id);
    if (index !== -1) {
        people.splice(index, 1);
    }
};

removePersonById(people, 2);
console.log(people);

Find item by key

const findPersonById = (people, id) => {
    return people.find(person => person.id === id);
};

const person = findPersonById(people, 2);
console.log(person);
// Output: { id: 2, name: 'Jane', age: 25, hobbies: ['painting', 'running', 'cooking'] }

Find item by value

const findPersonByHobby = (people, hobby) => {
    return people.find(person => person.hobbies.includes(hobby));
};

const person = findPersonByHobby(people, 'running');
console.log(person); 
// Output: { id: 2, name: 'Jane', age: 25, hobbies: ['painting', 'running', 'cooking'] }

Find all items by key

const findPeopleByAge = (people, age) => {
    return people.filter(person => person.age === age);
};

const people = findPeopleByAge(people, 30);
console.log(people); 
// Output: [ { id: 1, name: 'John', age: 30, hobbies: ['reading', 'gaming', 'coding'] } ]

Update an existing item in an array of objects

const updatePersonById = (people, id, data) => {
    return people.map(person => {
        if (person.id === id) {
            return { ...person, ...data };
        }
        return person;
    });
};

const updatedPeople = updatePersonById(people, 2, { name: 'Janet' });
console.log(updatedPeople);

This function uses the map method to iterate over the people array and update the object with the specified id by merging the existing object with the data object.