Objects in JavaScript

Coding with JavaScript

🕑 This lesson will take about 10 minutes

In the previous lessons, we have looked at variables and arrays which are different structures (or containers) for storing data. Objects are another type of data structure (or container). Unlike variables, objects can contain many values. And unlike arrays, objects can store values of different types and be given names to refer to each value by (rather than using indexing).

Objects have different properties and values can be provided for each property. For example, you may use an object to store information about a person. A person may have properties like firstName, lastName, age and so on. For each property, values can be stored. For example, the firstName property may have the value “Joe”.

Curly braces { } are used to contain object property-value (or name-value) pairs. Each object property-value pair is separated by a comma.

Objects

  • Objects can contain a range of values that are given different names. The values stored in an object are written as name:value pairs (the name and the value are separated by a colon). The named values can be either properties or methods.

Properties

  • An object called user might have different properties named firstName, lastName, emailAddress, dateOfBirth and so on – these are properties of the user object. However, the user object could also have methods that can perform tasks, for example, displaying the full name of the user, or calculating their age from their date of birth.

Methods

  • Objects can also contain methods (actions that can be performed on objects). Methods are functions that are stored as a property in an object. The function is defined in an object property.

  • For example, we could create a method that will display the full name of a user by joining the first and last name values together. In the example code shown below, there are two methods – one displays the full name of the user and one displays their first name and location. Methods have parentheses () at the end of their name eg. user.displayFullName();

Example

Here is an example of how to create an object and how to access property values in an object:

Arrays of objects

Objects can also be stored in arrays (where each element of the array is a different object). In the example below, an array called avengers has been created that stores all the details about (some of) the Avengers characters. Each element in the array is an object. Each object stores all the details about a different Avenger, and each Avenger has different properties and values.

Note that square brackets [ ] are used to contain array elements and curly braces { } are used to contain object property-value pairs. Array elements and object property-value pairs are separated by commas.

Object methods

Objects can also contain methods (actions that can be performed on objects). Methods are functions that are stored as a property in an object. The function is defined in an object property.

For example, we could create a method that will display the full name of a user by joining the first and last name values together. In the example code shown below, there are two methods – one displays the full name of the user and one displays their first name and location. Methods have parentheses () at the end of their name eg. user.displayFullName();

Next lesson: If statements