Objects | Beginner | Javascript Essentials Tutorial

Introduction to objects and their properties

Objects are fundamental to JavaScript programming. This tutorial covers how to create and use objects, their properties, and methods.

Key Points:

Objects are collections of key-value pairs.
Properties are values associated with a key.
Methods are functions stored as object properties.

Creating Objects

Objects can be created using object literals or the new Object() syntax. Here is an example of each:


// Using object literal
var person = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};

// Using new Object() syntax
var person = new Object();
person.name = 'Alice';
person.age = 25;
person.city = 'New York';

console.log(person.name); // Output: Alice
console.log(person.age); // Output: 25
console.log(person.city); // Output: New York

Accessing Object Properties

Object properties can be accessed using dot notation or bracket notation. Here is an example:


var person = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};

// Dot notation
console.log(person.name); // Output: Alice

// Bracket notation
console.log(person['age']); // Output: 25

Adding and Modifying Properties

Properties can be added or modified using dot notation or bracket notation. Here is an example:


var person = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};

// Adding a new property
person.country = 'USA';

// Modifying an existing property
person.age = 26;

console.log(person.country); // Output: USA
console.log(person.age); // Output: 26

Deleting Properties

Properties can be deleted using the delete operator. Here is an example:


var person = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};

// Deleting a property
delete person.city;

console.log(person.city); // Output: undefined

Methods

Methods are functions stored as object properties. Here is an example:


var person = {
    name: 'Alice',
    age: 25,
    city: 'New York',
    greet: function() {
        return 'Hello, ' + this.name + '!';
    }
};

console.log(person.greet()); // Output: Hello, Alice!

Using the `this` Keyword

The this keyword refers to the object from which the method was called. Here is an example:


var person = {
    name: 'Alice',
    age: 25,
    city: 'New York',
    greet: function() {
        return 'Hello, ' + this.name + '!';
    }
};

console.log(person.greet()); // Output: Hello, Alice!

Iterating Over Object Properties

You can iterate over object properties using a for...in loop. Here is an example:


var person = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};

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

// Output:
// name: Alice
// age: 25
// city: New York

Object Methods

JavaScript provides built-in methods for working with objects, such as Object.keys(), Object.values(), and Object.entries(). Here is an example:


var person = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};

console.log(Object.keys(person)); // Output: ["name", "age", "city"]
console.log(Object.values(person)); // Output: ["Alice", 25, "New York"]
console.log(Object.entries(person)); // Output: [["name", "Alice"], ["age", 25], ["city", "New York"]]

Summary

In this tutorial, you learned about objects in JavaScript, including how to create and use objects, access and modify properties, delete properties, define methods, use the this keyword, iterate over properties, and use built-in object methods. Understanding these concepts is essential for working with complex data structures in your JavaScript programs.

JavaScript Essentials - Objects