Lesson 33: Creating Objects Part 1

Master the fundamentals of JavaScript objects - learn to create, modify, and work with objects using different techniques with interactive examples.

❮ Previous Lesson Next Lesson: Creating Objects Part 2 ❯

33.1 Introduction to JavaScript Objects

Objects are fundamental building blocks in JavaScript. They allow you to group related data and functions together. An object can represent a real-world entity with properties (characteristics) and methods (actions).

Key concepts:
  • Objects are collections of key-value pairs
  • Properties store data about the object
  • Methods define what the object can do
  • Objects can be created using literals, constructors, or classes
  • The this keyword refers to the current object
  • Objects support encapsulation and data organization

33.2 Creating Objects with Object Literals

The simplest way to create an object is using the object literal syntax with curly braces {}:

// Creating a person object
const person = {
  // Properties
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  isStudent: false,
  
  // Method
  getFullName: function() {
    return this.firstName + ' ' + this.lastName;
  },
  
  // ES6 method shorthand
  greet() {
    return `Hello, my name is ${this.firstName}!`;
  }
};

// Accessing properties
console.log(person.firstName); // John
console.log(person['lastName']); // Doe

// Calling methods
console.log(person.getFullName()); // John Doe
console.log(person.greet()); // Hello, my name is John!

Example 33.1: Person Object Explorer

Interact with a person object to see how properties and methods work:

33.3 Creating Objects with Constructors

Constructor functions allow you to create multiple objects with the same structure:

// Constructor function
function Person(firstName, lastName, age, occupation) {
  // Properties
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.occupation = occupation;
  
  // Method
  this.getBio = function() {
    return `${this.firstName} ${this.lastName} is a ${this.age}-year-old ${this.occupation}.`;
  };
}

// Creating instances
const person1 = new Person('Jane', 'Smith', 28, 'software developer');
const person2 = new Person('Robert', 'Johnson', 42, 'designer');

// Using the objects
console.log(person1.getBio());
// Jane Smith is a 28-year-old software developer.

console.log(person2.getBio());
// Robert Johnson is a 42-year-old designer.

Example 33.2: Constructor Explorer

Create new person objects using the constructor function:

33.4 Understanding the 'this' Keyword

The this keyword refers to the object that is executing the current function. Its value depends on how a function is called:

// In a method, 'this' refers to the object
const car = {
  brand: 'Toyota',
  model: 'Camry',
  getInfo: function() {
    return `${this.brand} ${this.model}`;
  }
};

console.log(car.getInfo()); // Toyota Camry

// In a regular function, 'this' refers to the global object (window in browsers)
function showThis() {
  console.log(this); // window object
}

showThis();

// Arrow functions don't have their own 'this' context
const bike = {
  brand: 'Honda',
  getBrand: () => {
    return this.brand; // undefined (arrow functions inherit 'this' from parent scope)
  }
};

console.log(bike.getBrand()); // undefined

Example 33.3: 'this' Context Explorer

See how the context of 'this' changes in different scenarios:

33.5 Adding and Modifying Properties

JavaScript objects are dynamic - you can add, modify, or delete properties at any time:

// Create an empty object
const book = {};

// Add properties
book.title = 'JavaScript: The Good Parts';
book.author = 'Douglas Crockford';
book.pages = 176;
book.published = 2008;

// Add a method
book.getInfo = function() {
  return `${this.title} by ${this.author} (${this.published})`;
};

console.log(book.getInfo());
// JavaScript: The Good Parts by Douglas Crockford (2008)

// Modify a property
book.published = 2020;
console.log(book.getInfo());
// JavaScript: The Good Parts by Douglas Crockford (2020)

// Delete a property
delete book.pages;
console.log('pages' in book); // false

Example 33.4: Dynamic Book Object

Modify a book object dynamically:

33.6 Object Methods and Built-in Methods

Working with Objects:
  • Use Object.keys() to get an array of property names
  • Use Object.values() to get an array of property values
  • Use Object.entries() to get key-value pairs
  • Use Object.assign() to copy properties between objects
  • Use Object.freeze() to prevent modifications
  • Use hasOwnProperty() to check if a property exists

Object.keys()

Get all property names of an object

Object.values()

Get all property values of an object

Object.entries()

Get key-value pairs as arrays

Object.assign()

Copy properties from one object to another

Example 33.5: Built-in Object Methods

Explore built-in Object methods:

❮ Previous Lesson Next Lesson: Creating Objects Part 2 ❯