Hello everyone, we would be covering all about JS objects today which would help you to
- make better use of objects while writing programs in JS
- understand its syntax and different ways to manipulate objects
So, keep reading till the end and I hope you'll learn something from it.
Objects
The object is one of the most useful data structures in JavaScript - a collection of associated key/value pairs.
Creating objects
New empty objects can be created in 2 ways:
- literal notation
-
Object()
constructor function
const myObject = {}; // Using literal notation
const myObject = new Object(); // Using the Object() constructor function
However, the recommended way to create a new object is to use literal notation as the Object()
constructor function is a bit slower and verbose.
Add property to an object
Dot notation as well as square bracket notation can be used to add a new property to an object with its value.
const souvik = {};
souvik.learning= true;
souvik["status"] = "Learning and implementing";
souvik.work = function () {
console.log("Working as Full Stack Web Dev!");
};
After adding all these properties, the object would look like this:
{
learning: true,
status: "Learning and implementing",
work: function () {
console.log("Working as Full Stack Web Dev!");
}
}
Modify properties of an object
Data within objects are mutable, which means data can be modified.
const souvik = {
learning: true,
status: "Learning and implementing",
work: function () {
console.log("Working as Full Stack Web Dev!");
}
}
Feel free to use dot or square bracket notation to modify the value of a property.
souvik.learning = false;
souvik["status"] = "Building projects";
Remove property of an object
Since data within objects are mutable, we can delete any property from an object using the delete
operator.
delete souvik.learning; //true
Passing arguments
Objects are mutable in JS. So, if you're passing an object to a function or, you're creating a copy of the original object, and modifying the value of any property of the object that would modify the value for the original object as in both cases the new copy of the object points to the same reference or memory location. And once we're updating the value of a property, it would reflect in each and every copy of the object.
let originalObject = {
status: "online"
};
function setToOffline(object) {
object.status = "offline";
}
setToOffline(originalObject);
originalObject.status; // "offline"
On the other hand, the primitive data types(string, boolean, number) are immutable. When we pass a primitive argument, the function creates a local copy of the same which points to a different memory location and performs the operation on it as per the need. In that way, it doesn't update the actual data.
function changeToEight(n) {
n = 8; // whatever n was, it is now 8... but only in this function!
}
let n = 7;
changeToEight(n);
console.log(n); // 7
this
keyword
A method can access the object's properties it was called on using the reserved keyword this
.
const souvik = {
learning: true,
status: "Learning",
work: function () {
console.log(`${this.status} Full Stack Web Dev!`);
}
}
souvik.work() //Learning Full Stack Web Dev!
In other words, we can also say the this
keyword helps an object to access and manipulate its own properties. This way of invoking a method using dot operator is known as Implicit binding where this
refers to the object using which the method is invoked.
There're other ways of invoking a method where this
will point to some other objects using call(), apply() and bind() methods - which is known as Explicit binding. To know more read call, bind and apply in JS article.
window
object
Now, as we know about the this
keyword, I have a question for you, what would be the output if we invoke exploringThis
function?
function exploringThis() {
console.log(this)
}
exploringThis();
In this case or, any regular function this
points to the global object window
.
window
object is provided by the browser and globally accessible by JS code using thewindow
keyword. This object is not part of the JavaScript specification.
Any global variables, functions are accessible as properties of the window
object.
var learning = "objects in JS";
function work() {
console.log("Writing blog on JS objects")
}
window.learning === learning; //true
window.work === work; //true
Only declaring variables with the
var
keyword will add them to thewindow
object. If you declare a variable withlet
orconst
, it won't be added as the property to thewindow
object.
let learning = "objects in JS";
window.learning === learning; //false
Object methods
The Object()
constructor function that can be used to create a new empty object, has some methods of its own. These methods are:
-
Object.keys()
- this would return an array of keys of the object that is given to it -
Object.values()
- similarly, this would return an array of values of the object that is given to it
const souvik = {
learning: true,
status: "Learning",
}
Object.keys(souvik); // ["learning", "status"]
Object.values(souvik); // [true, "Learning"]
These methods are really helpful while you want to do some manipulation with respect to an object's keys or values.
If you want to read more on this, refer Object MDN, this keyword MDN, window object MDN.
Thanks for reading till nowð
Share this blog with your network if you found it useful and feel free to comment if you've any doubts about the topic.
Top comments (4)
Great article. This helped me: "Only declaring variables with the var keyword will add them to the window object. If you declare a variable with let or const, it won't be added as the property to the window object." Thank you.
Thanks Jakub. Glad to know that it helped you to understand the concept.
Very helpful Souvik. Thank you!
Glad that you liked it.