Object

23 Nov 2023 . javascript .


host object Vs native object

  • Native objects are objects that are part of the JavaScript language defined, such as String,  Math,  RegExp,  Object,  Function, etc.
  • Host objects are provided by the runtime environment (browser or Node), such as window, XMLHTTPRequest, etc.

extend built-in JS object

Extending a built-in/native JavaScript object means adding properties/functions to its prototype. Imagine your code uses a few libraries that both extend the Array.prototype by adding the same contains method, the implementations will overwrite each other and your code will break if the behavior of these two methods is not the same.

immutable object

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.

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

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.

Advantages

  • 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.
  • 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.

Disandvantages

  • 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?

destruct an object or an array

Array

// Variable assignment.
const foo = ['one', 'two', 'three'];

const [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

// Swapping variables
let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

Object

// Variable assignment.
const o = {p: 42, q: true};
const {p, q} = o;

console.log(p); // 42
console.log(q); // true