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

4 2 2 2 2

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs