Basic Data Structures for a Beginner Web Developer | by Kacper Hernacki

Data structures for a beginner web developer

Every programming newbie hears from more experienced developers that the fundamentals of coding are:

  • data structures,
  • Algorithms

There are even unlimited memes on the internet about it, how very unattractive these basics are. Every newbie dreams of building a million dollar solution or app, but… First, let’s dive into “Why Fundamentals Are So Important”

Developers in 2021

Data structures are not difficult

It sounds ridiculous, but basic knowledge of data structures is pretty easy. It doesn’t require practicing hundreds of hours to create amazing apps. From my point of view, when I started coding at university, learning C and C++, it was a horror. I hated opening an IDE and implementing new solutions, which made absolutely no sense.

After graduating, I encountered web development, this branch of technology really opened my eyes. I saw the coding is not super complicated, with basic free tutorial, it is easy to code the first app even complicated like social media platform. However, thanks to boring lectures in college, I knew the basics and it was easier to boost my developer career. By basics, I mean data structures.

What are Data Structures

Data is practically the most powerful tool for companies, organizations or even countries. Without effective collection of data and without exploitation of these, there is no programming.

Imagine creating a program that doesn’t store any data, usually impossible. This is one of the main reasons to master the basics of data structures.

Simply put, data structure is a set of data (values), the relationships between them, and the operations (functions) that can be applied to the data.

Today, data is probably the most powerful tool

Basic examples

To start creating useful applications, you generally need to know the examples presented below:

image source:

Simply put, array is a special variable, which can store multiple values:

const apps = ["Instagram", "Facebook", "Twitter"];

It would be extremely inefficient to store multiple items in different variables, as shown below:

let app1 = "Instagram";
let app2 = "Facebook";
let app3 = "Twitter";

Imagine using hundreds of variables, that would be just impossible and very boring.

When I want to access the specific value, it is possible using the syntax shown below:

let myfavouriteApp = apps[0];console.log(myFavouriteApp);
// there will be printed - "Instagram"

Remember that in arrays, the very first element has an index of 0.

Image source:

Objects are very important in web development, it is practically impossible to create a clean and useful platform without them. The simplest explanation of an object is as follows:

The bicycle as an object

In real life, the bicycle can be described as an object.

The bike can have properties such as: weight, color, model and methods such as start, stop.

All bikes have the same properties, but the values ​​are different, depending on a concrete model and type.

const bike = {type:"Peugeot", model:"500", color:"silver", weight: 10};

The above example shows how to define a bike object in javascript.

Accessing a concrete property of an object is very simple and intuitive, if there is a printing need, for example a type of bicycle object, it is done in the way shown below.

const typeOfBike = bike.type;console.log(typeOfBike);
// there will be printed - "Peugeot"

Simply, a queue is a list, but it processes items in the order they were entered. Queues can be thought of as a FIFO (First In, First Out) version of Stacks.

For a good visualization, consider queues as a single one-way tunnel: the first car in is the first car out. There is no other way.

Linked lists do not use the physical placement of data in memory. In arrays, indexes or positions are used. Linked lists are based on the referencing system, items are stored in different nodes which point to the next node, that’s how it is linked.

Trees and graphs are less common in development, especially for beginners. However, it should be mentioned that these data structures are available for use.

Image source:

Easily said, trees are also relationship-based, but represent hierarchical structures. In the linked lists, it could be taken, that it was based on nodes. Trees have the root node from which the branch nodes are “connected”. They are also called parent nodes, if the following child nodes are attached to them.

Trees can have several levels, this can be determined as a depth. If the tree is very complex, subtrees can be added.

The entire structure is shown in an image above.

Graphs are relationship-based data structures that are extremely useful for storing web-like relationships.

Image source:

A graph is a nonlinear data structure, composed of nodes and edges. Graphs can be: infinite, trivial, simple, multiple and many others.

Hash tables are a kind of data structure that helps to create a list of matched values. The retrieval of a concrete value is possible by using the key of this value.

Hash tables turn the key into an integer index using hash functions and the index will indicate where to store the key/value pair in a memory.

Image source:


Knowledge of data structures is crucial in web development, especially arrays and objects. Without these two elements, it is impossible to create basic and functional applications. Familiarizing yourself with all the resting positions in this article will help improve even simple but complex rigs. Sometimes it can be more efficient to use linked lists, trees, charts instead of arrays and objects.

Hashtables are super important, even crucial, to know before learning blockchain, which is a great prospect in the next few years of development.

For all beginners, it is strongly recommended to learn and use arrays and objects in different conditions, master them at a very high level and after developing complex applications, try to implement more advanced structures .