Objects are everywhere in JavaScript. They are super-important and there is so much you can do with them.
Objects are core data structures in JavaScript.
An object is a super important data structure because it is used to reflect real-world entities. They allow us to apply real-world logic to coding. They are data structures that are made up of properties(key: value) and methods.
Examples of real-world Objects with properties and methods
An example of a real-life object is a bank account. A bank account has properties like balance and methods like withdrawal and deposit.
Another example is a car, which has properties like car color, make, model, and methods like car start, car brake, and car drive.
Differences Between Properties and Methods in JavaScript
Properties
- They are variables in an object
- Data are stored in a property
Methods
- They are functions in an object
- Actions are stored in methods
You can store, operate with, and send data across a network with JavaScript objects. You can store comprehensive, composite, and sophisticated data in objects.
Creating New Objects
1. Using Object Initializers
Creating an object is relatively easy. To create an object, all you need is a set of curly braces { } and within that, you have to write key: value pairs separated with a comma ,.
2. Using the constructor function
Alternatively, you can create an object by writing a constructor function and then creating an instance of the object with the 'new' keyword.
Notice the use of the 'this' keyword to assign values to the object property based on the value of the object passed to the function.
This statement creates Mydetails and assigns it the specified values for its properties. Then the value of
Mydetails.Surname is the string "Akinnimi",
Mydetails.FirstName is the string "Stefan",
Mydetails.Age is the integer 20.
My.details.FavouriteColor is the string “blue”
NOTE: Arguments and parameters should be given in the same sequence.
Output:
Adding Items to an Object
To add items to an object in JavaScript, you select the properties of the object and then assign a value to it using the equal sign.
Output:
Deleting Items in an Object
To delete an item in an object, you will use the delete keyword, followed by the object name and properties. This will remove the selected object properties and values from the object.
Output:
Surname and Age have been removed from the object.
Accessing Items In an Object
Should you require access to any of the object's properties? A property's 'key' can be used to gain access to its value. The properties of the object can be accessed in one of two ways:
Dot Notation
The name of the object and the name of the property are separated with a dot sign.
The bracket notation
You can use bracket notation to replace the dot(.) with square brackets [ ] and then convert the key name to a string.
Nested objects or Arrays
A nested object is one that is contained within another object. An Array can also be nested inside an object.
In the example above, you will notice we have an array called ‘Hobbies’ and another object called ‘Networth’ nested in the ‘Myobject’ object.
Copying an Object Using the Spread Operator
Objects can also be deep copied to another variable by using the spread operator.
After copying an object, you can proceed to add or delete the items inside the copied objects; the items won't be deleted from the object where they were copied.
Object methods
Creating functions inside of objects is referred to as creating methods in JavaScript.
NOTE: The 'this' keyword used in the method is a way of calling the parent object.
The ‘this’ keyword is referring to the MyObject in this case. Is just like saying,
MyObject.Surname + ' ' + MyObject.FirstName for the first method
OR
Myobject.Networth.assets - Myobject.Networth.Liability for the second method
You can invoke or call a function (method) in an object after creating it by using the dot notation and an empty parenthesis.
Object destructuring (ES6)
Object destructuring, a useful feature of JavaScript, allows you to extract properties from objects and bind them to variables. The order in which you arrange the properties does not matter, but the key matters.
It is capable of extracting many properties in one statement, accessing properties from nested objects, and setting a default value in the absence of a property.
//Syntax
const { property } = object;
In the above example, Line 14 will throw an error because FavoriteColor is not part of the properties of MyObjects, which were destructured, i.e., FavoriteColor was not destructured.
Conclusion
Objects serve as a building block for structuring and organizing data in JavaScript.
An object is very powerful, it enables a developer to create real-life scenarios with code. As you continue your journey in JavaScript, the insights gained from this introduction to objects will serve as a solid foundation upon which you can build more complex and innovative applications.
Top comments (2)
Thank you for reintroducing certain object-oriented concepts and syntax that are often overlooked. It reminds us that these elements are also available.
Thanks for the feedback @parzival_computer
Glad I could be of help.