Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Types of Linked List in Javascript
A linked list is a dynamic data structure where elements (nodes) are connected through pointers rather than stored in contiguous memory locations. Unlike arrays, linked lists allow efficient insertion and deletion without memory waste, as memory is allocated as needed.
JavaScript supports three main types of linked lists:
- Singly Linked List ? Navigation is forward-only through next pointers
- Doubly Linked List ? Bidirectional navigation with both next and previous pointers
- Circular Linked List ? The last node connects back to the first node, forming a loop
Singly Linked List
A singly linked list contains nodes with data and a pointer to the next node. The last node points to null, indicating the end of the list.
<!DOCTYPE html>
<html>
<head>
<title>Singly Linked List</title>
</head>
<body>
<script>
class Node {
constructor(data) {
this.element = data;
this.next = null;
}
}
class LinkedList {
constructor() {
this.head = null;
this.size = 0;
}
add(element) {
let node = new Node(element);
if (this.head == null) {
this.head = node;
} else {
let temp = this.head;
while (temp.next) {
temp = temp.next;
}
temp.next = node;
}
this.size++;
}
insertAt(element, index) {
if (index < 0 || index > this.size) {
document.write("Invalid index<br>");
return;
}
let node = new Node(element);
if (index == 0) {
node.next = this.head;
this.head = node;
} else {
let curr = this.head;
for (let i = 0; i < index - 1; i++) {
curr = curr.next;
}
node.next = curr.next;
curr.next = node;
}
this.size++;
}
removeFrom(index) {
if (index < 0 || index >= this.size) {
document.write("Invalid index<br>");
return null;
}
let curr = this.head;
if (index === 0) {
this.head = curr.next;
} else {
let prev = null;
for (let i = 0; i < index; i++) {
prev = curr;
curr = curr.next;
}
prev.next = curr.next;
}
this.size--;
return curr.element;
}
displayList() {
let curr = this.head;
let result = [];
while (curr) {
result.push(curr.element);
curr = curr.next;
}
document.write("Singly Linked List: " + result.join(" ? ") + "<br>");
}
}
// Example usage
let ll = new LinkedList();
ll.add(10);
ll.add(20);
ll.add(30);
ll.insertAt(15, 1);
ll.displayList();
document.write("Size: " + ll.size + "<br>");
</script>
</body>
</html>
Singly Linked List: 10 ? 15 ? 20 ? 30 Size: 4
Doubly Linked List
A doubly linked list allows bidirectional traversal by maintaining both next and previous pointers in each node. This enables efficient insertion and deletion from both ends.
<!DOCTYPE html>
<html>
<head>
<title>Doubly Linked List</title>
</head>
<body>
<script>
class DoublyNode {
constructor(value) {
this.value = value;
this.next = null;
this.previous = null;
}
}
class DoublyLinkedList {
constructor() {
this.head = null;
this.tail = null;
this.size = 0;
}
insert(value) {
let newNode = new DoublyNode(value);
if (!this.head) {
this.head = this.tail = newNode;
} else {
this.tail.next = newNode;
newNode.previous = this.tail;
this.tail = newNode;
}
this.size++;
return newNode;
}
insertHead(value) {
let newNode = new DoublyNode(value);
if (!this.head) {
this.head = this.tail = newNode;
} else {
newNode.next = this.head;
this.head.previous = newNode;
this.head = newNode;
}
this.size++;
return newNode;
}
remove() {
if (!this.tail) return undefined;
let removedTail = this.tail;
if (this.head === this.tail) {
this.head = this.tail = null;
} else {
this.tail = this.tail.previous;
this.tail.next = null;
}
this.size--;
return removedTail.value;
}
displayForward() {
let current = this.head;
let result = [];
while (current) {
result.push(current.value);
current = current.next;
}
document.write("Forward: " + result.join(" ? ") + "<br>");
}
displayBackward() {
let current = this.tail;
let result = [];
while (current) {
result.push(current.value);
current = current.previous;
}
document.write("Backward: " + result.join(" ? ") + "<br>");
}
}
// Example usage
let dll = new DoublyLinkedList();
dll.insert(10);
dll.insert(20);
dll.insert(30);
dll.insertHead(5);
dll.displayForward();
dll.displayBackward();
document.write("Size: " + dll.size + "<br>");
</script>
</body>
</html>
Forward: 5 ? 10 ? 20 ? 30 Backward: 30 ? 20 ? 10 ? 5 Size: 4
Circular Linked List
In a circular linked list, the last node points back to the first node instead of null, creating a circular structure. This can be implemented as either singly or doubly circular.
<!DOCTYPE html>
<html>
<head>
<title>Circular Linked List</title>
</head>
<body>
<script>
class CircularNode {
constructor(data) {
this.data = data;
this.next = null;
}
}
class CircularLinkedList {
constructor() {
this.head = null;
this.size = 0;
}
add(data) {
let newNode = new CircularNode(data);
if (!this.head) {
this.head = newNode;
newNode.next = this.head; // Points to itself
} else {
let current = this.head;
while (current.next !== this.head) {
current = current.next;
}
current.next = newNode;
newNode.next = this.head;
}
this.size++;
}
display() {
if (!this.head) {
document.write("List is empty<br>");
return;
}
let result = [];
let current = this.head;
do {
result.push(current.data);
current = current.next;
} while (current !== this.head);
document.write("Circular List: " + result.join(" ? ") + " ? (back to " + this.head.data + ")<br>");
}
remove(data) {
if (!this.head) return false;
let current = this.head;
let prev = null;
do {
if (current.data === data) {
if (prev) {
prev.next = current.next;
if (current === this.head) {
this.head = current.next;
}
} else {
// Find the last node to update its next pointer
let last = this.head;
while (last.next !== this.head) {
last = last.next;
}
if (this.head === this.head.next) {
this.head = null;
} else {
this.head = current.next;
last.next = this.head;
}
}
this.size--;
return true;
}
prev = current;
current = current.next;
} while (current !== this.head);
return false;
}
}
// Example usage
let cll = new CircularLinkedList();
cll.add(10);
cll.add(20);
cll.add(30);
cll.add(40);
cll.display();
cll.remove(20);
cll.display();
document.write("Size: " + cll.size + "<br>");
</script>
</body>
</html>
Circular List: 10 ? 20 ? 30 ? 40 ? (back to 10) Circular List: 10 ? 30 ? 40 ? (back to 10) Size: 3
Comparison of Linked List Types
| Type | Navigation | Memory per Node | Use Cases |
|---|---|---|---|
| Singly Linked | Forward only | 1 pointer (next) | Simple lists, stacks |
| Doubly Linked | Bidirectional | 2 pointers (next, prev) | Browser history, undo operations |
| Circular Linked | Continuous loop | 1-2 pointers | Round-robin scheduling, music playlists |
Conclusion
Linked lists provide dynamic memory allocation and efficient insertion/deletion operations. Choose singly linked lists for simple forward traversal, doubly linked lists for bidirectional navigation, and circular linked lists for continuous loop requirements. Each type serves specific use cases in data structure implementation.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements