JavaScript Extending Built-in Classes

Built-in classes such as Array, Map, Set, and Error are regular classes under the hood, so you can extends them just like any class you write yourself. The subclass inherits every method of the parent and can add new methods, override behavior, or store extra state. This is a clean way to build a specialized collection (an array that knows how to sum itself, a map with default values) or a domain-specific error type — without touching the global prototype, which is the riskier alternative described in JavaScript: Native Prototypes.

This chapter covers the basic syntax, how built-in methods return instances of your subclass, how Symbol.species lets you control that, extending Error for custom error types, and the caveats worth knowing before you reach for this technique. If you are new to extends and super, read JavaScript: Class Inheritance first.

Syntax and Basic Example

The syntax is identical to extending any other class:

class CustomClass extends BuiltInClass {
  // New methods and properties to extend the built-in class
}

If your subclass defines a constructor, you must call super() before using this. This lets the parent class initialize its internal state and native structures correctly — for Array and Map, that internal state is what makes them work at all.

Let's extend the Array class with a method that sums all elements:

The instance behaves as a full array — indexing, length, iteration, and every Array method work — plus the sum() method you added.

⚠️ Note: When extending Array, be aware that the length property behaves specially in JavaScript. In some environments, length may not sync automatically with the array's actual size when using certain native methods. Test thoroughly or consider composition if precise length tracking is critical.

Built-in Methods Return Instances of Your Subclass

This is the part that makes extending Array genuinely powerful: methods like map, filter, and slice that return a new array return an instance of your subclass, not a plain Array. That means the new array still has your custom methods.

Internally, the engine decides which constructor to use through a special static getter named Symbol.species. By default Symbol.species returns the subclass itself, which is why filter above produced an ExtendedArray.

Controlling the Return Type with Symbol.species

Sometimes you want the opposite: methods like map and filter should return plain arrays, while new ExtendedArray(...) still gives you your subclass. Override Symbol.species to point back at the base class:

Now arr is a PowerArray with your isEmpty() method, but filter returns a plain Array that no longer carries that method. Use this when your subclass adds state in its constructor that derived arrays should not inherit. Symbol.species is also honored by Map, Set, ArrayBuffer, and Promise.

Enhancing the String Class

The String class is another fundamental built-in object that can be extended with additional string-manipulation helpers.

Adding a Reverse Function

⚠️ Note: Extending String is generally discouraged due to JavaScript's primitive-to-object coercion quirks, which can cause unexpected behavior with native methods. For string manipulation, prefer utility functions or composition over inheritance.

Customizing the Map Class

The Map class in JavaScript represents a collection of keyed data items, offering a more advanced and flexible means of data storage compared to objects. Extending the Map class allows us to introduce more specialized behaviors.

Implementing a Default Value

Extending Map to return a default value if the key does not exist. Note how the overriding get calls super.get(key) to reach the real Map lookup:

Extending the Error Class

A common, practical use of this feature is creating custom error types. Subclassing Error gives you a named error you can match with instanceof, while still being a real Error (so it carries a message, a stack, and works with try...catch).

Setting this.name is important — it controls how the error prints and lets you distinguish your error type from a generic one. For a deeper treatment, including how to build a hierarchy of error classes, see JavaScript: Custom Errors, Extending Error.

Best Practices and Considerations

While extending built-in classes opens a realm of possibilities, it's crucial to adhere to best practices to ensure code maintainability and compatibility.

• Avoid Overriding Existing Methods: Extending built-in classes by adding new methods is generally safe. However, overriding existing methods can lead to unpredictable behavior and compatibility issues.
• Use for Specific Needs: Extend built-in classes when there's a clear benefit or necessity. Avoid unnecessary extensions that could complicate your codebase.
• Prefer Composition or Utility Functions: In modern JavaScript, extending built-in classes is often unnecessary. Using helper functions or composition usually provides cleaner, more predictable results without modifying native subclass internals.
• Document Extensions Clearly: Ensure that any extensions to built-in classes are well-documented within your codebase to avoid confusion among other developers.

Static methods are inherited too

When you extends a built-in, the subclass also inherits the parent's static methods. So ExtendedArray.from(...) and ExtendedArray.isArray(...) are available, and static factory methods like Array.from produce instances of the subclass. This mirrors normal class inheritance — see JavaScript: Static Properties and Methods for how static members are inherited.

Conclusion

Extending built-in classes is a clean way to add focused behavior to native objects — a summing array, a defaulting map, a named error — without modifying global prototypes. The key idea to remember is that derived built-in methods return instances of your subclass by default, and Symbol.species is the lever for changing that. Reach for inheritance when a true "is-a" relationship exists; otherwise prefer plain utility functions or composition.

Practice