Data Structures every Web Developer should know

Data structures are

Array
Set
Stack
Queue
Hash Table
Tree
Graph

We will be discussing about

Definition of a Data Structure
Use Case(s) for a Data Structure
Operations you should be knowing

Array

An array is a collection of similar data elements stored at contiguous memory locations.

Use Case(s)

Data values displayed in a Table
Items displayed in a List
Options in a Select field

Operations you should be knowing

Creating an Array
Iterate through Array
Find an Element
Insert Element(s)
Delete Element(s)
Filter an Array
Fetch a Sub-Array
Merging Arrays

Set

Set is used to contain unique elements.
Set's elements may or, may not be ordered.

Use Case(s)

Items added to a Shopping Cart.
If you add an item which is already in your shopping cart, its quantity gets increased.

Operations you should be knowing

Creating a Set
Iterate through Set
Get an Element
Insert Element(s)
Delete Element(s)
Check Existence of an Element
Merging Sets

Stack

Stack is a type of list where an element is entered to and exited from one end only.

Use Case(s)

Image Carousel.
Images in a Carousel are mostly in Stacks.
The last image is always displayed on top and, on swipe, the last but one comes to the top

Operations you should be knowing

Creating a Stack
Push Element to the Stack
Pop an Element from the Stack
Size of the Stack

Queue

Queue is a type of list where an element is entered at one side and exited at the other side.

Use Case(s)

A dynamically loading news feed.
New post appears at the bottom where as while scrolling old post at the top gets offloaded.

Operations you should be knowing

Creating a Queue
Insert an item to Queue
Remove an item from Queue
Size of the Queue

Hash Table

It is a container of Key-Value pairs.
It is also known as Map, Dictionary.

Use Case(s)

Storing different fields of values for a single Entity.
E.g., Name, Address and other details of a User

User's preferences.
E.g., Theme, Color, Font etc.

Operations you should be knowing

Creating a Hash Table
Inserting an Entry
Deleting an Entry
Getting Value for a Key
Checking if a Key exists

Tree

Tree is a data structure where elements are stored in a hierarchical structure.

Use case(s)

DOM (Document Object Model)
Organizational Structure

Operations you should be knowing

Creating a Tree
Traversing through Tree
Fetch sub tree
Fetch siblings
Add an Element
Remove an Element

Graph

A Graph consists of a finite set of vertices(or nodes) and set of Edges which connect a pair of nodes.

Use case(s)

Connections in a Social Network
Locations and Routes in a Map

Operations you should be knowing

Breadth First Search
Depth First Search
Graph Cycle
Minimum Spanning Tree
Shortest Paths

As a web developer, HTML, CSS and JavaScript are must skills.

To successfully model real use cases to a UI, a web developer should know about various data structures.