Extending JavaScript Arrays: A Journey from ES5 to ES6

JavaScript arrays are incredibly versatile, but sometimes you need to extend their functionality to suit specific needs. In this blog, we’ll explore how to create a custom array class with additional methods using both ES6 class syntax and pre-ES6 prototype-based inheritance.

The Goal

We aim to create a custom array class, MyArray, that inherits from the native Array class and includes two additional methods:

1. add(element): Appends a single element to the array.
2. addAll(elements): Appends multiple elements from another array.

ES6 Class Syntax

ES6 introduced the class syntax, making it easier to create and extend classes. Here's how we can achieve our goal using ES6:

class MyArray extends Array {
    constructor(...args) {
        super(...args);
    }

    add(element) {
        this.push(element);
    }

    addAll(elements) {
        elements.forEach(element => this.push(element));
    }
}

// Test Cases
var collection = new MyArray(1, 2, 3, 4);

console.log(collection instanceof Array); // true
console.log(collection instanceof MyArray); // true

console.log(collection); // [1, 2, 3, 4]
console.log(collection.length); // 4
collection.add("hello");
console.log(collection[4]); // "hello"
console.log(collection.length); // 5

collection.push("world");
console.log(collection.length); // 6
console.log(collection[5]); // "world"

collection.addAll(["java", "script"]);

console.log(collection.length); // 8
console.log(collection); // [1, 2, 3, 4, "hello", "world", "java", "script"]
collection[8] = "last";
console.log(collection.length); // 9
console.log(collection.pop()); // "last"
console.log(collection.length); // 8

console.log(Array.prototype.addAll); // undefined

In this implementation, MyArray extends the native Array class. The add method appends a single element, while the addAll method appends multiple elements from another array. The test cases demonstrate that MyArray behaves as expected, inheriting all properties and methods of the native Array class while adding the custom methods.

Pre-ES6 Prototype-Based Inheritance

Before ES6, JavaScript relied on prototype-based inheritance. Here’s how we can achieve the same functionality using this approach:

function MyArray() {
    var arr = Array.apply(null, arguments);
    Object.setPrototypeOf(arr, MyArray.prototype);
    return arr;
}

MyArray.prototype = Object.create(Array.prototype);
MyArray.prototype.constructor = MyArray;

MyArray.prototype.add = function(element) {
    this.push(element);
};

MyArray.prototype.addAll = function(elements) {
    for (var i = 0; i < elements.length; i++) {
        this.push(elements[i]);
    }
};

// Test Cases
var collection = new MyArray(1, 2, 3, 4);

console.log(collection instanceof Array); // true
console.log(collection instanceof MyArray); // true

console.log(collection); // [1, 2, 3, 4]
console.log(collection.length); // 4
collection.add("hello");
console.log(collection[4]); // "hello"
console.log(collection.length); // 5

collection.push("world");
console.log(collection.length); // 6
console.log(collection[5]); // "world"

collection.addAll(["java", "script"]);

console.log(collection.length); // 8
console.log(collection); // [1, 2, 3, 4, "hello", "world", "java", "script"]
collection[8] = "last";
console.log(collection.length); // 9
console.log(collection.pop()); // "last"
console.log(collection.length); // 8

console.log(Array.prototype.addAll); // undefined

In this implementation, MyArray is a constructor function that creates an array using Array.apply and sets its prototype to MyArray.prototype. The add and addAll methods are added to MyArray.prototype, allowing instances of MyArray to use these methods. The test cases demonstrate that MyArray behaves as expected, similar to the ES6 class-based implementation.

Conclusion

Both ES6 class syntax and pre-ES6 prototype-based inheritance allow us to extend the functionality of native JavaScript arrays. While ES6 provides a more intuitive and cleaner syntax, understanding prototype-based inheritance is crucial for working with legacy code and gaining a deeper understanding of JavaScript’s inheritance model. Happy coding!

Originally published at http://bigfatsoftwareinc.wordpress.com on February 8, 2025.