Why Use Linked Lists in JavaScript? A Practical Guide to Efficient Data Structures

Linked lists are a non‑contiguous storage structure where each element points to the next, while sequential (array) storage keeps elements in consecutive memory locations. In JavaScript, most developers focus on logical data structures, but linked lists can improve performance for high‑frequency insertions and deletions, especially in H5 games.

Illustrated Linked List

The article first shows a simple singly linked list with diagrams (images omitted for brevity). It demonstrates inserting a node, inserting a sub‑list, and removing a slice, highlighting that insertion and deletion operations can achieve O(1) time complexity compared to O(n) for array methods such as unshift, shift, and splice.

Implementing a Doubly Linked List

To overcome the limitations of a singly linked list, a doubly linked list is introduced. Each node stores both prev and next pointers, and the list maintains HEAD , TAIL , and a cursor POINTER . Insertion and deletion complexities become O(1) for pointer updates.

Node pointers: predecessor and successor

List pointers: head, tail, and cursor

Node creation (anonymous object) can be expressed in JavaScript as:

function generateNode(data) {
    return {
        data: data, // data field
        next: null, // next pointer
        prev: null  // previous pointer
    };
}

Variables HEAD, TAIL, POINTER and length represent the head pointer, tail pointer, cursor, and list length respectively. A doubly linked list of five elements can be built with the following code:

let HEAD, TAIL, POINTER, length = 0;
[0,1,2,3,4].forEach((data, index, arr) => {
    let node = generateNode(data);
    if (index === 0) {
        HEAD = node;
    } else {
        [node.prev, POINTER.next] = [POINTER, node];
        index === arr.length - 1 && (TAIL = node);
    }
    POINTER = node;
    ++length;
});
POINTER = HEAD; // reset cursor to head

The entire structure can be implemented in roughly twenty lines of code.

Custom APIs

To make the linked list as convenient as JavaScript arrays, a set of array‑like methods is defined. The API list includes:

Standard array methods: shift, unshift, pop, push, slice, splice, concat, reverse, sort, indexOf, and the length property.

Pointer utilities: at (positioning), prev, next, curr (current node).

Node accessors: first (head), last (tail), remove, clone.

Insertion helpers: insertAfter, insertBefore, insertChainAfter, insertChainBefore.

List properties and setters: HEAD, TAIL, setHead, setTail, POINTER, setPointer.

Four specialized insert* methods are added to emphasize the linked‑list nature. Their implementations are available in the GitHub repository:

https://github.com/leeenx/es6-utils/blob/master/modules/Chain_v2.js

Circular Linked List

Previously, a circular list was simulated with an array by repeatedly moving the first element to the end:

Array.prototype.next = function() {
    var cur = this[0];
    this.push(this.shift());
    return cur;
};
var arr = [1,2,3,4,5];
var count = 0;
while (count++ < 20) {
    console.log(arr.next());
}

With the Chain class, the same behavior becomes cleaner:

let circle = new Chain([1,2,3,4,5]);
// make it circular
circle.TAIL.next = circle.HEAD;
for (let i = 0; i < 20; i++) {
    console.log(circle.next());
}

Conclusion

The author notes that a Chain class can boost performance when dealing with long linear structures that require frequent insertions or deletions, because those operations run in O(1) time. For short lists (fewer than about 200 elements), native JavaScript arrays remain faster due to V8 optimizations.

The full implementation of the Chain class is hosted at:

https://github.com/leeenx/es6-utils/blob/master/modules/Chain_v2.js

All opinions expressed are personal and may evolve with further discussion.