If you're looking to get your JavaScript skills to the next level, you're in the right place. Let's jump right in! ๐
What are Data Structures? ๐ค
Data structures are like the different types of containers in a kitchen. Just like how you use a glass for liquids and a plate for sandwiches, in programming, different types of data are stored in different structures. These structures help in organizing and managing data efficiently. Think arrays, objects, stacks, and more!
What are Algorithms? ๐ค
Algorithms are like recipes. They are step-by-step instructions to perform a task or solve a problem. In programming, these are essential for data manipulation, calculations, and more.
Exploring Common Data Structures in JavaScript ๐
Let's take a look at some of the most common data structures used in JavaScript, with handy code examples.
Arrays: The All-Rounder
Arrays in JavaScript are like Swiss army knives - super versatile!
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // Outputs: apple
fruits.push("date");
console.log(fruits); // Outputs: ["apple", "banana", "cherry", "date"]
Objects: The Organizers
Objects help you store data in a key-value pair, making it easy to find what you need.
let car = {
make: "Toyota",
model: "Corolla",
year: 2021
};
console.log(car.model); // Outputs: Corolla
Stacks: The Last-In-First-Out (LIFO)
Stacks are like a stack of plates; the last one you put on top is the first one you take off.
class Stack {
constructor() {
this.items = [];
}
push(element) {
this.items.push(element);
}
pop() {
if (this.items.length === 0) return "Underflow";
return this.items.pop();
}
peek() {
return this.items[this.items.length - 1];
}
}
let stack = new Stack();
stack.push(10);
stack.push(20);
console.log(stack.peek()); // Outputs: 20
console.log(stack.pop()); // Outputs: 20
console.log(stack.peek()); // Outputs: 10
Queues: The First-In-First-Out (FIFO)
Queues are like a line at a store; the first person in line is the first to get served.
class Queue {
constructor() {
this.items = [];
}
enqueue(element) {
this.items.push(element);
}
dequeue() {
if (this.items.length === 0) return "Underflow";
return this.items.shift();
}
front() {
if (this.items.length === 0) return "No elements in Queue";
return this.items[0];
}
}
let queue = new Queue();
queue.enqueue(10);
queue.enqueue(20);
console.log(queue.front()); // Outputs: 10
console.log(queue.dequeue()); // Outputs: 10
console.log(queue.front()); // Outputs: 20
Linked Lists: The Flexible Connectors
Linked Lists consist of nodes where each node contains a value and a pointer to the next node in the list.
class Node {
constructor(element) {
this.element = element;
this.next = null;
}
}
class LinkedList {
constructor() {
this.head = null;
this.size = 0;
}
add(element) {
let node = new Node(element);
let current;
if (this.head === null) this.head = node;
else {
current = this.head;
while (current.next) {
current = current.next;
}
current.next = node;
}
this.size++;
}
}
let ll = new LinkedList();
ll.add(10);
ll.add(20);
console.log(ll); // Outputs the LinkedList with 10 and 20 as elements
Trees: The Hierarchical Organizers
Trees are non-linear data structures used for storing hierarchical data like folders in a computer.
class TreeNode {
constructor(data) {
this.data = data;
this.children = [];
}
addChild(child) {
this.children.push(new TreeNode(child));
}
}
let root = new TreeNode('root');
root.addChild('child1');
root.addChild('child2');
console.log(root); // Outputs the tree structure with root, child1, and child2
Exploring Common Algorithms in JavaScript ๐
Sorting: Getting Things in Order
Let's look at a basic sorting algorithm, the Bubble Sort. Imagine you have a line of balloons, each with a number on it, and you want to arrange them in order from smallest to largest.
function bubbleSort(arr) {
let len = arr.length;
for (let i = 0; i < len; i++) {
for (let j = 0; j < len - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
console.log(bubbleSort([3, 0, 2, 5, -1, 4, 1]));
// Outputs: [-1, 0, 1, 2, 3, 4, 5]
Searching: Finding the Needle in the Haystack
Let's say you've lost your key in a row of boxes and you need to find it. Linear search is like searching for this key. Here's how you implement a simple linear search.
function linearSearch(arr, x) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] === x) return i;
}
return -1;
}
console.log(linearSearch([2, 3, 4, 10, 40], 10)); // Outputs: 3
Binary Search: The Fast Seeker
Binary Search is like playing the 'hot and cold' game to find a number. It divides and conquers, cutting the search area in half each time.
function binarySearch(arr, x) {
let start = 0, end = arr.length - 1;
while (start <= end) {
let mid = Math.floor((start + end) / 2);
if (arr[mid] === x) return mid;
else if (arr[mid] < x) start = mid + 1;
else end = mid - 1;
}
return -1;
}
let arr = [1, 3, 5, 7, 8, 9];
console.log(binarySearch(arr, 5)); // Outputs: 2
Merge Sort: The Efficient Organizer
Merge Sort is like sorting your music playlist into the perfect order. It divides the list into halves, sorts each half, and then merges them back together.
function merge(left, right) {
let arr = [];
while (left.length && right.length) {
if (left[0] < right[0]) arr.push(left.shift());
else arr.push(right.shift());
}
return [...arr, ...left, ...right];
}
function mergeSort(arr) {
const half = arr.length / 2;
if (arr.length <= 1) return arr;
const left = arr.splice(0, half);
return merge(mergeSort(left), mergeSort(arr));
}
let arr = [4, 8, 7, 2, 11, 1, 3];
console.log(mergeSort(arr)); // Outputs: [1, 2, 3, 4, 7, 8, 11]
Quick Sort: The Speedy Separator
Quick Sort is like organizing a library, where you pick a book and put all smaller books to the left and bigger ones to the right, then repeat the process.
function quickSort(arr) {
if (arr.length <= 1) return arr;
let pivot = arr[arr.length - 1];
let left = [];
let right = [];
for (let i = 0; i < arr.length - 1; i++) {
if (arr[i] < pivot) left.push(arr[i]);
else right.push(arr[i]);
}
return [...quickSort(left), pivot, ...quickSort(right)];
}
let arr = [3, 0, 2, 5, -1, 4, 1];
console.log(quickSort(arr)); // Outputs: [-1, 0, 1, 2, 3, 4, 5]
Recursive Algorithms: The Loop Breakers
Recursion is a method where the solution to a problem depends on solutions to smaller instances of the same problem.
function factorial(x) {
if (x === 0) return 1;
return x * factorial(x - 1);
}
console.log(factorial(5)); // Outputs: 120
That's a wrap on our intro to data structures and algorithms in JavaScript! We've just scratched the surface, but you're well on your way.
Happy coding! ๐๐ฉโ๐ป๐จโ๐ป
Top comments (10)
i love the analogies you've used to explain these concepts, as a beginner i find it quite insightful!
Unlike structures in other languages, Javascript cannot limit the elements in an object in any way. This is especially bad because even const arrays can be extended:
You can prevent extension by freezing the object, but you will not get an error message.
The only way I know to ensure that certain properties are defined ist this:
I wish there were more detail. When would you use a structure? Where would you avoid its use? How are the structures more helpful than similar alternatives? Same for the algorithms.
Good stuff, itโs just missing a lot of detail.
Probably worth pointing out that binary search requires a sorted array.
There seems to be a problem with the algorithm implementation in the code.
Even excluding minor optimizations, merge sort includes empty left and right in the return, while quicksort employs unnecessary left and right.
Very informative and concise no brainer post
very good information
Great Explanation ๐
I just want to ask one question Doing DSA in JS is good decision?
nice
Some comments may only be visible to logged-in visitors. Sign in to view all comments.