Objects

All about Objects in JavaScript

Suppose we have the following object:

const data = {
  id: "2",
  company: "Example Inc.",
  status: "Active",
  notes: "This is a note about the job."
};

LinkIconfor of

Iterates over an object.

for (const [key, value] of Object.entries(data)) {
  console.log(key, value);
}

LinkIconfor in

Iterates only the keys of an object

for (const key in data) { 
  const value = data[key]; 
  console.log(key, value); 
}

LinkIconforEach()

Object.entries(data).forEach(([key, value]) => {
  console.log(key, value);
});

LinkIcongroupBy()

const users = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'user' },
  { name: 'Charlie', role: 'super-admin' },
  { name: 'Dave', role: 'user' },
  { name: 'Eve', role: 'guest' }
];
Object.groupBy(users, user => user.role)
{
  admin: [
    { name: 'Alice', role: 'admin' },
    { name: 'Charlie', role: 'admin' }
  ],
  user: [
    { name: 'Bob', role: 'user' },
    { name: 'Dave', role: 'user' }
  ],
  guest: [
    { name: 'Eve', role: 'guest' }
  ]
}

LinkIconRestrict Object Behavior ⛔️

In JavaScript, you can add properties and methods to an object at any time (extensible). How can we stop this?

LinkIconNonextensible Object

We can restrict adding properties and methods by using Object.preventExtensions(). But we can modify the existing properties and methods

let student = new Object();
student.name = "Rose";
 
Object.preventExtensions(student); // prevent adding
Object.isExtensible(student) // False
 
student.gpa = 3.2; // ADDING, ❌ Allowed
student.name = "Mark"; // MODIFYING, ✅ Allowed

LinkIconSeal Object

What if we don't want properties deleted as well? Seal the Object

let game = new Object();
game.name = "SuperTetris";
 
Object.seal(game); // prevent deleting 
Object.isSealed(game) // True
 
delete game.name; // ❌ Allowed

LinkIconFreeze Object

Strictest protection: No extensible, sealed, and data properties can not be modified

let school = new Object();
school.name = "UMCP";
school.city = "College Park";
 
Object.freeze(school); // no modifying, no deleting, no adding
 
school.name = "UMD"; // MODIFYING, ❌ Allowed (Generates error)
delete school.city; // DELETING, ❌ Allowed (Generates error)
school.mascot = "terp"; // ADDING, ❌ Allowed (Generates error)