DEV Community

Cover image for JS Objects in depth
Souvik Jana
Souvik Jana

Posted on • Updated on

JS Objects in depth

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
Enter fullscreen mode Exit fullscreen mode

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!");
};
Enter fullscreen mode Exit fullscreen mode

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!");
      }
}
Enter fullscreen mode Exit fullscreen mode

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!");
      }
}
Enter fullscreen mode Exit fullscreen mode

Feel free to use dot or square bracket notation to modify the value of a property.

souvik.learning = false;
souvik["status"] = "Building projects";
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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 the window 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
Enter fullscreen mode Exit fullscreen mode

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.

let learning = "objects in JS";

window.learning === learning; //false
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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.

You can connect 👋 with me on GitHub, Twitter, Linkedin

Discussion (4)

Collapse
alco profile image
Jakub Stibůrek

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.

Collapse
sjsouvik profile image
Souvik Jana Author

Thanks Jakub. Glad to know that it helped you to understand the concept.

Collapse
meghana__sk profile image
Meghana S K

Very helpful Souvik. Thank you!

Collapse
sjsouvik profile image
Souvik Jana Author • Edited on

Glad that you liked it.