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

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 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

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

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"]