Matt Ryan

Posted on

# JavaScript Essentials: A Beginner's Guide to Data Structures and Algorithms

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;
}
}

constructor() {
this.size = 0;
}

let node = new Node(element);
let current;

else {
while (current.next) {
current = current.next;
}
current.next = node;
}
this.size++;
}
}

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 = [];
}

this.children.push(new TreeNode(child));
}
}

let root = new TreeNode('root');
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! 🚀👩‍💻👨‍💻

CedricLapi

i love the analogies you've used to explain these concepts, as a beginner i find it quite insightful!

Eckehard • Edited

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:

``````const car = {
make: "Toyota",
model: "Corolla",
year: 2021
};
car.color = "red"

Object.freeze(car);
car.fruit = "Bananna"

console.log(car) => {make: 'Toyota', model: 'Corolla', year: 2021, color: 'red'}
``````

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:

``````function setTemplate(target, template) {
Object.keys(template).forEach(key => target[key] = target[key] ?? template[key])
}

const car = {
make: "Toyota",
model: "Corolla",
year: 2021
};

const template = {
make: "-",
model: "-",
year: "-",
size: "-",
length: "-"
}

setTemplate(car, template)

console.log(car) => {make: 'Toyota', model: 'Corolla', year: 2021, size: '-', length: '-'}
``````

Mike Stemle

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.

Mike Talbot ⭐

Probably worth pointing out that binary search requires a sorted array.

Yeom suyun

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.

Just another React Dev

Very informative and concise no brainer post

codebrewlabsusa

very good information

Ganesh Patil

Great Explanation 🎉
I just want to ask one question Doing DSA in JS is good decision?

xi

nice