Mastering JavaScript Objects and Their Methods

JavaScript is an object-oriented programming language, and objects are a fundamental component of the language. Objects allow developers to store and manipulate data in a structured and organized manner, making it easier to manage and work with complex data.

In this blog, we will explore JavaScript objects and their methods. We'll look at how objects are created, how to access and manipulate their properties, and the different methods that can be used with objects.

Creating Objects

In JavaScript, objects can be created using two methods: object literals and the Object() constructor.

// Object literal
const person = {
  name: 'John',
  age: 25,
  gender: 'male'
};

// Object constructor
const person = new Object();
person.name = 'John';
person.age = 25;
person.gender = 'male';

Object literals are a shorthand way of creating objects, while the Object() constructor creates an empty object that can be populated with properties using dot notation or bracket notation.

Accessing and Manipulating Properties

Properties of an object can be accessed and manipulated using dot notation or bracket notation.

const person = {
  name: 'John',
  age: 25,
  gender: 'male'
};

// Dot notation
console.log(person.name);

// Bracket notation
console.log(person['age']);

// Updating a property
person.age = 30;
console.log(person.age);

In the above example, we have created an object person with three properties: name, age, and gender. We can access and manipulate these properties using dot notation or bracket notation. Dot notation is more commonly used, but bracket notation can be useful when accessing properties dynamically.

Object Methods

JavaScript objects also have built-in methods that can be used to perform operations on objects.

Object.keys()

The Object.keys() method returns an array of the object's keys.

const person = {
  name: 'John',
  age: 25,
  gender: 'male'
};

console.log(Object.keys(person)); // ["name", "age", "gender"]

Object.values()

The Object.values() method returns an array of the object's values.

const person = {
  name: 'John',
  age: 25,
  gender: 'male'
};

console.log(Object.values(person)); // ["John", 25, "male"]

Object.entries()

The Object.entries() method returns an array of the object's key-value pairs.

const person = {
  name: 'John',
  age: 25,
  gender: 'male'
};

console.log(Object.entries(person)); // [["name", "John"], ["age", 25], ["gender", "male"]]

Object.assign()

The Object.assign() the method copies the values of all enumerable properties from one or more source objects to a target object.

const person = {
  name: 'John',
  age: 25,
  gender: 'male'
};

const newPerson = Object.assign({}, person, { age: 30, occupation: 'developer' });

console.log(newPerson); // { name: "John", age: 30, gender: "male", occupation: "developer" }

In the above example, we have created a new object newPerson by copying the properties from the person object and adding a new property occupation and updating the age property.

Conclusion

JavaScript objects are a powerful tool for organizing and manipulating data.

Did you find this article valuable?

Support Pranit Ingole by becoming a sponsor. Any amount is appreciated!