JavaScript Object

Everything in JavaScript is an Object. You might hear this all the time while programming in JavaScript because all the types we use in JavaScript and all the programming language features in JavaScript are built around Objects. You can say it is the grand parent of all you use in JavaScript.

JavaScript objects put simply are just a collection of key-value pairs to define a real world entity in our code. Let’s take an example of building a web application for an educational organization where entities in the application would be students, teachers, grades for the students, courses, etc. JavaScript objects allow us a very efficient way to describe these entities in code by defining a collection of key-value pairs.

An object in JavaScript is defined by using a pair of curly brackets {} inside of which we define key-value pairs of the form key: value separated by comma ,.

Let’s build a student object that has first name, last name, age, course enrolled in, ID, status to indicate if the student has already graduated and the year and month in which the student got enrolled. The key uniquely identifies each of these unique features of a student and the value is the actual value stored in that key which is usually one of the primitive data types in JavaScript.

Now that we have a student object, let’s try to access and change the values using the key value pairs defined in the example above within the student object. There are two main ways of accessing object properties — Dot Notation (using a period .) and Bracket Notation (using a pair of square brackets [])

When using dot notation to access property values from an object, you specify the name of the object followed by the dot and followed by the key that you are interested in accessing the value for.

const student = {
firstName: ‘John’,
lastName: ‘Doe’,
age: 29,
course: ‘Intro to JavaScript’,
ID: ‘woxku-jlsod-xmpiosd’,
hasGraduated: false,
year: 2022,
month: ‘February’
}

// using dot notation, access course for this student
console.log(student.course); // prints ‘Intro to JavaScript’

// using dot notation, check if the student has graduated
console.log(student.hasGraduated); // prints false

Sometimes the key in a JavaScript object to be accessed is not known beforehand. In this case, bracket notation comes in handy. In the below example, we store the key to be accessed in a variable and when the key to be accessed is known, we use the bracket notation to access the value stored in that key. Remember the key used inside of bracket notation has to be in single quotes.

let keyToAccess = null;

const student = {
firstName: ‘John’,
lastName: ‘Doe’,
age: 29,
course: ‘Intro to JavaScript’,
ID: ‘woxku-jlsod-xmpiosd’,
hasGraduated: false,
year: 2022,
month: ‘February’
}

// later in the code, we know the key to access.
keyToAccess = ‘ID’

// using bracket notation, access ID for this student by using
// keyToAccess variable
console.log(student[keyToAccess]); // prints ‘woxku-jlsod-xmpiosd’

// using bracket notation, access firstName and lastName
console.log(student[‘firstName’]); // prints ‘John’
console.log(student[lastName]); // prints ‘Doe’

Using JavaScript, you have several different ways to define and create objects. You can create a new object using the keyword new, you can create a single object using an object literal, you can use an object constructor function to create an object type, or you can create an object using Object.create().

Creating JavaScript objects with an object literal allows you to use one statement to define and create an object. An object definition can span multiple lines.

The following example creates an empty object before adding four properties:

const person = {};
person.firstName = "Jane";
person.lastName = "Smith";
person.age = 40;
person.eyeColor = "brown";