What is an Object?
An object is a non primitive variable that contains attributes (properties) and behaviour
(methods).
Objects are collections of key–value pairs: each key (also called a property name) is
associated with a value. This keys are nothing but strings.
An object can be imagined as a cabinet with signed files. Every piece of
data is stored in its file by the key. It’s easy to find a file by its name or
add/remove a file.
Cabinet Object
Key 1, 2, 3 Properties
Objects can describe real-world things (e.g. people, cars, houses) using properties and
methods.
For example take a car:
Creation of an object:
An empty object can be created using any one of the two syntaxes:
var x = new Object(); "object constructor" syntax
var x = { }; "object literal" syntax
Creation Using Object Literal - The object literal syntax allows you to define and initialize an
object with curly braces {}, setting properties as key-value pairs.
var person = { var person = {};
[Link] = "John";
name: "John", [Link] = "Doe";
age: 50, [Link] = 50;
}; [Link] = "blue";
A property has a key (also known as “name” or “identifier”) before the colon ":" and a value to the
right of it.
In the person object, there are two properties:
The first property has the name "name" and the value "John".
The second one has the name "age" and the value 50.
Creation Using new Object() Constructor and ‘new’ keyword
var person = new Object({ var person = new Object();
firstName: "John", [Link] = "John";
lastName: "Doe", [Link] = "Doe";
age: 50, [Link] = 50;
eyeColor: "blue" [Link] = "blue";
});
Difference between object constructor" syntax and "object literal" syntax
Feature {} (Object Literal) new Object() (Object Constructor)
Ease of Use More concise and readable. Less commonly used.
Slightly slower due to the constructor
Performance Faster and more efficient.
call.
Prototypal Same, but adds an extra layer of
Directly inherits from [Link].
Inheritance abstraction.
Literal syntax is sufficient for most use
Customization Useful only in rare scenarios.
cases.
Accessing of object properties:
You can access object properties in two ways:
[Link] [Link]
objectName["propertyName"] person[“age”]
var person = {
name: "Alice",
age: 30,
city: "New York"
};
[Link]([Link]); Output: "Alice"
[Link] ([Link]); Output: 30
Modifying of object properties:
var person = {
name: "Alice",
age: 30,
city: "New York"
};
[Link] = "Wonderland";
[Link]([Link]); Output: " Wonderland "
Object methods:
Object methods are actions that can be performed on objects.
Object methods are function definitions stored as property values:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return [Link] + " " + [Link];
}
};
Here, fullName property is executing as a function
In the example above, ‘this’ keyword refers to the person object:
[Link] means the firstName property of person.
[Link] means the lastName property of person.
Displaying Object Properties:
Code –
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>Object Methods</h2>
<p>A method is a function definition stored as a property value.</p>
<p id="demo"></p>
<script>
var CBSE = {
subject: "Web Application",
code: 803,
subject_takers: 55,
subject_code: function()
{
return [Link] + " " + [Link];
}
};
[Link]("demo").innerHTML = CBSE.subject_code();
</script></body></html>