The fundamental building blocks of JavaScript are objects. It is a well-known fact that “everything in JS is an Object.” Given that objects are of the utmost importance in JavaScript, it is essential to have a thorough understanding of them. This blog aims to provide a comprehensive understanding of objects by delving into the following topics:

. The concept of objects and their syntax
. JavaScript’s built-in objects
. The description of properties
. The Getter and Setter Method

By gaining a deeper understanding of these concepts, you can enhance your knowledge of objects and their applications in JavaScript. This blog is an excellent resource for developers who want to get deeper knowledge in JS.

The concept of objects and their syntax -

In JavaScript, an object is a self-contained unit with properties and a type. It can be likened to a physical object, such as a cup. A cup, like an object in JavaScript, has specific properties that define its characteristics, such as color, design, weight, and material.

To create an object in JavaScript, we have two options — the literal syntax and the constructed syntax. The literal syntax involves declaring an object using curly braces and defining its properties within the braces. For example, we can create an object called myObj and define its properties using the following code:

var myObj = {
    key1: value1,
    key2: value2,
    key3: value3
}

On the other hand, the constructed syntax involves creating an object using the Object constructor and defining its properties using dot notation. For instance, we can create an object called Obj and set its properties as follows:

var Obj = new Object();
Obj.key1 = value1;
Obj.key2 = value2;
Obj.key3 = value3;

It’s important to note that both methods are identical in their ability to create objects. However, with the literal syntax, we can define an object’s properties in bulk form, whereas with the constructed syntax, we must define each property individually using dot notation.

JavaScript’s built-in objects -

JavaScript has several built-in objects that are essential to its functionality. These objects are:

String
Number
Boolean
Object
Function
Array
Date
RegExp
Error

At first glance, these objects appear to be actual types or classes, similar to Java’s String class. However, in JavaScript, they are just built-in functions that can be used as constructors to create newly constructed objects of the subtype in question.

For example, we can create a string primitive value using the following code:

var strPrimitive = "I am a string";
typeof strPrimitive; // "string"

In this case, strPrimitive is a primitive and immutable value, not an object. However, to perform various operations on the string, such as checking its length or accessing its characters, we need a String object. Luckily, JavaScript automatically converts all primitive strings to String objects, which means we don’t need to convert them explicitly. We can create a String object using the new keyword as follows:

var strObject = new String("I am a string");
typeof strObject; // "object"

It’s important to note that this distinction applies to all types of built-in objects. Understanding this difference between primitives and objects is crucial when working with JavaScript.

In summary, JavaScript’s built-in objects are essential to its functionality and can be used as constructors to create newly constructed objects of the subtype in question. It’s important to understand the distinction between primitives and objects when working with these built-in objects.

The description of properties -

Now we know that we can build an object and define its properties. We have also looked at some built-in objects and how JS handles them internally. Now, we will take a closer look at object properties. Let’s take an example:

var myObj = {
  a: 2,
}

By observing the above values, we cannot determine which of the above properties are read-only or not. From late ES5, JS added some methods to have a description of the object.

var myObj = {
  a: 2,
}

Object.getOwnPropertyDescriptor(myObj, "a");

Output - 
//{
//  value: 2,
//  writable: true,
//  enumerable: true,
//  configurable: true
//}

As we can see, the property descriptor for our normal object property “a” is much more than just a value. It includes three other characteristics.

While we can see all the default values for the object, we can also create them and set default values. Let’s create an object with property descriptor.

var myObject = {};

Object.defineProperty(myObject, "a", {
value: 3,
writable: true,
configurable: true,
enumerable: true
});

By using defineProperty, we have added a plain property in the myObject. We will go with these three values one by one:

writable — The ability to change the value of a property is controlled by writable. If we provide the value ‘false’, it will not allow changing the property value.

configurable — This is used if the property is configurable or not, which means once we define the object property with defineProperty and provide configurable as false, we cannot later change any of its definition.

enumerable — This allows the object properties to allow enumeration actions such as for…in loop.

Getter and Setter Methods in Object -

JavaScript provides default operations for Objects called “get” and “set”. These operations allow us to retrieve and modify the values of an object’s keys. However, ES5 introduced a way to override these operations, which many developers may not be familiar with.

To override the “get” operation for a key, we can define a “getter” for that key. In the following example, we define a getter for the key “a” in an object called “myObject”:

var myObject = {
  get a() {
    return 2;
  }
};

In this case, whenever we access the key “a” in “myObject”, the value 2 will be returned.

Similarly, we can override the “set” operation for a key by defining a “setter” for that key. In the following example, we define both a getter and a setter for the key “a”:

var myObject = {
  get a() {
    return this._a;
  },
  set a(val) {
    this._a = val * 2;
  }
};

In this case, whenever we set the value of “a” in “myObject”, the value is multiplied by 2 and stored in a private variable “_a”. Whenever we access the value of “a” in “myObject”, the getter is called and returns the value of “_a”.

Finally, we can use the “defineProperty” method to add a property to an object with a custom getter or setter. In the following example, we add a property “b” to “myObject” with a getter that returns the value of “a” multiplied by 2:

Object.defineProperty(myObject, "b", {
  get: function() {
    return this.a * 2;
  }
});

By using getters and setters, we can override the default behavior of object keys and implement custom logic for getting and setting their values.

That’s it for now. I hope you enjoy reading this article. Please share and give a clap.

👋 If you find this helpful, please click the clap 👏 button below a few times to show your support for the author 👇

🚀Join FAUN Developer Community & Get Similar Stories in your Inbox Each Week

JavaScript Objects in depth was originally published in FAUN — Developer Community 🐾 on Medium, where people are continuing the conversation by highlighting and responding to this story.