Objects, properties and methods in JavaScript

So far, in these tutorials, we have worked with different data types and different data structures such as variables and arrays. Another type of structure for storing data is on object. Objects are variables, but they can contain many values. Arrays can also contain many values, however the way the data is stored and accessed from objects is different.

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 separate by a colon). The named values can be either properties or methods.

Properties

For example, an object called user might have different values 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.

Watch the video below or scroll down to view the sample code:

Below is sample code for an object called user which contains named values (properties). These properties include id, username, firstName, and so on.

HTML code:

<html>
    <head>
        <title>Objects</title>
        <script src="script.js"></script>
    </head>
        
    <body>

    </body>
</html>

JavaScript code:

var user = {
    id: 1,
    username: "homersimpson",
    firstName: "Homer",
    lastName: "Simpson",
    suburb: "Springfield",
};

// We can access different properties of the object
// by referring to the names of the properties (eg. firstName).
console.log(user.firstName);

Spaces or line breaks aren’t important. Objects can occupy one line of code or spread across multiple lines. Values stored in objects can also be of different types (eg. string, integer, float, boolean).

We can access object properties using two different ways:
// We can access object properties using two different ways:
console.log(user.firstName);
console.log(user["firstname"]);

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();

var user = {
    id: 1,
    username: "homersimpson",
    firstName: "Homer",
    lastName: "Simpson",
    suburb: "Springfield",
    displayFullName: function(){
        return this.firstName + " " + this.lastName;
    },
    displayLocation: function(){
        return this.firstName + " lives in " + this.suburb;
    }
};

// We can call methods on an object
console.log(user.displayFullName());
console.log(user.displayLocation());

Next tutorial: Using the getElementById() method