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.
Define an object that represents a book, including the title, author, and number of pages.
var book = {
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
pages: 180
};
Modify the object defined in exercise 1 to include a read
property that is a boolean indicating whether or not the book has been read.
book.read = false;
Define a class that represents a person, including the person’s name, age, and occupation. Add a method to the class that logs a greeting to the console.
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 + ".");
}
}
Create an instance of the class defined in exercise 3 and call the greet method.
var john = new Person("John", 30, "developer");
john.greet(); // logs "Hello, my name is John and I am a developer."
Define a class that represents an employee, which extends the person class defined in exercise 3. Add a method to the employee class that logs the employee’s company.
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 + ".");
}
}