Objects

Question 1

What’s the difference between host objects and native objects?

Answer 1

Native objects
- are part of the JavaScript language defined by the ECMAScript specification, such as String, Math, RegExp, Object, Function, etc.

Host objects
- are provided by the runtime environment (browser or Node), such as window, XMLHTTPRequest, etc.

Question 2

Explain the difference between mutable and immutable objects.

Answer 2

Immutability is a core principle in functional programming, and has lots to offer to object-oriented programs as well.
Mutable object
An object whose state can be modified after it is created.

Immutable object
An object whose state cannot be modified after it is created.

Question 3

What is an example of an immutable object in JavaScript?

Answer 3

In JavaScript, some built-in types (numbers, strings) are immutable, but custom objects are generally mutable.

Some built-in immutable JavaScript objects are Math, Date.

Here are a few ways to add/simulate immutability on plain JavaScript objects.

Object Constant Properties

By combining writable: false and configurable: false, you can essentially create a constant (cannot be changed, redefined or deleted) as an object property, like:

let myObject = {};
Object.defineProperty(myObject, 'number', {
  value: 42,
  writable: false,
  configurable: false,
});
console.log(myObject.number); // 42
myObject.number = 43;
console.log(myObject.number); // 42

Prevent Extensions

If you want to prevent an object from having new properties added to it, but otherwise leave the rest of the object’s properties alone, call Object.preventExtensions(…):

var myObject = {
  a: 2,
};

Object.preventExtensions(myObject);

myObject.b = 3;
myObject.b; // undefined

In non-strict mode, the creation of b fails silently. In strict mode, it throws a TypeError.

var immutable = Object.freeze({});

Seal

Object.seal() creates a “sealed” object, which means it takes an existing object and essentially calls Object.preventExtensions() on it, but also marks all its existing properties as configurable: false.

So, not only can you not add any more properties, but you also cannot reconfigure or delete any existing properties (though you can still modify their values).

Freeze

Object.freeze() creates a frozen object, which means it takes an existing object and essentially calls Object.seal() on it, but it also marks all “data accessor” properties as writable:false, so that their values cannot be changed.

This approach is the highest level of immutability that you can attain for an object itself, as it prevents any changes to the object or to any of its direct properties (though, as mentioned above, the contents of any referenced other objects are unaffected).

var immutable = Object.freeze({});

Freezing an object does not allow new properties to be added to an object and prevents from removing or altering the existing properties. Object.freeze() preserves the enumerability, configurability, writability and the prototype of the object. It returns the passed object and does not create a frozen copy.

Question 4

What are the pros and cons of immutability?

Answer 4

Pros

• Easier change detection: Object equality can be determined in a performant and easy manner through referential equality. This is useful for comparing object differences in React and Redux.
• Programs with immutable objects are less complicated to think about, since you don’t need to worry about how an object may evolve over time.
• Defensive copies are no longer necessary when immutable objects are returning from or passed to functions, since there is no possibility an immutable object will be modified by it.
• Easy sharing via references: One copy of an object is just as good as another, so you can cache objects or reuse the same object multiple times.
• Thread-safe: Immutable objects can be safely used between threads in a multi-threaded environment since there is no risk of them being modified in other concurrently running threads.
• Using libraries like ImmutableJS, objects are modified using structural sharing and less memory is needed for having multiple objects with similar structures.

Cons

• Naive implementations of immutable data structures and its operations can result in extremely poor performance because new objects are created each time. It is recommended to use libraries for efficient immutable data structures and operations that leverage on structural sharing.
• Allocation (and deallocation) of many small objects rather than modifying existing ones can cause a performance impact. The complexity of either the allocator or the garbage collector usually depends on the number of objects on the heap.
• Cyclic data structures such as graphs are difficult to build. If you have two objects which can’t be modified after initialization, how can you get them to point to each other?

Question 5

How can you achieve immutability in your own code?

Answer 5

One way to achieve immutability is to use libraries like immutable.js, mori or immer.

The alternative is to use const declarations combined with the techniques mentioned above for creation. For “mutating” objects, use the spread operator, Object.assign, Array.concat(), etc., to create new objects instead of mutate the original object.