Skip to content

Latest commit

 

History

History
214 lines (170 loc) · 6 KB

JavaScript-objects.md

File metadata and controls

214 lines (170 loc) · 6 KB

What Are JavaScript Objects, and How Do You Create Them ?

In JavaScript, an object is a collection of key-value pairs. It is one of the fundamental building blocks of JavaScript and is used to store and manage data efficiently. Keys in an object are called properties, and the values associated with these keys can be of any data type, including other objects, arrays, or functions.

What Are JavaScript Objects?

  • Objects represent real-world entities with properties (attributes) and methods (actions).
    For example, a "car" object might have properties like color, make, and model, and methods like start() or stop().

  • Key Characteristics:

    1. Objects are mutable, meaning you can update, add, or delete properties after creation.
    2. Keys in an object are always strings or symbols, but their values can be any valid JavaScript data type.

How to Create JavaScript Objects

There are multiple ways to create objects in JavaScript:

1. Object Literal Syntax

The most common and straightforward way to create an object is by using curly braces {}.

let person = {
    name: "Alice",
    age: 25,
    isStudent: true,
    greet: function () {
        console.log("Hello, my name is " + this.name);
    }
};
console.log(person.name); // Output: "Alice"
person.greet();           // Output: "Hello, my name is Alice"

2. Using the new Object() Constructor

Another way to create an object is by using the built-in Object constructor.

let car = new Object();
car.make = "Toyota";
car.model = "Corolla";
car.year = 2020;
car.start = function () {
    console.log("Car started");
};
console.log(car.make); // Output: "Toyota"
car.start();           // Output: "Car started"

3. Using a Constructor Function

You can define a custom constructor function to create multiple objects with similar properties.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function () {
        console.log("Hi, I'm " + this.name);
    };
}
let john = new Person("John", 30);
let jane = new Person("Jane", 28);

console.log(john.name); // Output: "John"
jane.greet();           // Output: "Hi, I'm Jane"

4. Using ES6 Classes

ES6 introduced the class syntax, which makes object creation and inheritance more intuitive.

class Animal {
    constructor(name, species) {
        this.name = name;
        this.species = species;
    }
    speak() {
        console.log(this.name + " says hello!");
    }
}
let dog = new Animal("Buddy", "Dog");
console.log(dog.species); // Output: "Dog"
dog.speak();              // Output: "Buddy says hello!"

5. Using Object.create()

You can create a new object using an existing object as its prototype.

let prototypeObject = {
    greet: function () {
        console.log("Hello from prototype");
    }
};
let newObject = Object.create(prototypeObject);
newObject.name = "Prototype-Based Object";

console.log(newObject.name); // Output: "Prototype-Based Object"
newObject.greet();           // Output: "Hello from prototype"

6. Using Factory Functions

A factory function is a regular function that returns an object.

function createPerson(name, age) {
    return {
        name: name,
        age: age,
        greet: function () {
            console.log("Hi, I'm " + name);
        }
    };
}
let alice = createPerson("Alice", 25);
console.log(alice.age); // Output: 25
alice.greet();          // Output: "Hi, I'm Alice"

Accessing and Modifying Object Properties

1. Dot Notation

The most common way to access or modify an object property.

let person = { name: "Alice", age: 25 };
console.log(person.name); // Output: "Alice"
person.age = 26;          // Modifying a property
console.log(person.age);  // Output: 26

2. Bracket Notation

Useful when the property name is dynamic or contains special characters.

let person = { "first-name": "Alice", age: 25 };
console.log(person["first-name"]); // Output: "Alice"
person["age"] = 26;                // Modifying a property
console.log(person["age"]);        // Output: 26

3. Adding New Properties

You can dynamically add new properties to an object.

let car = { make: "Toyota" };
car.model = "Corolla"; // Adding a new property
console.log(car.model); // Output: "Corolla"

4. Deleting Properties

Use the delete operator to remove properties from an object.

let car = { make: "Toyota", model: "Corolla" };
delete car.model; // Deleting the 'model' property
console.log(car.model); // Output: undefined

Examples of Objects in Real-World Scenarios

  1. User Profile:

    let user = {
    username: "john_doe",
    email: "john.doe@example.com",
    login: function () {
        console.log(this.username + " logged in.");
    }
};
user.login(); // Output: "john_doe logged in."

  2. Shopping Cart Item:

    let cartItem = {
    product: "Laptop",
    price: 1200,
    quantity: 2,
    totalCost: function () {
        return this.price * this.quantity;
    }
};
console.log(cartItem.totalCost()); // Output: 2400

Advantages of Using Objects

  1. Organized Data: Objects group related data and functionality in one place.
  2. Reusability: You can create reusable structures with prototypes, classes, or constructor functions.
  3. Flexibility: Dynamically add, update, or delete properties as needed.

Conclusion

JavaScript objects are versatile and form the backbone of many data structures and programming paradigms in the language. By understanding how to create and manipulate objects, developers can efficiently manage complex data and design robust applications. Whether you use object literals, constructor functions, or ES6 classes, objects provide the foundation for powerful and flexible code.