JavaScript Object Basics

You are reading Part 22 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 4]

Introduction

Objects in JavaScript are fundamental data structures that store key-value pairs. They provide a way to organize and manipulate data efficiently. Understanding object literals, properties, and methods is crucial for writing effective JavaScript code.

Objects are used to store structured data and define behaviors through methods. Mastering object literals, properties, and methods allows for cleaner, more efficient JavaScript code.

1. What is an Object in JavaScript?

An object is a collection of related data and functionality, stored in the form of key-value pairs.

Example of an Object:

let person = {
    name: "Alice",
    age: 30,
    city: "New York"
};
console.log(person);

2. Creating Object Literals

An object literal is a simple way to define an object using curly braces {}.

Syntax:

let objectName = {
    key1: value1,
    key2: value2,
};

Example:

let car = {
    brand: "Tesla",
    model: "Model S",
    year: 2023
};
console.log(car);

3. Accessing Object Properties

Object properties can be accessed using dot notation or bracket notation.

Using Dot Notation:

console.log(person.name); // Outputs: Alice

Using Bracket Notation:

console.log(person["age"]); // Outputs: 30

4. Modifying Object Properties

Object properties can be updated or added dynamically.

Example:

person.age = 31; // Updating an existing property
person.country = "USA"; // Adding a new property
console.log(person);

5. Object Methods

An object method is a function stored inside an object that can perform actions.

Example:

let user = {
    name: "John",
    greet: function() {
        console.log("Hello, " + this.name + "!");
    }
};
user.greet(); // Outputs: Hello, John!

Shorter ES6 Method Syntax:

let user2 = {
    name: "Emma",
    greet() {
        console.log(`Hello, ${this.name}!`);
    }
};
user2.greet();

6. Deleting Object Properties

Properties can be removed using the delete operator.

Example:

delete user.age;
console.log(user);

7. Checking for Property Existence

To check if a property exists in an object, use the in operator or hasOwnProperty() method.

Example:

console.log("name" in user); // true
console.log(user.hasOwnProperty("age")); // false

8. Looping Through Object Properties

Use a for...in loop to iterate over an object's properties.

Example:

for (let key in user) {
    console.log(`${key}: ${user[key]}`);
}

You are reading Part 22 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 4]