JS Objects
Object Properties
A real life car has properties like weight and color:
car.name = Fiat, car.model = 500, car.weight = 850kg, car.color = white.
Car objects have the same properties, but the values differ from car to car.
Object Methods
A real life car has methods like start and stop:
car.start(), car.drive(), car.brake(), car.stop().
Car objects have the same methods, but the methods are performed at different times.
JavaScript Variables
Data values are stored in JavaScript variables.
This code assigns a simple value (Fiat) to a variable named car:
Example
let car = "Fiat";
JavaScript Objects
Moreover, objects are variables. However, an object can have several values.
This code assigns many values (Fiat, 500, white) to an object named car:
Example
const car = {type:"Fiat", model:"500", color:"white"};
Note:
It is usual practice to declare objects with the const keyword.
The chapter JS Const explains how to use const with objects in further detail.
JavaScript Object Definition
How to Define a JavaScript Object
- Using an object literal
- Introducing a new keyword
- Implementing an object constructor.
JavaScript Object Literal
An object literal is a list of name:value pairs enclosed by curly braces {}.
Note:
name:value pairs are also called key:value pairs.
object literals are also called object initializers.
Creating a JavaScript Object
The following examples produce a JavaScript object with four properties:
Example
// Create an Object
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Spaces and line breaks are not necessary. An object initializer may span numerous lines:
// Create an Object
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
This example generates an empty JavaScript object and then adds four properties:
// Create an Object
const person = {};
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Using the new Keyword
This example creates a new JavaScript object using new Object() and adds four properties:
Example
// Create an Object
const person = new Object();
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Note:
The instances above are precisely the same.
However, there is no need to use new Object().
Using the object literal technique improves readability, simplicity, and execution speed.
Object Properties
The named values, in JavaScript objects, are called properties.
| Property | Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
Objects written in name-value pairs are comparable to:
- Associative arrays in PHP
- Dictionaries in Python
- Hash tables in C
- Hash maps in Java
- Hashes in Ruby and Perl
Accessing Object Properties
There are two ways to obtain object properties:
objectName.propertyName
objectName["propertyName"]
Example
person.lastName;
person["lastName"];
JavaScript Object Methods
Actions that can be carried out on objects are called methods.
Function definitions that are kept as property values are called methods.
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + ” ” + this.lastName;} |
Example
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
This pertains to the person object in the aforementioned example:
this.firstName means the firstName property of person.
this.lastName means the lastName property of person.
In JavaScript, Objects are King.
If you Understand Objects, you Understand JavaScript.
Objects are containers for Properties and Methods.
Properties are named Values.
Methods are Functions stored as Properties.
Properties can be primitive values, functions, or even other objects.
In JavaScript, nearly “everything” is an object.
- Objects are objects.
- Mathematics is about things.
- Functions are objects.
- Dates are things.
- Arrays are objects.
- Maps are things.
- Sets are objects.
All JavaScript values are objects, with the exception of primitives.
JavaScript Primitives
A primitive value does not have any attributes or methods.
3.14 represents a primitive value.
A primitive data type contains data with a primitive value.
JavaScript defines seven kinds of basic data types:
- string
- number
- boolean
- null
- undefined
- symbol
- bigint
Immutable
Primitive values are immutable (hardcoded and cannot be altered).
If x equals 3.14, you can modify the value of x but not the value of 3.14.
| Value | Type | Comment |
|---|---|---|
| “Hello” | string | “Hello” is always “Hello” |
| 3.14 | number | 3.14 is always 3.14 |
| true | boolean | true is always true |
| false | boolean | false is always false |
| null | null (object) | null is always null |
| undefined | undefined | undefined is always undefined |
JavaScript Objects are Mutable
Objects are changeable, which means they are accessed by reference rather than value.
If person is an object, the following statement will not create a replica of them:
const x = person;
The item x is not a copy of a human. The item x is a human.
The object x and the object person have the same memory address.
Any modifications to x will modify the individual.
Example
//Create an Object
const person = {
firstName:"John",
lastName:"Doe",
age:50, eyeColor:"blue"
}
// Create a copy
const x = person;
// Change Age in both
x.age = 10;
Note:
The next chapters will teach you much more about items.
