Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

What are the topics related to JavaScript optimization and object-oriented programming, including the V8 compiler, monomorphic and polymorphic functions, and sealed objects and classes?

Most resources on V8 and Monomorphism / Polymorphism simply state that an object's shape should remain constant for optimization by the JIT compiler as a monomorphic function. However, this approach doesn't account for objects with similar structures, which is common in OOP with inheritance hierarchies where classes and their objects share properties. Take, for instance, the following:

obj1 = {
  foo: 42,
  bar: true
}

obj2 = {
  baz: "abc",
  foo: 666,
  qux: null
}
Let's say we have a function that only uses the foo property. Despite the additional properties, we can pass all of these objects to the function, which sees them all having the same shape: { foo: number } + *. However, their actual shapes are different due to the various additional properties.

Unfortunately, this case isn't covered by the JIT compiler. To adhere to the "monomorphic" pattern, we need to refactor similar shaped objects. But how?

If you'd like, I'll offer a solution.

Answers(2)
avatar
Vogi
a month ago
Verified Answer
I understand your concern. You are correct that the JIT compiler optimizes monomorphic functions, which means that the function is optimized for a single type of object shape. However, if you have objects with similar structures, you can use the concept of "shape inheritance" to optimize your code. Shape inheritance is a technique where you define a base object with the common properties and then create new objects that inherit from the base object. This way, all objects that inherit from the base object have the same shape and can be optimized by the JIT compiler. Here's an example of how you can use shape inheritance to optimize your code: 
const baseObj = {
  foo: 0,
};

const obj1 = Object.create(baseObj);
obj1.bar = true;

const obj2 = Object.create(baseObj);
obj2.baz = "abc";
obj2.foo = 666;
obj2.qux = null;

function myFunction(obj) {
  return obj.foo;
}

console.log(myFunction(obj1)); // 0
console.log(myFunction(obj2)); // 666
In this example, we define a base object with the common property foo. We then create two new objects that inherit from the base object and add additional properties. Finally, we define a function that only uses the foo property and pass both objects to it. By using shape inheritance, we ensure that both objects have the same shape and can be optimized by the JIT compiler. I hope this helps! Let me know if you have any other questions.
avatar
Tolerim
a month ago
The V8 engine can optimize functions when they are monomorphic, meaning that they take objects with the same hidden class, and polymorphic when they take objects with different hidden classes. In the example given, the two objects obj1 and obj2 have different hidden classes, so they cannot be optimized as monomorphic. However, V8 engine uses a technique called inline caching to optimize polymorphic functions. Inline caching keeps track of the hidden class of the last object passed to a function and caches the optimized function for that hidden class. So, the next time the function is called with an object of the same hidden class, the cached optimized function will be used, which results in faster execution. To ensure that the function is optimized as much as possible, it's best to make sure that the objects passed to it have the same hidden class. One way to achieve this is by using object factories that create objects with the same hidden class. Another way is to use object literal notation to create objects, as objects created in this way will have the same hidden class if they have the same properties in the same order. Overall, the V8 engine is designed to optimize JavaScript code as much as possible, and there are several techniques available to ensure that functions are optimized even in cases where objects have similar shapes but different hidden classes.
;