Beginner’s guide to JavaScript objects

Objects are one of the most elegant, simple and extraordinarily useful tools you’ll ever work with when programming in JavaScript.

In fact, objects are one of the reasons why JavaScript is such a popular and widespread programming language.

And if you want to improve your JavaScript programming from beginner to intermediate, you’ll need to understand JavaScript objects.

In fact, without understanding JavaScript objects, you’ll never really understand JavaScript, as almost everything in JavaScript is an object.

This guide will help you understand objects in the JavaScript language. Specifically, it will help you understand object syntax and how to write and use the objects you create.

What are JavaScript objects

The easiest way to think of a JavaScript object is as a container that holds related variables and functions. Sort of like a storage container.

Imagine you have a container and you fill it with sewing items.

You could label this container “sewing supplies” and fill it with thread, needles, pins, and other sewing related items.

This sewing supplies container helps keep your sewing supplies organized and easy to find.

A JavaScript object does the same thing. It helps you keep your data organized and easy to find, and things that help keep your data organized and easy to find are often referred to as data structures.

Actually, you may already be familiar with data structures if you read my beginner’s guide to arrays.

Either way, if it helps you keep your data organized, it’s a data structure, and objects are some of the most useful and simple data structures.

In fact, a JavaScript object is really nothing more than a collection of related name-value pairs, and name-value pairs really only consist of two things: a data value and the name that is used to identify that data value.

Here’s what a name-value pair looks like in a basic JavaScript statement:

let myName = "Daniel"	

The name in the example above is myName and the value assigned to it is "Daniel".

Here’s what a name-value pair looks like for a function:

let myFunction = function() {
console.log("Hello!");
}

The name in the example above is myFunction and the value assigned to it is function() {console.log("Hello!");}

A JavaScript object is, as mentioned, a collection of name-value pairs grouped together.

Here’s what the two examples above would look like organized into a JavaScript object:

let nameValuePairExamples = {
 myName: "Daniel",
 myFunction: function() {
 console.log("Hello!");
 }
};

Both the variable declaration and function declaration from the two previous examples are now within the nameValuePairExamples object.

In other words, a JavaScript object is not only a collection of name-value pairs, but the object itself is like a container you can use to group the name-value pairs. Just like the sewing supplies container.

Here’s another example to demonstrate how a JavaScript object is like a container.

Let’s imagine we wanted to group together a set of attributes for someone named Steve.

In this example, Steve would be the object and the name/value pairs would be the properties of Steve.

Here’s what this looks like:

let steve = {
 height: 190,
 weight: 185,
 hairColour: black,
 alias: "Smiley",
 sayHelloSteve: function() {
 alert("Hello Steve!");
 }
}
};

Simple right? All of the name-value pairs: height: 190, weight: 185, hairColour: black and sayHelloSteve: function() {alert("Hello Steve!"); all fit nicely under the category Steve, which is the object name: steve.

Also, notice how much easier it is to understand that the name-value pairs are all associated with the object steve?

This is a huge help when working on enormous projects with thousands of lines of code.

Now let’s take a look at JavaScript object syntax.

JavaScript object properties, methods and syntax

As mentioned, a JavaScript object is a collection of name-value pairs.

In JavaScript, object name-value pairs have two types: properties and methods.

Let’s take a look at both object properties and methods and then deconstruct a JavaScript object to understand its syntax further.

Object properties

Object properties are any variable declarations within the object that are not functions.

Here’s what this looks like using a car as an example:

let myCar = {
	brand: "Subaru",
  	colour: "Blue",
  	year: 2019,
};

Each variable declaration contained within the opening { and closing } of the myCar object: brand: "Subaru" colour: "Blue" and year: 2019 are all properties of the myCar object.

All of these variables declarations are not function declarations and so they are properties of the object.

Object methods

Object methods are function declarations within the object.

Let’s continue with the car example, but this time we’ll create two methods instead of properties for the myCar object.

Here’s what this looks like:

let myCar = {
	carStart: function() {
    alert("Engine is on");
    },
  	carShutdown: function() {
    alert("Engine is off");
    }
}

Each function declaration contained within the opening { and closing } of the myCar object: carStart: function() {alert("Engine is on");} and carShutdown: funtion() {alert("Engine is off");} are all methods of the myCar object.

All of these declarations are function declarations and so they are methods of the object.

To reiterate: any variables contained within the object that are not functions are called properties, while any functions declared within the object are called methods.

Now let’s deconstruct a JavaScript object with both properties and methods to get a better understanding of how objects work.

Object syntax

An empty object in JavaScript is created with the following:

let myNewObject = {};

let myNewObject = asssigns the variable named myNewObject to the object specified by the opening { and closing }.

In JavaScript, an object is created and its contents are defined within the opening { and closing }.

In the example above, however, the object is empty.

Let’s explore the syntax further by deconstructing an object which has content within the opening { and closing } and combines the properties and methods from the car examples from the previous section.

Here’s what that looks like:

let myCar = {
	brand: "Subaru",
  	colour: "Blue",
  	year: 2019,
  	carStart: function() {
    	alert("Engine is on");
    },
  	carShutdown: function() {
    	alert("Engine is off");
    }
};

Ok, the first part you should be familiar with already.

let myCar = asssigns the variable named myCar to an object.

The first statement within the object opening { and closing } is brand: "Subaru". This is a property statement, one of the two types of name-value pairs allowed by JavaScript objects: properties and methods.

brand: "Subaru", is a property of the myCar object. The property name is brand, the value is "Subaru", and a colon : is used to assign the property name to the value.

You indicate that there’s another statement in the object with a ,.

As you can see, there’s another property after brand: "Subaru" which is colour: "Blue". So to indicate there’s another property statement in the object you’d write a , after brand: "Subaru".

Following the property statement colour: "Blue" is another property statement year: 2019.

Each statement in an object must end with a comma , if there is a statement following it.

If it’s the last statement in the object then it does not require a ,.

Following the last property statement year: 2019 you’ll see the other type of statement for a JavaScript object, a method statement, which contains a function.

The first method statement of the myCar object is carStart: function() { alert("Engine is on"); }.

The method statement name is carStart and is assigned to the value with a :. The actual function value which follows is the same syntax as a regular JavaScript function: function() { alert("Engine is on"); }.

And, as we mentioned previously, each statement unless it’s the last statement, ends with a ,.

The final statement in the myCar object is another method statement: carShutdown: funtion() { alert("Engine is off"); }.

Since this is the final statement in the myCar object, there’s no need for a final ,.

Okay, so that covers object properties, methods and syntax.

Now let’s take a look at how you call and reference objects and their properties and methods.

Calling properties and methods of a JavaScript object

Accessing information within a JavaScript object is straightforward.

You can access the properties and methods within an object by calling the object name followed by a . and then the name of the property or method you’d like to access.

Let’s imagine we wanted to access the year property of the myCar object below:

let myCar = {
	brand: "Subaru",
  	colour: "Blue",
  	year: 2019,
  	carStart: function() {
    	alert("Engine is on");
    },
  	carShutdown: function() {
    	alert("Engine is off");
    }
};

If you wanted to access or reference the year property of the myCar object you’d use: myCar.year.

If you wanted to access or reference the carShutdown method of the myCar object you’d use myCar.carShutdown().

If you wanted to list all the properties and methods available to an object you’d simply type the object name in your JavaScript developer console.

In this example that would be myCar.

Ok, pretty handy right?

I think so!

Hopefully, you now have a better grasp on JavaScript objects, their syntax, and how to write and use the objects you create.

Next up, let’s take a look at how to apply your knowledge of JavaScript objects to write better code through an object-oriented programming paradigm.