JavaScript Objects
What are JavaScript Objects?
Objects arevariables that can store bothvalues andfunctions.
Values are stored askey:value pairs calledproperties.
Functions are stored askey:function() pairs calledmethods.
Real Life Comparison
In real life, we can describe subjects as objects (a car, a person, a house)
| Car Object |
|---|
 |
| Car Properties | Car Methods |
|---|---|
| car.name = Fiat car.model = 500 car.weight = 850kg car.color = white | car.start() car.drive() car.brake() car.stop() |
Different cars have the sameproperties, but theproperty values can differ from car to car.
Different cars have the samemethods, but the methods can be performedat different times.
Object Example
This code example assignsmany values (Fiat, 500, white) to anobject named car:
Note
type,model,andcolor areproperties
"Fiat",500,and"white" areproperty values
Object Literal
Anobject literal "literally"describes an object using a concise syntax with zero or morekey:value pairs insidecurly braces to describe all theobject properties:
How to Create a JavaScript Object
Anobject literal is the simplest and most common way to define a JavaScript object.
All the examples below, create the same JavaScript object:
Example 1
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Spaces and line breaks are not important. An object literal can span multiple lines:
Example 2
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
You can also create anempty object, and add the properties later:
Example 3
const person = {};
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Note
You should declare objects with theconst keyword.
Using the new Keyword
Example 4
Create a new JavaScript object usingnew Object():
const person = new Object({
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
});
Note:
There is no need to usenew Object().
For readability, simplicity and speed, use anobject literal instead.
Object Properties
You can access object properties in two ways:
- Dot notation
- Bracket notation
JavaScript Object Methods
Objects can also havemethods.
Object methods areactions that can be performed on objects.
Object methods arefunction definitions stored asproperty values:
Example
firstName: "John",
lastName : "Doe",
age : 50,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| fullName | function() {return this.firstName + " " + this.lastName;} |
Note
In an object method,this refers to the object.
In the example above,this refers to theperson object:
Learn More:
Summary
- Objects are containers forProperties andMethods
- Properties are namedValues stored askey:value pairs
- Methods areFunctions stored askey:function() pairs.
In JavaScript, Objects are King
If you Understand Objects, you Understand JavaScript.
In JavaScript, almost "everything" is an object:
- Objects are objects
- Maths are objects
- Dates are objects
- Arrays are objects
- Maps are objects
- Sets are objects
- RegExp are Objects
- Errors are Objects
All JavaScript values, exceptprimitives, are objects.
JavaScript Primitives
Aprimitive data type is data type that can only store a single primitive value.
JavaScript defines 7 types of primitive data types:
| Type | Example value |
|---|---|
string | "Hello" |
number | 3.14 |
boolean | true |
bigint | 12345678901234 |
null | null |
undefined | undefined |
symbol | symbol |
