Basics of Objects in JavaScript
JavaScript is an object-based language; its objects are made up of attributes.
If an attribute contains a function, it is considered a method; otherwise, it is a property.
JavaScript provides objects and arrays for gathering and referring to related sets of data under a single name.
How to Create an Object in JavaScript
There are several ways to create an object in JavaScript:
1. Literal
The list of properties and values enclosed in curly braces, property, and value is separated by : (colon), also known as object initializer.
let employee = { id: 1001, name: "Neil Hanks", contact: 9876543210 };
2. Instance
Since the new object can inherit properties and methods from the prototype object, we can create a new object using an existing object as its prototype using the new keyword.
let employee = new Object(); employee.id = 1001; employee.name = "Neil Hanks"; employee.contact = 9876543210;
3. Constructor
We can use the constructor function to create and initialize objects, create a constructor function with parameters, and assign values to its property by this keyword inside the function.
function employee(id, name, contact) {
this.id = id;
this.name = name;
this.contact = contact;
}
let emp = new employee(1001, "Neil Hanks", 9876543210);
Methods in JavaScript
Methods are object properties with functions. They can also be part of the object when it is created or added later, like properties.
// constructor function
function Person () {
this.name = "John",
this.age = 23,
this.greet = function () {
console.log("hello");
}
}
Accessing Properties from an Object
Like Java, an object’s properties can be accessed using the dot notation.
employee.name; // Output : Neil Hanks
We can also access the property dynamically using square bracket notation, also called computed property.
employee[“name”]; // Output : Neil Hanks
The second method has the advantage that the property name is provided as a string, which means it can be calculated at runtime. It can also be used to set and obtain properties with reserved words.
Get Values from an Object
By using the Object.values() method, we can return an array of an object’s values.
const employee = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
};
const emp1 = Object.values(employee);
console.log(emp1) //[1001, "Neil Hanks", 9876543210]
Get Keys from an Object
By using the the Object.keys() method, we can return an array of an object’s keys.
const employee = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
};
const emp1 = Object.keys(employee);
console.log(emp1) //["id", "name", "contact"]
Array Entries from an Object
By using Object. entries() method, we can create an array which contains arrays of key/value pairs of an object
const employee = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
};
const emp = Object.entries(employee);
console.log(emp)
//[["id", 1001], ["name", "Neil Hanks"], ["contact", 9876543210]]
Merging Two Objects in JavaScript
Merging two objects by the spread operator returns a new object.
const employee = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
};
const newEmp = {
...employee,
location: "India"
}
console.log(newEmp)
//output
newEmp = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
location: "India"
};
Combining Two Objects
const employee = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
};
const emp1newVal = {
location: "India"
}
const combineObj = Object.assign(employee, emp1newVal)
console.log(combineObj)
//output
combineObj = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
location: "India"
};
Freezing Objects
1. Use: Object.freeze()
Using this method, we can freeze an object, preventing the modification of existing properties or adding new properties and values.
const employee = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
};
Object.freeze(employee);
employee.name = 'Tom';
console.log(user1.name) //"Neil Hanks"
2. Object Frozen or Not: Object.isFrozen()
Using this method, we can determine if an object is frozen or not, and it returns a Boolean value.
const employee = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
};
console.log(Object.isFrozen(employee)) // false
Object.freeze(employee)
console.log(Object.isFrozen(employee)) // ture
Sealing an Object
1. Use: Object.seal()
This method can be used to prevent new properties from being added, but Values of present properties can still be changed if they are writable.
const employee = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
};
Object.seal(employee);
employee.age = 'Tom';
console.log(employee.name) //"Tom"
employee.age = 26;
console.log(employee.age) //undefined
2. Object Sealed or Not: Object.isSealed()
Using this method, we can determine if an object is sealed or not, and it returns a Boolean value.
const employee = {
id: 1001,
name: "Neil Hanks",
contact: 9876543210,
};
console.log(Object.isSealed(employee)) //false
Object.seal(employee);
console.log(Object.isSealed(employee)) // ture
