JavaScript Objects
Real Life Objects
In real life, objects are things like: houses, cars,
people, animals, or any other subjects.
Here is a car object example:
Car Object Properties Methods
car.name = Fiat car.start()
car.model = 500 car.drive()
car.weight = 850kg car.brake()
car.color = white car.stop()
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.
Note: JavaScript variables are containers for
data values. (one value)
JavaScript Objects
Objects are variables too. But objects can
contain many values.
This code assigns many values (Fiat, 500,
white) to an object named car:
Example:
var car = {type:"Fiat", model:"500",
color:"white"};
<script>
// Create an Object:
const car = {type:"Fiat", model:"500",
color:"white"};
// Display Data from the Object:
document.getElementById("demo").innerHT
ML =
"The car type is " + car.type;
</script>
JavaScript Object Definition
How to Define a JavaScript Object
• Using an Object Literal
• Using the new Keyword
• Using an Object Constructor
Creating a JavaScript Object
These examples create a JavaScript object
with 4 properties:
<script>
// Create an Object:
const person = {firstName:"John",
lastName:"Doe", age:50, eyeColor:"blue"};
// Display Data from the Object:
document.getElementById("demo").innerHT
ML =
person.firstName + " is " + person.age + "
years old.";
</script>
Spaces and line breaks are not important. An
object initializer can span multiple lines:
// Create an Object
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
This example creates an empty JavaScript
object, and then adds 4 properties:
var person = {};
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Using the new Keyword
This example create a new JavaScript object
using new Object(), and then adds 4
properties:
var person = new Object();
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Example:
<script>
// Create an Object
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
// Diplay Object Content
Document.write(person.firstName + " is " +
person.age + " years old.");
</script>
Object Properties
he named values, in JavaScript objects, are
called properties.
Property Value
firstName John
lastName Doe
age 50
eyeColor blue
Accessing Object Properties
You can access object properties in two ways:
objectName.propertyName
objectName["propertyName"]
Examples
<script>
// Create an Object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display lastName from the Object:
document.getElementById("demo").inner
HTML =
"The last name is " + person.lastName;
</script>
Or
// Display lastName from the Object:
document.getElementById("demo").inner
HTML =
"The last name is " + person["lastName"];
JavaScript Object Constructors
Sometimes we need to create many
objects of the same type.
To create an object type we use an object
constructor function.
It is considered good practice to name
constructor functions with an upper-case
first letter.
Object Type Person
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Example
<script>
// Constructor Function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// Create a Person object
var myFather = new Person("John", "Doe",
50, "blue");
// Display age
document.write("My father is "
+myFather.age + ".");
</script>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// Create two Person objects
const myFather = new Person("John",
"Doe", 50, "blue");
const myMother = new Person("Sally",
"Rally", 48, "green");
// Display age
document.getElementById("demo").inner
HTML =
"My father is " + myFather.age + ". My
mother is " + myMother.age + ".";
</script>
