DEV Community

Leslie Gyamfi
Leslie Gyamfi

Posted on • Updated on

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 know

-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.

Top comments (5)

Collapse
 
sarveshprajapati profile image
Sarvesh Prajapati

great content man

Collapse
 
kwamedev profile image
Leslie Gyamfi

thanks Sarvy

Collapse
 
mfaisalkhatri profile image
Mohammad Faisal Khatri

Crisp and to the point!! Awesome post!

Collapse
 
kwamedev profile image
Leslie Gyamfi

Thanks Faisal

Collapse
 
fayomihorace profile image
Horace FAYOMI

Nice article, thanks.
For the shopping card example you gave for set, I think a hashmap table or dictionnary should be better for that particular ase, the key is the shopping cart name or id and the value is the count of items. { 'item1': 6, 'item2': 2, ...},

Or could you give me a example of how you would have used Set to handle it ?