In this section, we will explain what objects are in general and try to give you an overall perspective of objects. In later sections, the object data type will be dissected and explored in greater details.
What is Object in JavaScript?
Objects in JavaScript are compound data type. This means an object can hold multiple values in its body at the same time.
We use objects when want to isolate and manage a set of related data as well as functions that operate on these data.
For example, consider a human. A person has `name`, `age`, `height`, `address` and other set of information related to that person. Now if we want to use these data in a program, it’s better to create an object and hold all this information in that object (which means in one place) instead of creating separate variables for each of these data.
How to Create an Object in JavaScript?
In general, there are three ways by which we can create an object in JavaScript:
- Object Literal
- Constructor Function: This is explained in the constructor function section.
- JavaScript Classes: This is explained in the class section.
Object Literal in JavaScript
The first pattern that we can use to create objects is called object literal.
In object literal, we explicitly declare the properties (variables) and values to be assigned to those keys.
Object Literal in JavaScript Syntax:
{
property1: value1,
property2: value2,
propertyN: valueN
}
To create a literal object, we first start with a pair of braces and inside of this brace we put the property-value (AKA entry) of the object.
Notes:
- Each entry (property-value pair) is separated via a comma `,`.
- Also, we use colon `:` to separate properties from their values.
- The naming convention that applies to variable names also applies to the name of properties. (Note: for properties we’re allowed to use numbers alone as well).
Also, an object is unlimited on the number of entry that it can take.
Note: usually we store an object in a variable so to be able to access that object in later time.
For example:
var obj = {
property1: value1,
property2: value2,
propertyN: valueN
}
JavaScript Object Properties Values
As mentioned before, in objects, properties are basically the local variables of the target object.
And just like variables, properties are also capable of storing values of any data type that is supported in JavaScript.
For example:
const obj = {
name: "John",
lastName: "Doe",
age: 1000
}
In this example, an object is created and stored in the `obj` variable.
This object has three properties:
- The first one is called `name` and has the value of `John`.
- The second property is called `lastName` and has the value of `Doe`.
- The last one is called `age` and has the value of `1000`.
Note: when you create an object, that object is stored in a section of the memory that is known as the Heap. The location that an object is stored has an address (an integer number). It’s the integer number (or the address) of the target object that will be stored in a variable and not the object itself! So in the example above, the `obj` had the memory address where the actual object is stored.
Example: creating object literal in JavaScript
const emp = {
id: 123,
position: "Manager",
name: "John",
lastName: "Doe"
}
In this example, we have another object that is stored in a variable named `emp`.
This object has 4 properties:
- The first one is called `id` and it has the value of 123.
- The second one is called `position` and its value is `manager`.
- The third property is called `name` and it has the value of `John`.
- The last property is called `lastName` and it has the value `Doe`.
Accessing Object Properties
There are two ways to access the properties of an object:
- using dot `.` notation
- using bracket notation
Accessing Object Properties in JavaScript: using Dot `.` Notation
The first way of accessing the value of a property in an object is by using the dot `.` operator.
Here’s the syntax:
objectName.propertyName; // getting the value of a property. ObjectNaem.propertyName = “value”; // Assigning a new value to a property.
Example: accessing object properties using dot notation in JavaScript
const emp = {
name: "John",
lastName: "Doe"
}
console.log(emp.name);
emp.name = "Jack";
console.log(emp.name);
Output:
John Jack
Accessing Object Properties in JavaScript: using Bracket Notation
The second way of accessing a property in an object in order to get or set its value is by using the bracket `[]` notation.
Here’s the syntax:
objectName[“propertyName”]; // This is done to get the value of a property. objectName[“propertyName”] = value; // This is done to assign a value to a property.
Using this notation is especially useful when the names for the properties are integer numbers.
Note that if the property of an object is just an integer value, we don’t need to wrap the value in a double quotation!
For example:
objectName[1]; // this will return the value of the 1 property in the target object.
Example: accessing object properties in JavaScript using bracket notation
const emp = {
name: "John",
lastName: "Doe"
}
console.log(emp["name"]);
emp["name"] = "Jack";
console.log(emp["name"]);
Output:
John Jack
JavaScript Constructor Function: new Keyword in JavaScript
There’s another way of creating objects in JavaScript that is done using functions which are known as Constructor Function. They are called constructor function because we use them to construct (build) an object.
Be aware that at its core, there’s no difference between a typical function and a constructor function.
You’ll learn more about this constructor function in later sections.
Adding a Property to an Object in JavaScript
Objects in JavaScript are super flexible! That means you can add properties to object on the fly and outside of the body where the object was created.
To add a new property to an object outside of the body of that object, we simply call the object name (the variable that hold the object) + dot operator `.` and finally the name of the property that we want to add to the target object. Also, at the same time, we need to assign a value to this new property as well (using the assignment operator):
object.newProperty = “value”;
As you can see, we use the assignment operator to assign a value right where the new property is being created. (This is required).
Example: adding a property to an object in JavaScript
const emp = {
name: "John",
lastName: "Doe"
}
emp.id = 123;
emp.position = "Manager";
console.log(emp);
Output:
{name: "John", lastName: "Doe", id: 123, position: "Manager"}
Adding a Method to an Object in JavaScript
Adding a new method to an object is pretty much the same as adding a new property to an object outside of its body.
Basically, adding a method to an object is like creating a function expression. We create the property and, as its value; we pass a function expression.
ObjectName.newProperty = function functionName(){/*...*/};
Example: adding a method to an object in JavaScript
const emp = {
name: "John",
lastName: "Doe"
}
emp.id = 123;
emp.position = "Manager";
emp.printFullName = function(){
console.log(`${this.id}, ${this.name}, ${this.lastName}, ${this.position}`);
}
emp.printFullName();
Output:
123, John, Doe, Manager
Note: the use of `this` keyword is explained in the JavaScript `this` keyword section.
JavaScript Remove Property from Object
There’s an operator in JavaScript called `delete` by which we can remove a property of an object.
Here’s the syntax of this operator:
delete object.propertyName;
As you can see, put the object and the name of the target property on the right side of this operator and it will delete that property from the target object.
Note: this property is explained in greater details in the delete operator section.
Example: removing Property from Object in JavaScript
const emp = {
id: 123,
position: "Manager",
name: "John",
lastName: "Doe"
}
delete emp.id;
delete emp.position;
console.log(emp);
Output:
{name: "John", lastName: "Doe"}
