Javascript And its Object

JavaScript objects are a fundamental concept in the language and are used to store and organize data. They are similar to real-world objects in that they have properties and methods that can be used to manipulate and access their data. In this article, we will discuss the basics of JavaScript objects, how to create and access them, and the different methods available for working with objects.

Apart from that Javascript Objects are very important as most API fetch calls return something similar and if we don't know how to work with Javascript Objects. Our life as developers will become very hard very soon.

Creating Objects

JavaScript objects can be created using object literals, which are enclosed in curly braces {}. Properties and methods are defined using key-value pairs, with the key being a string and the value being any valid JavaScript data type. Here's an example of an object literal that represents a car:

Copy codelet car = {
  make: "Toyota",
  model: "Camry",
  year: 2020,
  getInfo: function() {
    return `${this.year} ${this.make} ${this.model}`;
  }
};

This object has properties make, model, and year and a method getInfo which returns a string representation of the car.

Object literals are a great way to create small, one-off objects, but they can become unwieldy when you need to create multiple objects with the same structure. In such cases, you can use constructors to create objects. A constructor is a function that is used to create new objects. It is defined using the function keyword, and it can take any number of arguments. Here's an example of a constructor that creates car objects:

Copy codefunction Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.getInfo = function() {
    return `${this.year} ${this.make} ${this.model}`;
  }
}
let car1 = new Car("Toyota", "Camry", 2020);
let car2 = new Car("Honda", "Civic", 2021);

In this example, the Car the constructor creates new car objects and assigns properties to them based on the arguments passed to the constructor.

Accessing Properties and Methods

Properties and methods of an object can be accessed using the dot notation or the bracket notation. The dot notation is used to access properties and methods directly, while the bracket notation can be used to access properties using a variable or an expression. Here's an example of how to access the properties and method of the car object:

Copy codeconsole.log(car1.make);  // Output: Toyota
console.log(car1.getInfo()); // Output: 2020 Toyota Camry
let prop = "model";
console.log(car1[prop]); // Output: Camry

Modifying Properties

The properties of an object can be modified by directly assigning a new value to them. For example, to change the value of the year property of the car object, you can do:

Copy codecar1.year = 2022;
console.log(car1.year); // Output: 2022

Object Methods

JavaScript objects are collections of key-value pairs, and each key-value pair is called a property. In addition to properties, objects can also have methods, which are functions that are associated with an object.

There are several built-in methods in JavaScript that can be used with objects, including:

  • Object.assign() : This method copies the values of all enumerable own properties from one or more source objects to a target object and returns the target object.

  • Object.create() : This method creates a new object with the specified prototype object and properties.

  • Object.defineProperties() : This method defines new or modifies existing properties directly on an object, and returns the object.

  • Object.defineProperty() : This method defines a new property directly on an object, or modifies an existing property, and returns the object.

  • Object.entries() : This method returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in the loop.

  • Object.freeze() : This method prevents new properties from being added to an object and prevents existing properties from being removed or modified.

  • Object.getOwnPropertyDescriptor() : This method returns a property descriptor for the own property of an object.

  • Object.getOwnPropertyNames() : This method returns an array of all properties (enumerable or not) found directly upon a given object.

  • Object.getPrototypeOf() : This method returns the prototype of the specified object.

  • Object.isExtensible() : This method determines if an object is extensible (whether it can have new properties added to it).

  • Object.keys() : This method returns an array of a given object's own enumerable properties.

  • Object.preventExtensions() : This method prevents new properties from ever being added to an object.

  • Object.seal() : This method prevents new properties from being added to an object and marks all existing properties as non-configurable.

  • Object.values() : This method returns an array of a given object's own enumerable property values.

Did you find this article valuable?

Support Ashish Jha by becoming a sponsor. Any amount is appreciated!