10 Ways to Work with Objects in Javascript

10 Ways to Work with Objects in Javascript

Objects in JavaScript are like containers that can hold many different things, such as numbers, strings, and even other objects. You can think of them as boxes that can hold multiple items inside.

For example, you might have a box that holds information about a person. Inside that box, you could have pieces of information like the person's name, age, and favorite colour. You can then access and change the information in the box whenever you need to.

In JavaScript, you can create objects using object literals or the Object constructor. You can add, remove, and change the information inside the object by adding, updating, or removing its properties. You can also use the object's methods, which are like special instructions that the object can follow to do something.

Overall, objects in JavaScript are a useful way to store and organize information, and they can make it easier to work with and manipulate that information in your code.

There are many ways to work with objects in JavaScript. Here are ten common techniques:

  1. Creating objects: You can create objects using object literals or the Object constructor.

    // using object literals
    const person = {
      name: 'John Doe',
      age: 30
    };
    
    // using the Object constructor
    const person = new Object();
    person.name = 'John Doe';
    person.age = 30;
    
  2. Accessing properties: You can access an object's properties using dot notation or bracket notation.

const person = {
  name: 'John Doe',
  age: 30
};

// using dot notation
console.log(person.name); // 'John Doe'

// using bracket notation
console.log(person['name']); // 'John Doe'
  1. Adding and updating properties: You can add new properties to an object or update existing ones using assignment.
const person = {
  name: 'John Doe',
  age: 30
};

// adding a new property
person.email = 'john.doe@example.com';

// updating an existing property
person.name = 'Jane Doe';
  1. Removing properties: You can remove a property from an object using the delete operator.
const person = {
  name: 'John Doe',
  age: 30
};

delete person.age;
  1. Checking for properties: You can check if an object has a particular property using the in operator.
const person = {
  name: 'John Doe',
  age: 30
};

console.log('name' in person); // true
console.log('email' in person); // false
  1. Accessing methods: You can access an object's methods in the same way you access its properties.
const person = {
  name: 'John Doe',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

// calling the greet method
person.greet(); // "Hello, my name is John Doe."
  1. Iterating over properties: You can use a for...in loop to iterate over an object's properties.
const person = {
  name: 'John Doe',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

// using a for...in loop to iterate over properties
for (const prop in person) {
  console.log(prop); // 'name', 'age', 'greet'
}
  1. Comparing objects: You can compare whether two objects are the same using the === operator. However, this only returns true if the objects have the same reference, not if they have the same properties and values.
const person1 = {
  name: 'John Doe',
  age: 30
};

const person2 = {
  name: 'John Doe',
  age: 30
};

console.log(person1 === person2); // false
  1. Cloning objects: You can create a new object with the same properties and values as an existing object using the Object.assign() method or the spread operator (...).
const person1 = {
  name: 'John Doe',
  age: 30
};

// using Object.assign()
const person2 = Object.assign({}, person1);

// using the spread operator
const person2 = { ...person1 };
  1. Merging objects: You can merge multiple objects into a single object using the Object.assign() method or the spread operator (...).
const person1 = {
  name: 'John Doe',
  age: 30
};

const person2 = {
  email: 'john.doe@example.com'
};

// using Object.assign()
const person = Object.assign({}, person1, person2);

// using the spread operator
const person = { ...person1, ...person2 };

Did you find this article valuable?

Support Pratik Sharma by becoming a sponsor. Any amount is appreciated!