Objects

JavaScript objects are best explained by thinking of a real-world object. Take a car for example. Cars come in all shapes and sizes - different colors, different makes and models, different weight, etc. Every car has these properties, but the values are different from one car to another. A red Ford Focus and a blue Honda Civic are both “cars”, but they are different makes, models, and colors.

JavaScript objects are variables that contain multiple data values. The values within a JS object are known as properties. Objects use keys to name values, much like how is done with variables.

Let’s look at another example. This time let’s think about a course you have to take. The course name is “GRA 2032”, it starts at 8:00am and it ends at 10:00am. Here’s how we would turn this into an object in JavaScript:

EXAMPLE
var course = {        name: "GRA 2032",        start: 8,        end: 10 };

JavaScript object values are written in the format of name:value and the different pairs are separated by commas. The name:value pairs don’t have to be on different lines for the code to work, but it is much easier to read and understand the code by formatting it that way. You must also use the opening and closing curly brackets { } when defining your objects.

There are two ways to access the value of an object property. You can use the dot notation with the name of the property after the period - objectName.propertyName as in the example below:

EXAMPLE
var course = {        name: "GRA 2032",        start: 8,        end: 10 }; ​ course.name;
OUTPUT
"GRA 2032"

Or you can use the bracket notation with the name of the property inside a string within square brackets - objectName[“propertyName”] as in the example below:

EXAMPLE
var course = {        name: "GRA 2032",        start: 8,        end: 10 }; ​ course["name"];
OUTPUT
"GRA 2032"

To change the value of a property on an existing JS object, you can use a very similar option as when you access the value. You can use the dot notation:

EXAMPLE
var character = {        name: "Donna",        hair: "red" }; ​ character.hair = "blonde"; ​ character;
OUTPUT
{        "name": "Donna",        "hair": "blonde" }

Or the bracket notation:

EXAMPLE
var character = {        name: "Donna",        hair: "red" }; character["hair"] = "blonde"; ​character;
OUTPUT
{        "name": "Donna",        "hair": "blonde" }

Objects can also contain functions, which are called methods. Methods are just the word for functions when they are stored as a property within a JavaScript object. For example, if you have a “person” object, with the properties of “firstName” and “lastName”, but you want a property for “fullName”, you can create a method that will add the first name and the last name together for you and return the full name as a property. See the example below:

EXAMPLE
var person= {        firstName: "Jack",        lastName: "Smith",        fullName: function () {           return this.firstName + "   " + this.lastName;                }  }; person.fullName();
OUTPUT
"Jack Smith"

You can access a method in a very similar way to accessing the other properties - objectName.methodName() i.e. person.fullName()