Scribd
Upload
3 views

Javascript Object

The document explains JavaScript objects, detailing their properties and methods, and how to create and access them. It includes several example programs demonstrating variable assignment, object creation, property access, and method definition. Additionally, it warns against declaring primitive types as objects to avoid complications in code execution.

Uploaded by

panigrahi.gayatrri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Javascript Object

The document explains JavaScript objects, detailing their properties and methods, and how to create and access them. It includes several example programs demonstrating variable assignment, object creation, property access, and method definition. Additionally, it warns against declaring primitive types as objects to avoid complications in code execution.

Uploaded by

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

JAVASCRIPT OBJECT

A car has properties like weight and color, and methods like start and stop:
Object Properties Methods

car.name = Fiat car.start()

car.model = 500 car.drive()

car.weight = 850kg car.brake()

car.color = white car.stop()

All cars have the same properties, but the property values differ from car
to car.
All cars have the same methods, but the methods are performed at
different times.

1.PROGRAM 1(This code assigns a simple value (Fiat) to a variable named


car)
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
// Create and display a variable:
let car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>

</body>
</html>
Output:-
JavaScript Variables
Fiat
2.PROGRAM 2(This code assigns many values (Fiat, 500, white) to
a variable named car)
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:


document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

</body>
</html>
Output:-
JavaScript Objects
The car type is Fiat
3.PROGRAM 3(Object Definition)
You define (and create) a JavaScript object with an object literal
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

// Display some data from the object:


document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>
OUTPUT:-
JavaScript Objects
John is 50 years old.
4.PROGRAM 4
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};

// Display some data from the object:


document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>
OUTPUT:
JavaScript Objects
John is 50 years old.
Property Property Value

firstName John

lastName Doe

age 50

eyeColor blue
Object Properties
The name:values pairs in JavaScript objects are called properties:

Accessing Object Properties


You can access object properties in two ways:
objectName.propertyName
or
objectName["propertyName"]

PROGRAM 5
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566
};

// Display some data from the object:


document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>
OUTPUT
JavaScript Objects
There are two different ways to access an object property.
You can use person.property or person["property"].
John Doe
PROGRAM 6
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566
};

// Display some data from the object:


document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>
OUTPUT:
JavaScript Objects
There are two different ways to access an object property.
You can use person.property or person["property"].
John Doe
Property Property Value

firstName John

lastName Doe

age 50

eyeColor blue

fullName function() {return this.firstName + " " + this.lastName;}

Object Methods
Objects can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
A method is a function stored as a property.

What is this?
In JavaScript, the this keyword refers to an object.
Which object depends on how this is being invoked (used or called).
The this keyword refers to different objects depending on how it is used:
In an object method, this refers to the object.

Alone, this refers to the global object.

In a function, this refers to the global object.

In a function, in strict mode, this is undefined.

In an event, this refers to the element that received the event.

Methods like call(), apply(), and bind() can refer this to any object.
PROGRAM 7
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};

// Display data from the object:


document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>
OUTPUT
JavaScript Objects
An object method is a function definition, stored as a property value.
John Doe
PROGRAM 8
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function
definition:</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

// Display data from the object:


document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>
OUTPUT:
JavaScript Objects
If you access an object method without (), it will return the function definition:
function() { return this.firstName + " " + this.lastName; }
Do Not Declare Strings, Numbers,
and Booleans as Objects!
When a JavaScript variable is declared with the keyword " new", the variable is
created as an object:
x = new String(); // Declares x as a String object
y = new Number(); // Declares y as a Number object
z = new Boolean(); // Declares z as a Boolean object
Avoid String, Number, and Boolean objects. They complicate your code and
slow down execution speed.

You might also like