Working with Objects and Object-Oriented Programming

In JavaScript, an object is a collection of properties, each of which has a name and a value. Objects are used to represent real-world entities, such as people, places, and things.

Object-oriented programming (OOP) is a programming paradigm that is based on the idea of “objects”, which can contain data and functionality. OOP is designed to make it easier to create and maintain complex software systems.

In this article, we’ll go over the basics of working with objects and object-oriented programming in JavaScript.

Creating Objects

There are several ways to create an object in JavaScript. The most common way is to use the object literal syntax, which consists of a set of curly braces containing a comma-separated list of properties.

Here’s an example of how to create an object using the object literal syntax:

var person = {
  name: "John",
  age: 30,
  occupation: "developer"
};

You can also use the Object constructor to create an object:

var person = new Object();
person.name = "John";
person.age = 30;
person.occupation = "developer";

Accessing Object Properties

To access an object’s properties, you use the dot notation or the square bracket notation. The dot notation is generally easier to read and write, but the square bracket notation is more flexible and allows you to use variables to access the properties.

Here’s an example of how to access object properties using the dot notation:

console.log(person.name); // logs "John"
console.log(person.age); // logs 30
console.log(person.occupation); // logs "developer"

Here’s an example of how to access object properties using the square bracket notation:

console.log(person["name"]); // logs "John"
console.log(person["age"]); // logs 30
console.log(person["occupation"]); // logs "developer"

You can also use variables with the square bracket notation:

var property = "name";
console.log(person[property]); // logs "John"

Modifying Object Properties

To modify an object’s properties, you simply assign a new value to the property.

Here’s an example of how to modify an object property:

person.age = 31;
console.log(person.age); // logs 31

Adding and Removing Object Properties

To add a new property to an object, you simply assign a value to a property that doesn’t already exist.

Here’s an example of how to add a new property to an object:

person.email = "john@example.com"; 
console.log(person.email); // logs "john@example.com"

To remove a property from an object, you can use the delete operator.

Here’s an example of how to remove a property from an object:

delete person.email; 
console.log(person.email); // logs undefined

Object-Oriented Programming

Object-oriented programming (OOP) is a programming paradigm that is based on the idea of “objects”, which can contain data and functionality. OOP is designed to make it easier to create and maintain complex software systems.

In JavaScript, you can use OOP by defining “classes” which serve as templates for creating “instances” of objects. A class is defined using the class keyword followed by the class name and a set of curly braces containing the class properties and methods.

Here’s an example of how to define a class in JavaScript:

class Person {
  constructor(name, age, occupation) {
    this.name = name;
    this.age = age;
    this.occupation = occupation;
  }
  greet() {
    console.log("Hello, my name is " + this.name + " and I am a " + this.occupation + ".");
  }
}

To create an instance of an object, you use the new operator followed by the class name and a set of parentheses containing the constructor arguments.

Here’s an example of how to create an instance of an object:

var john = new Person("John", 30, "developer");

You can then access the object’s properties and methods using the dot notation:

console.log(john.name); // logs "John"
console.log(john.age); // logs 30
console.log(john.occupation); // logs "
john.greet(); 
// logs "Hello, my name is John and I am a developer."

Inheritance

In OOP, you can use inheritance to create a “child” class that derives properties and methods from a “parent” class. This allows you to reuse code and avoid repeating yourself.

In JavaScript, you can use inheritance by using the extends keyword to create a child class that extends a parent class. The child class can then override or add additional properties and methods as needed.

Here’s an example of how to use inheritance in JavaScript:

class Employee extends Person {
  constructor(name, age, occupation, company) {
    super(name, age, occupation);
    this.company = company;
  }
  work() {
    console.log("I am working at " + this.company + ".");
  }
}

var jane = new Employee("Jane", 32, "developer", "Acme Inc.");

console.log(jane.name); // logs "Jane"
console.log(jane.age); // logs 32
console.log(jane.occupation); // logs "developer"
console.log(jane.company); // logs "Acme Inc."

jane.greet(); // logs "Hello, my name is Jane and I am a developer."
jane.work(); // logs "I am working at Acme Inc."

In this example, the Employee class extends the Person class and adds a new company property and a new work method. The Employee class also overrides the constructor method to include the company argument and calls the super function to access the parent class’s constructor method.

Conclusion

Objects and object-oriented programming are powerful tools in JavaScript. By understanding how to create and manipulate objects, as well as how to use inheritance, you’ll have the skills you need to create complex and scalable software systems in JavaScript.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

var book = {
  title: "The Great Gatsby",
  author: "F. Scott Fitzgerald",
  pages: 180
};

book.read = false;

class Person {
  constructor(name, age, occupation) {
    this.name = name;
    this.age = age;
    this.occupation = occupation;
  }
  greet() {
    console.log("Hello, my name is " + this.name + " and I am a " + this.occupation + ".");
  }
}

var john = new Person("John", 30, "developer");
john.greet(); // logs "Hello, my name is John and I am a developer."

class Employee extends Person {
  constructor(name, age, occupation, company) {
    super(name, age, occupation);
    this.company = company;
  }
  work() {
    console.log("I am working at " + this.company + ".");
  }
}