JavaScript Objects

Objects are a fundamental data structure in JavaScript. They are collections of key-value pairs used to store and access data. Objects are similar to arrays, but they use keys instead of indexes to access data. Keys can be strings, numbers, or symbols. Values can be any data type, including objects. 

Objects are declared using curly braces, and the key-value pairs are separated by commas. Keys are always followed by a colon, and values can be followed by a comma. Here is an example of an object:

const car = {
make: "Toyota",
model: "Camry",
year: 2022,
color: "silver",
isElectric: false,
drive: function() {
console.log("The car is now driving.");
}
};

In this example, the car object represents a Toyota Camry from the year 2022. It has properties such as make, model, year, color, and isElectric, and it also has a method drive() that outputs a message indicating that the car is driving.

How to access the values stored in an object?

To access the values stored in an object, we use dot notation. We can also use bracket notation, which is similar to array notation. Here is an example of accessing the values stored in a car object:

const car = {
make: "Toyota",
model: "Camry",
year: 2022,
color: "silver",
isElectric: false
};

console.log(car.make); // Output: Toyota
console.log(car['year']); // Output: 2022

How to add new properties to an object?

Properties can be added to an object by using dot notation or bracket notation.

car.owner = "Alice";
car['mileage'] = 15000;

console.log(car);

Here’s the output after adding properties to the `car` object:

{
    make: "Toyota",
    model: "Camry",
    year: 2022,
    color: "silver",
    isElectric: false,
    owner: "Alice",
    mileage: 15000
}

After adding the `owner` property with the value `”Alice”` and the `mileage` property with the value `15000`, the `car` object now contains these additional properties. The output shows the updated `car` object with the new properties included.

How to remove properties from an object?

Properties can be deleted from an object using the delete operator.

delete car.isElectric;
console.log(car);

Here’s the output after deleting the isElectric property from the car object:

{
    make: "Toyota",
    model: "Camry",
    year: 2022,
    color: "silver",
    owner: "Alice",
    mileage: 15000
}

Common data types that can be included in JavaScript objects:

In JavaScript objects, you can include various data types as values for object properties. JavaScript is dynamically typed, which means that a property in an object can hold values of different types. Here are the common data types that can be included in JavaScript objects:

1. Primitive Data Types:
   • String: Used for text data enclosed in single (”) or double (“”) quotes.
   • Number: Used for numeric data, including integers and floating-point numbers.
   • Boolean: Represents true or false values.
   • null: Represents a null (empty) value.
   • undefined: Represents an undefined value (usually used for uninitialized variables).
2. Complex Data Types:
   • Object: Includes another object, array, function, or any other data type.
   • Array: An ordered list of values, accessed by numeric indices starting from 0.
   • Function: A callable object that can perform a task or calculate a value.
   • Date: Represents a specific moment in time.
   • RegExp: Represents a regular expression object for pattern matching.
   • Map / Set: Collection types for storing key-value pairs (Map) or unique values (Set).
   • Symbol: Represents a unique and immutable value used as object property keys.

Here’s an example of defining an object with various data types as values:

let person = {
    name: "John",              // String
    age: 25,                   // Number
    isAdmin: false,            // Boolean
    address: {
        city: "New York",
        zipCode: 10001
    },                         // Nested Object
    hobbies: ["Reading", "Gaming"],  // Array
    greet: function() {        // Function
        return "Hello!";
    },
    birthDate: new Date(),     // Date
    regex: /\w+@\w+\.\w+/,     // Regular Expression
    preferences: new Map(),    // Map
    uniqueId: Symbol('id')     // Symbol
};

console.log(person);

In this example:

• name is a string.
• age is a number.
• isAdmin is a boolean.
• address is a nested object.
• hobbies is an array.
• greet is a function.
• birthDate is a Date object.
• regex is a regular expression.
• preferences is a Map object.
• uniqueId is a Symbol object.

JavaScript objects provide flexibility in handling different types of data within a single entity, making them powerful for structuring and organizing data in applications.

Read More:

JavaScript Arrays -> Introduction to JavaScript Arrays