Topic 6324 min readStructured Tutorial

JavaScript Objects Practice Examples

Quick Answer

JavaScript objects are collections of key-value pairs used to store and organize data. Practicing with examples helps you understand how to create, access, modify, and use objects effectively in real-world programming.

Learning Objectives

Explain the purpose of Object Practice Examples in a practical learning context.
Identify the main ideas, terms, and decisions involved in Object Practice Examples.
Apply Object Practice Examples in a simple real-world scenario or practice task.

Introduction

Objects are fundamental in JavaScript for storing and managing data.

This tutorial provides practical examples to help you master JavaScript objects.

You will learn how to create objects, access and update properties, and define methods.

Objects are the building blocks of modern JavaScript applications.

Creating JavaScript Objects

Objects can be created using object literals or constructors.

Object literals are the simplest way to define an object with properties.

Use curly braces {} to define an object literal.
Properties are key-value pairs separated by commas.
Keys are strings or symbols; values can be any data type.

Object Literal Example

Here is a simple object representing a person with name and age properties.

Accessing and Modifying Object Properties

You can access object properties using dot notation or bracket notation.

Properties can be updated or added dynamically.

Dot notation: object.property
Bracket notation: object['property']
Bracket notation is useful when property names are dynamic or not valid identifiers.

Defining Methods in Objects

Objects can have functions as properties, called methods.

Methods allow objects to perform actions related to their data.

Define methods using function expressions or shorthand syntax.
Use the 'this' keyword to refer to the current object inside methods.

Practical Object Manipulation Examples

Let's explore examples that demonstrate common object operations.

Creating objects with nested properties.
Adding and deleting properties.
Iterating over object keys and values.

Practical Example

This example creates a person object with name and age properties and accesses the name.

An empty object is created, then properties are added using dot and bracket notation.

This object has two methods for addition and multiplication demonstrating function properties.

Using a for-in loop to iterate over keys and access corresponding values.

Examples

Simple Person Object

const person = {
  name: 'Alice',
  age: 30
};
console.log(person.name); // Output: Alice

This example creates a person object with name and age properties and accesses the name.

Adding and Modifying Properties

const car = {};
car.make = 'Toyota';
car['model'] = 'Corolla';
car.year = 2020;
console.log(car);

An empty object is created, then properties are added using dot and bracket notation.

Object Method Example

const calculator = {
  add: function(a, b) {
    return a + b;
  },
  multiply(a, b) {
    return a * b;
  }
};
console.log(calculator.add(2, 3)); // 5
console.log(calculator.multiply(4, 5)); // 20

This object has two methods for addition and multiplication demonstrating function properties.

Iterating Over Object Properties

const scores = { math: 90, english: 85, science: 95 };
for (const subject in scores) {
  console.log(`${subject}: ${scores[subject]}`);
}

Using a for-in loop to iterate over keys and access corresponding values.

Best Practices

Use object literals for simple object creation.
Prefer dot notation for property access when possible for readability.
Use bracket notation when property names are dynamic or invalid identifiers.
Define methods inside objects to encapsulate behavior.
Avoid mutating objects directly when immutability is required.
Use descriptive property names for clarity.

Common Mistakes

Confusing dot and bracket notation usage.
Forgetting to use 'this' inside methods to access object properties.
Modifying objects unintentionally leading to bugs.
Using reserved words as property names without quotes.
Not checking if a property exists before accessing it.

Hands-on Exercise

Create a Book Object

Create an object representing a book with properties: title, author, and year. Add a method to display a summary string.

Expected output: An object with properties and a method that returns a summary string.

Hint: Use an object literal and define a method using shorthand syntax.

Modify and Iterate Object

Create an object with at least three properties. Add a new property, delete one existing property, and iterate over the object to print all keys and values.

Expected output: Console output showing all current properties and their values.

Hint: Use dot notation to add/delete properties and a for-in loop to iterate.

Interview Questions

How do you create an object in JavaScript?

Interview

You can create an object using object literals with curly braces or by using the Object constructor.

What is the difference between dot notation and bracket notation?

Interview

Dot notation accesses properties with valid identifier names, while bracket notation can access properties with dynamic or non-standard names.

How do you define a method inside a JavaScript object?

Interview

A method is defined by assigning a function to a property inside the object, either using function expressions or shorthand syntax.