You Don't Know Objects in JavaScript

Objects form the backbone of JavaScript and are extensively used. So it is important that one must understand how objects work. In this blog i have discussed about various methods of creating an object, how object works in memory and some function associated with objects. Hope you have fun reading and learn something new.

1. Creating Objects

   There are several ways of creating an object in JavaScript and a good JavaScript developer must be aware of them and the caveats of each of them.

• Using Object Literals:

  Most of us may be familiar with the most common way of creating objects which is using object literals

const person = {
  name: 'John Doe',
  age: 30,
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

• Using Constructor Function:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log('Hello, ' + this.name);
  };
}
const john = new Person('John Doe', 30);

• Using ES6 Classes:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log('Hello, ' + this.name);
  }
}
const jane = new Person('Jane Doe', 25);

Despite their syntactical differences, all these methods underscore JavaScript's prototypal nature, influencing how objects are stored in memory and how they inherit and share properties. You can use these different methods of creation based on the level of control needed and the use case.

1. Memory Management

1. JavaScript uses a heap and a stack to manage memory.

   When you create objects in JavaScript, whether using object literals, constructor functions, or ES6 classes, memory is allocated on the heap to store the object's properties and methods.

   JavaScript variables do not hold the actual object values but rather references to the memory locations where objects are stored on the heap. So whenever a variable is used to hold the object it actually stores the object's location in the heap memory.

   Consider the following example:

const person1 = {
  name: 'John',
  age: 30
};

const person2 = person1; // person2 references the same memory location as person1
person2={
  name: 'Daniel',
  age: 28
}                        //changing the value of the object in memory.
console.log(person2);
console.log(person1);    //logs the updates value of person2.

As the variables store references to the memory locations where objects are stored, person1 and person2 points to the same location in the memory and editing its value in one variable will also reflect the changes in the other variable.

Note: Primitives in JavaScript are not stored in the Heap memory and thus it will not exhibit the same behavior.

1. Some Important Methods in Objects

Some important and most commonly used methods in javascript:

• Object.assign():

  Copies the values of all enumerable own properties from one or more source objects to a target object and returns the target object.

    const target = { a: 1 };
    const source = { b: 2 };
    Object.assign(target, source);  // { a: 1, b: 2 }
  

• Object.freeze():

  Freezes an object, preventing new properties from being added to it, existing properties from being removed, and preventing its properties or its prototype's properties from being changed.

    const obj = { a: 1 };
    Object.freeze(obj);
    obj.a = 2; // Won't have any effect in strict mode; otherwise, it throws an error.
    console.log(obj1); //logs the intial value of the object
  

• Object.seal():

  Prevents new properties from being added to an object and marks all existing properties as non-configurable.

    const obj = { a: 1 };
    Object.seal(obj);
    delete obj.a;  // Cannot delete when object is sealed.
  

• Object.keys() and Object.values():

  Object.keys() returns an array of an object's own enumerable property names while Object.values() returns an array of an object's own enumerable property values.

    const obj = { a: 1, b: 2, c: 3 };
    Object.keys(obj);  // ["a", "b", "c"]
  
    const obj = { a: 1, b: 2, c: 3 };
    Object.values(obj);  // [1, 2, 3]