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.

Comments

[Sarvesh Prajapati]

great content man

[Leslie Gyamfi]

thanks Sarvy

[Mohammad Faisal Khatri]

Crisp and to the point!! Awesome post!

[Leslie Gyamfi]

Thanks Faisal

[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 ?