In the real world, we have objects everywhere.

A car is an object. It has properties like brand name, year of production, and color.

In the world of programming, we also have objects. An object is one of the main terms of programming concepts similar to variables and the if-else statement.

The main purpose of Javascript objects is it lets you store a collection of data.

Here is an example of a JavaScript object:

let car = {
	name: 'Toyota',
	year: 2007
}

Here, we create an object called a car and it stores two data like string and number. You can also store data types like string, number, boolean, and even objects themselves.

Creating new objects

Let’s go ahead and create a simple JavaScript object.

There are different ways of creating objects. The simplest one is the Object literal, and it is simply a list of name : value pairs inside the curly braces {}.

To create a new object, first, write the name of the object as if you are creating a variable.

We will call the object person and then assign it an empty curly brace. The curly braces {} is what will declare this code as an object.

Inside the curly braces, we will add the first property called firstname and the property value will be John which is a string. Notice how the property and value are separated by the colon : symbol. This is necessary so we can tell them apart.

Next, we will the second property called lastname and the property value will be the string Wick. When you’re adding more than one property, make sure it has a comma , in the end, or else the code will not work.

let person = {
  firstname: 'John',
  lastname: 'Wick'
};

console.log(person);

Output:

{ firstname: 'John', lastname: 'Wick' }

When you looked at the output, you can tell that it is an object since the code is enclosed with curly braces.

Accessing the property values

There are two ways you can access the values of the object’s properties. The first one is the dot notation, and the second one is the bracket notation.

The Dot notation

In the dot notation, you can access the property by writing the name of the object. Then you add the dot symbol . and finally, the property name that you want to get its value.

For example:

let person = {
  firstname: 'John',
  lastname: 'Wick'
};

let getName = person.firstname;

console.log(getName); // John

The Bracket notation

In the bracket notation, you can access the property by writing the name of the object. Then you add the square brackets [] and inside the brackets, you write the property name that you want to get its value.

Make sure that the property name is enclosed with quotes. Otherwise, it won’t work.

For example:

let person = {
  firstname: 'John',
  lastname: 'Wick'
};

let getName = person['firstname'];

console.log(getName); // John

While the dot notation and bracket notation essentially do the same thing, the former is more preferred since it is easier to read and comprehend.

Modifying the value of a property

You can change the value of an object’s property by using the assignment operator =.

Here’s an example of how to do it:

let person = {
  firstname: 'John',
  lastname: 'Wick'
};

person.firstname = 'Peter';

console.log(person);

Output:

{ firstname: 'Peter', lastname: 'Wick' }

In the example above, we have changed the value of the firstname property from John to Peter.

We first accessed the value of the firstname property through the dot notation method and then we assign it a new name with the equal = operator.

Coding tasks

Okay, it is time to put what you have learned in this lesson into practice.

The first and second tasks will involve adding a new code to get the desired output. In the third task, you will change the existing code to fix the problem, and finally, in the fourth task, you will write a small code from scratch.

Remember to click the “RUN” button to verify the result.

Task 1

An object student has been created, but there are no values. Add the string Peter Parker to the name property, number 17 to the age property, and another string Pizza to the favorite food property.

let student = {
	name: '',
	age: '',
	favoriteFood: ''
}

console.log(student);

The final output should display { name: 'Peter Parker', age: 17, favoriteFood: 'Pizza' } when you press the “RUN” button.

Task 2

The object player contains the first name Jin and the second name Kazama. We want you to change the first name Jin into a new name Asuka.

Type the following command in the editor and hit the “RUN” to run the program.

let player = {
	firstname: 'Jin',
	lastname: 'Kazama'
}

player.firstname = 'Asuka';

console.log(player);

Task 3

This code is broken and producing an error because three tiny mistakes are made.

let song = {
	name: 'Never Gonna Give You Up'
	artist: 'Rick Astley'
	album: 'Whenever You Need Somebody'
	year: 1987
}

console.log(song);

Find out what’s causing the problem and fix it. Hint: Use a comma , symbol for this task.

Task 4

Let’s make a simple object from blank. Create a variable named person and add the following properties to the object:

  • name: ‘John Wick’
  • job: ‘Software Engineer’
  • year: 2021

Lastly, add the console log with the value of the object person.

Don’t forget to add a comma after each property. When you’re done, hit the RUN button to run the program.