DEV Community

Cover image for Ways To Manipulate Objects In JavaScript
Jenuel Oras Ganawed
Jenuel Oras Ganawed

Posted on • Edited on • Originally published at jenuel.dev

Ways To Manipulate Objects In JavaScript

What are Objects in JavaScript?

Objects are fundamental building blocks in JavaScript. They are a way to store collections of data and functionality under a single entity. You can think of them like boxes that hold various properties, which are essentially name-value pairs. These values can be simple data types like strings or numbers, or even other objects! Objects can also have methods, which are functions that act on the object's data.

Here's a breakdown of key concepts about objects in JavaScript:

  • Properties: These are the individual pieces of data associated with the object. Each property has a key (name) and a value. For example, you could have a car object with properties like makemodel, and year.

  • Methods: These are functions defined within the object that can perform actions on the object's data. For instance, a car object might have a drive method that simulates driving the car.

Here's an example of a simple JavaScript object representing a car:

const car = {
  make: "Ford",
  model: "Mustang",
  year: 1969
};
Enter fullscreen mode Exit fullscreen mode

In this example, the car object has three properties:

  • make with the value "Ford"

  • model with the value "Mustang"

  • year with the value 1969

Objects are essential for creating complex data structures and modeling real-world things in your JavaScript programs. They allow you to organize code and data effectively.

Fundamental Ways to Manipulate

1. Creating Objects

Objects can be created using object literals {}, the new Object() syntax, or constructor functions.

// Using object literals
const obj = {
    name: 'John',
    age: 30
};

// Using new Object()
const obj2 = new Object();

// Using constructor functions
function Person(name, age) {
    this.name = name;
    this.age = age;
}
const person = new Person('John', 30);
Enter fullscreen mode Exit fullscreen mode

2. Accessing Properties

You can access object properties using dot notation obj.property or bracket notation obj['property'].

console.log(person.name); // Output: John
console.log(person['age']); // Output: 30
Enter fullscreen mode Exit fullscreen mode

3. Modifying Properties

Object properties can be modified simply by assigning new values to them.

person.age = 31;
person['age'] = 31;
Enter fullscreen mode Exit fullscreen mode

4. Adding Properties

You can add new properties to an object at any time.

person.city = 'New York';
person['city'] = 'New York';
Enter fullscreen mode Exit fullscreen mode

5. Deleting Properties

Use the delete keyword to remove a property from an object.

delete person.city;
delete person['city'];
Enter fullscreen mode Exit fullscreen mode

6. Iterating over Object Properties

You can iterate over an object's properties using loops like for...in or Object.keys().

for (let prop in person) {
    console.log(prop + ': ' + person[prop]);
}

Object.keys(person).forEach(prop => {
    console.log(prop + ': ' + person[prop]);
});
Enter fullscreen mode Exit fullscreen mode

7. Object Methods

Objects can contain methods, which are functions stored as object properties.

const car = {
    brand: 'Toyota',
    model: 'Camry',
    drive: function() {
        console.log('The ' + this.brand + ' ' + this.model + ' is driving.');
    }
};

car.drive(); // Output: The Toyota Camry is driving.
Enter fullscreen mode Exit fullscreen mode

These are some fundamental ways to manipulate objects in JavaScript. Depending on your use case, there may be more advanced techniques and patterns available.


If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

Buy Me a Coffee at https://www.buymeacoffee.com

Top comments (0)