Working with JavaScript Objects

Working with JavaScript Objects

4 mins read448 Views Comment
Updated on Dec 18, 2023 19:02 IST

JavaScript objects are versatile structures for storing and managing data in key-value pairs, enabling the organization of complex data sets. They support various data types as values, including arrays and other objects, and offer functionality through methods. Objects in JavaScript are essential for representing real-world data and facilitating object-oriented programming techniques.

2022_11_JavaScript-Objects-2.jpg

In this article, we will talk more about JavaScript objects, their significance, how to create objects in JavaScript, and defining JavaScript object methods.

Read out: JavaScript Classes

Table of Contents

JavaScript Objects

A JavaScript object is a stateful entity with behavior (properties and method). JavaScript is template-based rather than class-based. We don’t create a class to get the object here. However, we direct the creation of objects. Objects represent a very important data type in JavaScript and serve as the foundation for modern JavaScript. These objects differ from JavaScript’s primitive data types such as String, Number, Boolean, undefined,  null, and symbol. In this, they tend to store a single value, whereas the primitive data types store multiple values and it depends on their types.

Let us see the syntax for an object in JavaScript:


 
let obj_name = {
key_name : value,
.. }
Copy code
Recommended online courses

Best-suited JavaScript courses for you

Learn JavaScript with these high-rated online courses

2.05 K
3 months
– / –
6 months
– / –
2 months
– / –
100 hours
– / –
100 hours
– / –
6 months
– / –
1 month
– / –
40 hours
– / –
40 hours

JavaScript Objects Inherited Properties

An object’s inherited properties are those that were inherited from the object’s prototype rather than being classified for the object on its own, which is recognized as the object’s Own property. The function hasOwnProperty() { [native code] } method can be used to determine whether a property is an object’s Own property. Property Attributes In JavaScript, data properties have four attributes.

  • Value: The worth of the property.
  • Writable: When it is true, the value of the property can be changed.
  • Enumerable: When true, the property can be iterated over using “for-in”. If this is not the case, the property is said to be non-enumerable.
  • Configurable: If this is false, attempt to delete the property, convert it to an access-or property, or change its attributes.

Also read: Java vs JavaScript: Difference between Java and JavaScript.

Creating JavaScript Objects

1. Creating Object using Object Literal In JavaScript

Let us see a simple JavaScript code to create a object using Object Literal:


 
<script>
let School = {
name: 'DAV School',
location : 'Himachal',
established : '1950',
displayInfo : function(){
console.log(`${School.name} was founded
in ${School.established} at ${School.location}`);
}
}
School.displayInfo();
</script>https://www.shiksha.com/online-courses/what-is-javascript-st619-tg305#description
Copy code

Output:

DAV School was founded in 1950 at Himachal

Read More: Introduction to JavaScript Data Types With Examples

2. Creating Object using Object Literal In JavaScript (with new keyword)

Let us see a simple JavaScript code to create an object using the ‘new’ keyword:


 
<html>
<body>
<script>
var employee=new Object();
employee.id=100;
employee.name="Megha";
employee.salary=70000;
[removed](employee.id+" "+employee.name+" "+employee.salary);
</script>
</body>
</html>
Copy code

Output:

100 Megha 70000

Explore more: JavaScript Functions

3. Creating Object using Object Constructor in JavaScript

Let us see a simple JavaScript code to create an object using the ‘this’ constructor:


 
<html>
<body>
<script>
function employee(ID,name,salary){
this.ID=ID;
this.name=name;
this.salary=salary;
}
x=new employee(100,"Megha",70000);
[removed](x.ID+" "+x.name+" "+x.salary);
</script>
</body>
</html>
Copy code

Output:

100 Megha 70000
JavaScript Array – How to Use Them?
15+ JavaScript Array Methods with Examples
JavaScript Array Sort

JavaScript Object Methods

SNo. Method Description
1 Object.assign()  Copies the values and properties from the source object to a target object
2 Object.create() Used to creates new object with the specified properties.
3 Object.defineProperty() Used to define the behavioral attributes/ properties of the object.
4 Object.enteries() Returns an array with key-value pairs of the object.
5 Object.freeze() Prevents existing properties from being removed.
6 Object.is() Compares if two objects have are the same value
7 Object.getPrototypeOf() Returns the prototype of the specified object.
8 Object.seal() Prevents the addition of any new properties and marks all existing properties as non-configurable.
9 Object.preventExtensions() Prevents addition of any new property to an object.
10 Object.values() This method returns an array of values

More about JavaScript Objects

  • Objects are more complex, with any mixture of the primitive data types and reference data types possible.
  • An object is a type of reference data. Variables that have a reference value assigned to them are provided a reference or even a pointer to that value. This reference or pointer points toward the memory location where the object is stored. The variables do not store the value.
  • Objects in JavaScript have loosely defined like an unsorted collection of related data in the form of “key: value” pairs of primitive types. In the context of an object, these keys could be variables or functions, which are referred to as properties and methods, respectively.

Check out: Top 85+ JavaScript Interview Questions and Answers for 2022

Conclusion

In this article, we have talked about JavaScript Objects in detail. A JavaScript object is a stateful entity with behavior (properties and method). JavaScript is template-based rather than class-based. We don’t create a class to get the object here. We have also discussed 3 main types for creating a JavaScript object along with the methods of JavaScript Objects.

Author: Megha Garg

Top FAQs on Working with JavaScript Objects

What is a JavaScript object?

A JavaScript object is a collection of key-value pairs, where keys (or properties) can be strings or symbols, and values can be any data type, including functions or other objects.

How do you create an object in JavaScript?

You can create an object using curly braces {}, with an optional list of properties. For example: let person = { name: "Alice", age: 25 };.

How do you access and modify properties in an object?

Access properties using dot notation (

object.property
Copy code
) or bracket notation (
object["property"]
Copy code
). Modify them by assigning a new value, like
object.property = newValue
Copy code
.

How do you add new properties to an object?

Add new properties by simply assigning a value to a new key, such as

object.newProperty = value
Copy code
.

About the Author

This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio