Data Structures in Front-End Web Development
⇩
⇩
➊ Array
➋ Set
➌ Stack
➍ Queue
➎ Linked List
➏ Hash Table
➐ Tree
➑ Trie
➒ Graph
Finally, you should be able to decide on data structures for any UI use case.
➋ Set
➌ Stack
➍ Queue
➎ Linked List
➏ Hash Table
➐ Tree
➑ Trie
➒ Graph
Finally, you should be able to decide on data structures for any UI use case.
➊ 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
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 aware of
➀ Creating an Array
➁ Iterate through Array
➂ Find an Element
➃ Insert Element(s)
➄ Delete Element(s)
➅ Filter an Array
➆ Fetch a Sub-Array
➇ Merging Arrays
➀ 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
❯ A set is used to contain unique elements.
❯ The set's elements may or, may not be ordered.
⬘ Use Case(s)
➀ Items added to a shopping cart.
If you add an item already in your shopping cart, its quantity increases.
❯ A set is used to contain unique elements.
❯ The set's elements may or, may not be ordered.
⬘ Use Case(s)
➀ Items added to a shopping cart.
If you add an item already in your shopping cart, its quantity increases.
⬙ Operations you should be aware of
➀ Creating a Set
➁ Iterate through Set
➂ Get an Element
➃ Insert Element(s)
➄ Delete Element(s)
➅ Check the Existence of an Element
➆ Merging Sets
➀ Creating a Set
➁ Iterate through Set
➂ Get an Element
➃ Insert Element(s)
➄ Delete Element(s)
➅ Check the Existence of an Element
➆ Merging Sets
➌ Stack
A stack is a type of list where an element is entered 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
A stack is a type of list where an element is entered 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 aware of
➀ Creating a Stack
➁ Push Element to the Stack
➂ Pop an Element from the Stack
➃ Size of the Stack
➀ Creating a Stack
➁ Push Element to the Stack
➂ Pop an Element from the Stack
➃ Size of the Stack
➍ Queue
A queue is a list where an element is entered at one end and exited at the other end.
⬘ Use Case(s)
➀ A dynamically loaded news feed.
A new post appears at the bottom whereas the old post at the top gets offloaded while scrolling.
A queue is a list where an element is entered at one end and exited at the other end.
⬘ Use Case(s)
➀ A dynamically loaded news feed.
A new post appears at the bottom whereas the old post at the top gets offloaded while scrolling.
⬙ Operations you should be aware of
➀ Creating a Queue
➁ Insert an item into Queue
➂ Remove an item from Queue
➃ Size of the Queue
➀ Creating a Queue
➁ Insert an item into Queue
➂ Remove an item from Queue
➃ Size of the Queue
➎ Linked List
Linked Lists are linear type data structures but store each element in a non-contiguous manner.
✧ Linked Lists are better to use when elements are to be added/removed at one end.
✧ Stacks and, Queues are mostly implemented using Linked Lists.
Linked Lists are linear type data structures but store each element in a non-contiguous manner.
✧ Linked Lists are better to use when elements are to be added/removed at one end.
✧ Stacks and, Queues are mostly implemented using Linked Lists.
⬘ Use case(s)
➀ For a growing list where items are added very frequently either at the front or, rear end.
➁ Only specific elements are to be fetched. E.g., First Element or, Last Element.
➀ For a growing list where items are added very frequently either at the front or, rear end.
➁ Only specific elements are to be fetched. E.g., First Element or, Last Element.
⬙ Operations you should be aware of
➀ Creating a Linked List
➁ Iterate through Linked List
➂ Find an Element
➃ Insert Element(s)
➄ Delete Element(s)
➀ Creating a Linked List
➁ Iterate through Linked List
➂ Find an Element
➃ Insert Element(s)
➄ Delete Element(s)
➏ 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.
❍ 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 aware of
➀ Creating a Hash Table
➁ Inserting an Entry
➂ Deleting an Entry
➃ Getting Value for a Key
➀ Creating a Hash Table
➁ Inserting an Entry
➂ Deleting an Entry
➃ Getting Value for a Key
➐ Tree
A tree is a data structure where elements are stored in a hierarchical structure.
⬘ Use case(s)
➀ DOM (Document Object Model)
➁ Keeping data items sorted (binary search tree)
➂ Organisational Structure
A tree is a data structure where elements are stored in a hierarchical structure.
⬘ Use case(s)
➀ DOM (Document Object Model)
➁ Keeping data items sorted (binary search tree)
➂ Organisational Structure
⬙ Operations you should be aware of
➀ Creating a Tree
➁ Traversing through Tree
➂ Fetch subtree
➃ Fetch siblings
➄ Add an Element
➅ Remove an Element
➀ Creating a Tree
➁ Traversing through Tree
➂ Fetch subtree
➃ Fetch siblings
➄ Add an Element
➅ Remove an Element
➑ Trie
A Trie is a type of k-ary search tree used for locating specific keys from within a set. These keys are most often strings.
✧ In order to access a key, the trie is traversed depth-first.
⬘ Use case(s)
➀ Autocomplete
➁ Spell checkers
➂ Full-Text Search
A Trie is a type of k-ary search tree used for locating specific keys from within a set. These keys are most often strings.
✧ In order to access a key, the trie is traversed depth-first.
⬘ Use case(s)
➀ Autocomplete
➁ Spell checkers
➂ Full-Text Search
⬙ Operations you should be aware of
➀ Search for a value
➁ Inserting a (key, value) pair
➂ Deleting a (key, value) pair
➀ Search for a value
➁ Inserting a (key, value) pair
➂ Deleting a (key, value) pair
➒ Graph
A Graph consists of a finite set of vertices(or nodes) and a set of edges that connect a pair of nodes.
⬘ Use case(s)
➀ Connections in a Social Network
➁ Locations and Routes on a Map
A Graph consists of a finite set of vertices(or nodes) and a set of edges that connect a pair of nodes.
⬘ Use case(s)
➀ Connections in a Social Network
➁ Locations and Routes on a Map
⬙ Operations you should be aware of
➀ Breadth First Search
➁ Depth First Search
➂ Graph Cycle
➃ Minimum Spanning Tree
➄ Shortest Paths
➀ Breadth First Search
➁ Depth First Search
➂ Graph Cycle
➃ Minimum Spanning Tree
➄ Shortest Paths
🏁 Final Words
⬘ Like others, the front end also deals with data. It's important to connect a real-world use case with the most suitable data structure.
⬙ A perfect data structure will allow us to develop an effective, maintainable, and performant UI.
⬘ Like others, the front end also deals with data. It's important to connect a real-world use case with the most suitable data structure.
⬙ A perfect data structure will allow us to develop an effective, maintainable, and performant UI.
Hey 👋
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
❯ Tutorials
❯ Career Tips
❯ Interview Questions
❯ Roadmaps
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Do you find this content useful? Share your feedback 🗨️
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
❯ Tutorials
❯ Career Tips
❯ Interview Questions
❯ Roadmaps
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Do you find this content useful? Share your feedback 🗨️
Loading suggestions...