DEV Community

Cover image for JavaScript Essentials: A Beginner's Guide to Data Structures and Algorithms
Matt Ryan
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"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 (12)

Collapse
 
cedriclapi profile image
CedricLapi

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

Collapse
 
efpage profile image
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'}
Enter fullscreen mode Exit fullscreen mode

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: '-'}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
manchicken profile image
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.

Collapse
 
miketalbot profile image
Mike Talbot ⭐

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

Collapse
 
artxe2 profile image
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.

Collapse
 
just_another_react_dev profile image
Just another React Dev

Very informative and concise no brainer post

Collapse
 
codebrewlabsusa profile image
codebrewlabsusa

very good information

Collapse
 
devgancode profile image
Ganesh Patil

Great Explanation πŸŽ‰
I just want to ask one question Doing DSA in JS is good decision?

Collapse
 
xi profile image
xi

nice

Some comments may only be visible to logged-in visitors. Sign in to view all comments.