Scribd
Upload
1 views12 pages

JavaScript Object

The document explains JavaScript objects by comparing them to real-life objects, highlighting their properties and methods. It details how to create objects using object literals, constructors, and the new keyword, along with examples of accessing and displaying object properties. Additionally, it emphasizes the importance of using constructor functions for creating multiple objects of the same type.

Uploaded by

gouginkhongsailnd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views12 pages

JavaScript Object

The document explains JavaScript objects by comparing them to real-life objects, highlighting their properties and methods. It details how to create objects using object literals, constructors, and the new keyword, along with examples of accessing and displaying object properties. Additionally, it emphasizes the importance of using constructor functions for creating multiple objects of the same type.

Uploaded by

gouginkhongsailnd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

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>

You might also like