Ranit Manik

Object in JavaScript

RANIT MANIK's photo
RANIT MANIK
·

4 min read

In JavaScript, objects are one of the most important and versatile data types. An object is a collection of key-value pairs, where each key is a string (or Symbol) and each value can be any data type, such as a number, string, array, function, or even another object.

What is an Object in JavaScript?

An object is a standalone entity with properties (key-value pairs). Objects are used to store collections of data and more complex entities.

Creating an Object

1. Using Object Literal Syntax

The most common way to create an object is by using curly braces {}.

const person = {
  name: 'Alice',
  age: 25,
  isStudent: false
};

Here, name, age, and isStudent are the keys (also called properties), and 'Alice', 25, and false are their respective values.

2. Using the new Object() Syntax

You can also create an object using the new Object() syntax, but this is less common.

const person = new Object();
person.name = 'Alice';
person.age = 25;
person.isStudent = false;

Accessing Object Properties

There are two main ways to access properties of an object:

1. Dot Notation

console.log(person.name);  // Output: Alice
console.log(person.age);   // Output: 25

2. Bracket Notation

Bracket notation is especially useful when the property name contains spaces, is stored in a variable, or is a non-string data type (like a number or symbol).

console.log(person['name']);  // Output: Alice
console.log(person['age']);   // Output: 25

Modifying Object Properties

You can modify object properties using either dot or bracket notation.

Dot Notation

person.age = 26;
console.log(person.age);  // Output: 26

Bracket Notation

person['isStudent'] = true;
console.log(person['isStudent']);  // Output: true

Adding New Properties

You can add new properties to an object at any time, using either dot or bracket notation.

person.country = 'USA';
person['job'] = 'Engineer';

console.log(person);
// Output: { name: 'Alice', age: 26, isStudent: true, country: 'USA', job: 'Engineer' }

Deleting Properties

You can delete properties from an object using the delete operator.

delete person.isStudent;
console.log(person);
// Output: { name: 'Alice', age: 26, country: 'USA', job: 'Engineer' }

Methods in Objects

Objects can also contain functions, which are referred to as methods.

const person = {
  name: 'Alice',
  age: 25,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet();  // Output: Hello, my name is Alice

You can also define methods using shorthand syntax:

const person = {
  name: 'Alice',
  age: 25,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet();  // Output: Hello, my name is Alice

Nested Objects

Objects can also contain other objects as values, creating a nested object.

const person = {
  name: 'Alice',
  age: 25,
  address: {
    street: '123 Main St',
    city: 'Wonderland'
  }
};

console.log(person.address.city);  // Output: Wonderland

Object Methods: Object.keys(), Object.values(), Object.entries()

1. Object.keys()

The Object.keys() method returns an array of a given object's own property names (keys).

const person = { name: 'Alice', age: 25 };
const keys = Object.keys(person);
console.log(keys);  // Output: [ 'name', 'age' ]

2. Object.values()

The Object.values() method returns an array of a given object's property values.

const person = { name: 'Alice', age: 25 };
const values = Object.values(person);
console.log(values);  // Output: [ 'Alice', 25 ]

3. Object.entries()

The Object.entries() method returns an array of key-value pairs (as arrays).

const person = { name: 'Alice', age: 25 };
const entries = Object.entries(person);
console.log(entries);  
// Output: [ [ 'name', 'Alice' ], [ 'age', 25 ] ]

Prototype and Inheritance

JavaScript objects also have an internal property called prototype, which is used for inheritance. Objects can inherit properties and methods from their prototype object, allowing for shared functionality. This concept is essential for object-oriented programming (OOP) in JavaScript.

Example:

const animal = {
  speak: function() {
    console.log('Animal makes a sound');
  }
};

const dog = Object.create(animal);
dog.speak();  // Output: Animal makes a sound

In this example, dog inherits from animal, and it can use the speak method from the prototype.

Summary of Key Points

  • Objects are collections of key-value pairs, where keys are strings (or Symbols) and values can be any data type.

  • You can create objects using literal notation {} or the new Object() constructor.

  • Access and modify properties with dot notation or bracket notation.

  • Methods are functions defined inside objects.

  • Nested objects allow you to structure complex data within objects.

  • Object.keys(), Object.values(), and Object.entries() help extract keys, values, or key-value pairs from an object.

ObjectsJavaScript