Updated April 4, 2023
Introduction to Object in JavaScript
An object in JavaScript is a variable that contains a different value. It acts as a storage space for a set of values. Objects are one of the most important data types in JavaScript. The object contains properties, types and it’s a separate entity. It is a non-primitive datatype. For example, let’s take a football. A football has a weight, shape, color, design, etc. Here football is an object and weight, the shape is the properties of the object. Similarly, In JScript objects will have properties and those properties will define the characteristics of an object. An object can be anything Strings, Numbers, Boolean, Arrays, Functions, and so on. The properties of an object can be used later in the program after we start using an object.
Creating Object in Java Script
We can create object in JavaScript with 4 ways,
- Object literals
- “new” keyword
- ES6 class
- create()
1. Object Literals
It is the simplest option to create object in JScript. We can instantiate objects just like variables.
Example:
var database = {
FirstName : "Brad",
LastName : "Pitt",
DateOfBirth : 1975
};2. “new” keyword
User Defined Objects with “new” keyword: The “new” keyword will create an instance of an object. Object is created using “new” keyword followed by the constructor.
Example:
var manager = new Object();
var library = new Array ("books", "Novel", "Magazine");
var calendar = new Date ("July 4, 1975");In the above example, Object(), Array(), Date() are constructor methods and these are built-in JavaScript functions.
3. ES6 Class
ECMAScript 6 is defined for creating a new JScript object call the class syntax. Even though JScript is an OOP’s language, before ECMAScript 6, JavaScript did not use class unlike in Java where class are used all the time.
Example:
class student
{
Constructor (Name, Age, DOB)
{
this.Name = Name;
this.Age = Age;
this.DOB = DOB;
this.getName = function()
{
Return "details:" + this.Name + this.Age + this.DOB;
}
}
}
var database = new student("Brad", 45, 1975);4. create()
Object.create is a pre-built Object type in JavaScript. When you create new object the object.create() method will use object literal as prototype.
Example:
var student
{
Name: "Brad"
Age: 45
DOB = 1975
getName: function()
{
Return "details:" + this.Name + this.Age + this.DOB;
}
};
var Stu1 = object.create(student);
Stu1.Name = "Angel";
Stu1.Age = 35;
Stu1.DOB = 1985;Characteristics of Object in JavaScript
- Objects are bit complex and as objects can have any combination of reference data types and primitive datatypes.
- It is a datatype reference and the char or numbers that are assigned to a reference value have a pointer to the char or number. That pointer will point to the location where the object is saved.
- From one function to another the object can be passed as a reference.
- An object contains methods and property in it.
Properties of Object in JavaScript
The values associated with object are called properties of the object. It can be deleted, changed, and added.
Syntax for Object:
- Method 1:
ObjectName .property// student.age - Method 2:
ObjectName["property"] // Student ["age"]
Method 1
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JScript Object Properties</h2>
<p>we can use .property otherwise ["property"].</p>
<p id="demo"></p>
<script>
var student = {
stuname:"steve",
age:40,
}
document.getElementById("demo").innerHTML = student.stuname + " is " + student.age + " year old";
</script>
</body>
</html>Output:
Method 2
Code:
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>There are two different ways to access an object property:</p>
<p>You can use .property or ["property"].</p>
<p id="demo"></p>
<script>
var student = {
stuname:"robert",
age: 60,
bookname:"Jscript"
};
document.getElementById("demo").innerHTML = student["stuname"] + " is " + student["age"] + " year old.";
</script>
</body>
</html>Output:
Methods of Object in Jscript
In an Object, the method is considered as the behavior of an object. Methods are actions that are used on objects.
Syntax:
methodName()Code:
<html>
<body>
<p> Method 1 for method in object </p>
<p id="dem"></p>
<script>
var student = {
fName: "Steve",
lName : "Smith",
id : 5474,
fullName : function()
{
return this.fName + " " + this.lName;
}
};
document.getElementById("dem").innerHTML = student.fName();
</script>
</body>
</html>Built-In Methods
- create()
- entries()
- keys()
- values()
1. Object.create()
Object.create() method create new object and will link it to existing object.
Code:
const people = {
printIntroduction: function () {
console.log(`My full name is ${this.Fname}. Am I Alive? ${this.isalive}`);
}
};
const ke = Object.create(people);
ke.Fname = "Robert"; // "Fname" is a property set on "ke", but not on "people"
ke.isalive = true;
ke.printIntroduction();Output:
2. Object.entries()
The Object.entries() returns object’s array consists of enumerable properties [key, value] pair.
Syntax:
Object.entries(obj)Code:
const student = { 1: 'Steve', 100: 'Smith', 45: 'Christopher' };
console.log(Object.entries(student));Output:
3. Object.keys()
TheObject.keys() returns enumerable properties of an array, an array-like object, an array-like object with a random key ordering.
Code:
let employee_detail = {
employee_name: 'Steve',
employee_salary: 144,
employee_age : 23
} ;
console.log(Object.keys(employee_detail).length);The above program will give you the length of the object using object.keys() method.
Output:
4. Object.values()
The Object.value() will return an array of objects own property values. It will collect only the object values and will return an array.
Code:
// Returning property values of an array
var check = ['x', 'y', 'z'];
console.log(Object.values(check));Output:
Ways of declaring object in JavaScript:
There are different ways in which we can declare an object in JavaScript. We can declare an object using Object () constructor, Object.create() method, function constructor, function constructor + prototype, ES6 class syntax, singleton pattern.
Conclusion
In JavaScript, we use objects for declaring the value, property of the data which is a very important aspect of the programming. In JScript, each and everything is an object. Programmers use objects, properties of objects, and methods of objects to declare and use the objects in different concepts.
Recommended Articles
This is a guide to Object in JavaScript. Here we discuss the Introduction to Object in JavaScript and its Properties along with Examples and Code Implementation. You can also go through our other suggested articles to learn more –
