DEV Community: vidhi-thakur

Frontend Concepts

vidhi-thakur — Wed, 03 Dec 2025 14:15:38 +0000

Moving towards strong frontend specialization. Here I will add short blogs on the topics that are needed for a senior frontend developer.

What Happens When You Add Arrays or Objects in JS? 🤯

vidhi-thakur — Sun, 06 Jul 2025 11:41:14 +0000

When we generally talk about the + operator, the tricky problem we think about is: Why does 1 + 2 + "3" result in "33" whereas "1" + 2 + 3 = "123"?

But do we ever stop and think — can we add arrays with numbers? 🤯

Sounds silly, but what really happens when JavaScript encounters such an expression?

It all depends on how JavaScript parses code. You see, when you write [] + 1, you don’t get an error. Instead, you get the result "1". Let’s understand how and why this happens.

When JavaScript encounters a non-primitive value in an expression, it tries to convert it to a primitive using its internal ToPrimitive algorithm. First, it calls .valueOf(), and if that doesn't return a primitive, it uses .toString(), which for an empty array, gives "". So effectively [] + 1 becomes "" + 1, which gives the string "1"due to string concatenation.

But that’s not all. Get this, ({}).toString() returns "[object Object]", so when you add [] + {}, the result is "[object Object]". BUT 😏 when you do {} + [], you get…

… a big fat 0.

Why? Again, it’s all about how JS parses code. In this case, JavaScript sees {} as an empty code block, not an object. So it interprets +[] as a unary plus operation, which coerces the empty array into 0. Want the original result? Wrap it in parentheses ({} + []) = "[object Object]".

I’ll be sharing a follow-up post soon with more mind-bending JavaScript edge cases.

How did you find this one? Helpful, confusing, or just plain wild? Drop your thoughts in the comments 👇

Read this blog before you start your data structure and algorithm journey!!!

vidhi-thakur — Wed, 02 Apr 2025 14:24:19 +0000

vidhi-thakur

Jan 29 '25

Intrduction to DSA

#javascript #datastructures #webdev #programming

Comments

4 min read

Graph is fun, check this blog to find out how

vidhi-thakur — Wed, 29 Jan 2025 10:28:45 +0000

Get a gist of graph data structure here...

vidhi-thakur ・ Dec 10 '24

#datastructures #javascript #graph #programming

Intrduction to DSA

vidhi-thakur — Wed, 29 Jan 2025 10:24:29 +0000

In this blog we will discuss the most basic unit of information that we need to understand to start data structures and algorithms.

Most frontend developers like myself often question the need to do DSA when not much of DSA is required in our development usually. But sometimes it does makes a difference. Every point for performance improvement is critical if you don't want users to close the tab because your website is too slow. Understanding of time complexity and efficient algorithms helps you write better (more optimized) code which helps with scalability.

In this blog we will understand: -

What are data structures?
What is time complexity?
What is space complexity? and
How do we simplify complexity analysis?

Let's start...

What are data structures?

Data structures can be defined by 3 parameters: -

it is a collection of data,
the data items has a relationship or a linking factor, and
we can perform functions or operations on the data.

For an example we can analyze an array arr = [12, 54, 86, 3, 94] based on our parameters.

collection of data (✔️)
a relationship or a linking factor {each array element has a unique index} (✔️)
can perform functions or operations on the data {ex: arr.push(7)}(✔️)

Therefore, an array is a valid data structure.

What is a time complexity?

Time complexity is the relationship between input and operations performed in an algorithm.

input ↑ operations ↑

Time complexity is not calculated in seconds because of two factors: -

on different computers, the time taken for an algorithm can differ because of the difference in the hardware,
on the same computer, it is also not certain that the time taken by an algorithm (with same input) is same all the time. (not convinced for this point myself - if someone could point out the logic in the comments that would be great).

Therefore, because of the above-mentioned points, the time complexity is not calculated by time taken in seconds but rather by a factor that remains across all the hardware. That common factor is number of operations.

Regardless of the hardware, the number of operations would be same for an algorithm if the provided input is the same.

Let's understand time complexity with an example too.

Example: We need to get the sum of N numbers. Now, we can solve this task with 2 approaches.

Approach 1: we solve this with the formula (N * (N-1))/2

Approach 2: we get the sum by, sum = (N-1) + (N-2) + ... + 1

For approach 1: -
This approach has 3 operations.

If N = 3: number of operations = 3
If N = 300: number of operations = 3

This means, if value of N increases, the number of operations remains the same. Time complexity of this approach is constant.

For approach 2: -
This approach has (N-1) + (N-2) operations.

(N-1) = operations to get (N-1) numbers before N, and
(N-2) because addition operation happens (N-2) times after getting all the numbers

So, this approach requires 2N - 3 operations total.

The number of operations will increase as the value of N increases

To represent time complexity, we use Big O notation. For approach 1, since the time complexity remains constant regardless of the input value, the time complexity is O(1) which is called as order of 1. And for approach 2, the number of operation increases linearly as the input value increases, so the time complexity is O(2N-3).

Some common time complexities: -

O(1): constant,
O(N): linear - algorithm has to traverse array of inputs or write a loop once,
O(logN): binary search algorithm,
O(NlogN): merge sort algorithm,
O(N^2), O(N^3), etc: case of nested loops. 2 loops, complexity O(N^2) and so on...
O(2^N): fibonacci,
O(N!)

Simplify complexity analysis (Big O): -

Drop the constants. Ex: N^2 + 3
Drop insignificant terms. Ex: N^3 + N

The reason for above mentioned suggestion is that when N has a big value say N=10000, 3 operations or N operations would not add much significance to N^2 or N^3 operations.

Do not drop another input M. Ex: O(N^3 + M + 2) can be simplified as O(N^3 + M) > The reason for above mentioned suggestion is because inputs can be provided such that M has a significant value say 10,000 whereas N = 1.

Based on above explanation, the time complexity for approach 2 can be simplified to O(N).

What is space complexity?

Space complexity is the relationship between input and auxiliary space required by an algorithm.

For space complexity, we do not consider the space that is required by the input and only consider extra space required by the algorithm.
Similar to time complexity, Big O notation is used to represent space complexity.
If the auxiliary space used by algorithm remains constant as the input size changes, the space complexity is O(1), and so on.

Pointers to think after this blog:

Why O(1) is better than O(N)?

Get a gist of graph data structure here...

vidhi-thakur — Tue, 10 Dec 2024 21:03:27 +0000

This blog is for developers who want to get the gist of a concept and not beat around the bush. We will understand graph data structure in this post. Let's start.

What are Graphs?

Graphs are non-linear data structures with 2 components namely edges and nodes.

A node is: -

a basic unit of graph,
also known as vertex or vertices, and
can be labeled or unlabeled.

An edge is:-

a connection between two nodes,
also known as arcs, and
can be labeled or unlabeled.

Types of graph: -

Null graph: It has no edges,
Trival graph: It has only one node,
Cyclic graph: It contains at least one cycle,
Cycle graph: All nodes are connected to make one cycle,
Directed graph: Its edges have direction,
Undirected graph: Its edges do not have any direction,
Weighted graph: Some value is assigned to each edge,
Connected graph: We can visit any other node from one node (it does not have to be a unique edge),
Unconnected graph: At least one node is disconnected from a node,
Regular graph: Every vertex has the same number of neighbours,
Complete graph: Every node is connected to another node by a unique edge,
Directed acyclic graph: A directed graph with no cycles,
Bipartite graph: Its nodes can be divided into 2 sets such that no edges exist among the sets.

How do we store graphs?

There are 2 ways:

Adjacent matrix, and
Adjacent list

The adjacent matrix is a 2-D matrix representing graph data structure. The rows and columns represent nodes and the value in the matrix represents the edges.

In the above image, 4 nodes are connected by the edges. Node A is connected to all the nodes and thus the value is added as 1 in the cells where A (either row or column) intersects with rows or columns of other nodes. Node B is only connected to Node A resulting in a value 1 in the cell where node B intersects with node A and other cells have a value 0.

The time complexity to add or delete an edge for the adjacent matrix is O(1). It can be used when: -

the graph has the maximum possible edges,
there is no memory constraint, and
the graph has a complex structure.

The adjacent list is storing the graph with the help of multiple linked lists or arrays. The rows represent the node (check the image below), and the values present in the rows represent neighbour.

In the above image, there are 5 nodes. Node A is connected to node B and node D which is why the first array has those values. Similarly, node B is connected to node A, node C, node D, and node E and so the second array has those nodes in the second array.

The time complexity for retrieving or deleting an edge is O(n) and the time complexity for adding an edge is O(1). The adjacent list can be used when: -

the node has fewer edges,
there are memory constraints, and
the graph is less complex.

Fig: Visual comparison between adjacent list and adjacent matrix.

Use cases for the graphs

One popular example of graph data structure is: in a field of football each player can be considered a node and their interactions represent edges.

Graphs are used in similar scenarios as previous example, such as: -

in social networks where everyone is a node,
in computer networks where PCs and routers are the nodes,
in the transportation network, and so on...

Getting Real-Time Updates in React JS: Polling vs WebSocket

vidhi-thakur — Tue, 18 Jul 2023 04:41:49 +0000

Usually, when a client gets the data from a server, it sends a request to the server, and the server then sends the response (or requested data) back. The issue with this process is we don't get the new data on the client side as soon as the new data is available to the server.

Now let's say we want real-time updates on our web application. How do we do that!?

First, let us understand what polling is.

Polling

Well, polling is a technique in which the client sends the request repeatedly to the server after a fixed interval. This way, the client can check if the server has new information and update the client side accordingly.

This can be implemented in React JS with the help useEffect and setInterval. Let's see how: -

useEffect(() => {
    const interval = setInterval(() => {
        // API call to get data from the server
    }, 5000)

    return () => {
        clearInterval(interval);
    }
}, []);

In the example above, a callback function inside useEffect runs when the interface loads. The callback function uses setInterval to make an API call to the server and gets the data. The API call happens after every 5 seconds.

Disadvantages of polling

Even though polling can get us the updates from the server every few intervals, it has disadvantages. Issues with polling are: -

It increases the network load because the client has to keep making the API calls after fixed intervals.
Low latency because the server processes the API request every time the request is sent.
Delayed update since a new connection establishes after a fixed interval which can potentially delay an update.

To overcome these issues, we can use something like WebSocket API and get the updates on the client side as soon as the new data is available on the server (real-time).

WebSocket API

The WebSocket API uses something known as WebSocket communication. The WebSocket communication allows the client to have a real-time two-way connection and provides events and javascript methods that interact with the server.

Implementation in React JS: -

useEffect(() => {
    // Establish the connection
    const socket = new WebSocket(api_url);

    // To receive messages from the server
    socket.onmessage = (event) => {
        const msg = event.data;
        // Do something with msg
    }

    return () => {
        // Close the connection
        socket.close();
    }

}, []);

The above example is a basic implementation of WebSocket API. Step 1 is to establish the connection. When new WebSocket is invoked, it initiates a connection between the client and the specified URL.

After the connection is established, the client can get the messages via an onmessage event. The client can utilize other events and methods such as onerror, onopen, onclose, send(), close(), etc.

Follow the link for more details.

In the case of WebSocket API, the connection remains open, unlike polling, where the connection terminates after the client receives the data from the server.

Since the WebSocket connection remains open, the client receives real-time data updates from the server without delay. Additionally, the client does not have to make multiple API calls to fetch the updates reducing the load on the network.

These factors make WebSocket connections favorable for apps requiring real-time updates like chat applications, collaborative editing tools, and many more.

Note: The server sent events by Chat GPT API can be handled via WebSocket too.

Temporal Dead Zone (TDZ)

vidhi-thakur — Mon, 09 May 2022 18:20:32 +0000

Let's understand TDZ and why does it exist.

Temporal Dead Zone (TDZ) is an area of a block where a variable cannot be accessed until it is initialized. Let's see a simple example to understand better.

Example 1

console.log("Welcome ",name)

let name = "Vidhi"

In the code written above, the area above the variable name is initialized is temporal dead zone. Notice a console log there. Well if we try to run this code, it will throw a reference error.

This happened because in the console.log statement we tried to access a value which was not yet initialized. Let's see one more example.

Example 2

console.log("Welcome ",name)

var name = "Vidhi"

This example has a small change when compared to example 1. Here the variable is declared with var. Now what it does is, when we run this code, there will be no error but the value of name will be undefined.

This happens because when a var variable is hoisted, it is automatically initialized as undefined. This does not happen with let and const and therefore the error occurs.

Introduction to React Context API

vidhi-thakur — Thu, 05 Aug 2021 19:29:18 +0000

What is React Context API?

React Context API is a React API that allows one to share state across an entire app. Instead of installing a state management library in your project or prop drilling, the React Context API provides a way for a React app to effectively produce global variables that can be passed around.

createContext hook: -

React hook that is needed for this purpose is createContext(). It returns a provider and a consumer. The provider, as the name suggests, provides a state to its children whereas the consumer uses the state.

Example 1: -

import React, { createContext } from "react";

// creating a context
const StateContext = createContext();

export default function App() {
  return (
    <StateContext.Provider value={56}>
      <ShowValue />
    </StateContext.Provider>
  );
}

function ShowValue() {
  return (
    <StateContext.Consumer>
      {(value) => <p>The display value is: {value}.</p>}
    </StateContext.Consumer>
  );
}

To see the working implementation of the above example, click here.

In the example above, we created a context. Now think of creating a context as creating a data layer. After the context is created, we wrapped a component (i.e., ShowValue component) in the data layer so that the data or value is accessible in that component. Finally, the data (or value) is fetched using the consumer. Note that the consumer obtains the value passed by the provider without prop drilling.

Using react Context API lets you avoid passing of props from parent component to children components. It's all good until you need to pass multiple values. In case of retrieving data from multiple parent contexts, a lot of nesting is introduced.

<CurrentUser.Consumer>
      {user =>
        <Notifications.Consumer>
          {notifications =>
            <header>
              Welcome back, {user.name}!
              You have {notifications.length} notifications.
            </header>
          }
        </Notifications.Consumer>
      }
    </CurrentUser.Consumer>

Therefore, to make the code less verbose we use useContext() hook.

useContext hook: -

The useContext() hook provides a way to pass the data or value to any component without using the consumer. Further, it makes the code more readable and reduces cognitive overhead (i.e., the used amount of working memory resources).

With useContext() hook, the code in example 1 will look like this: -

import React, { createContext, useContext } from "react";

const StateContext = createContext();
const useStateValue = () => useContext(StateContext);

export default function App() {
  return (
    <StateContext.Provider value={56}>
      <ShowValue />
    </StateContext.Provider>
  );
}

function ShowValue() {
const value = useStateValue();
  return (
      <p>The display value is: {value}.</p>
    );
}

To see the working implementation of the above example, click here.

Note: To further manage the state of the app, useReducer() hook is used.

Conclusion

By using React Context API, we can produce global variables that can be passed around an entire application and avoid prop drilling. For this purpose, the createContext and the useContext hooks are used. In addition, the useReducer hook can also be used in the case of managing the state of the app.

P.S. Context API should only be used when you need to share state between many components with a lot of nesting.

Accessing Object Properties in JavaScript

vidhi-thakur — Wed, 30 Jun 2021 15:43:53 +0000

Almost all JavaScript values have properties and accessing the said properties can be done in 3 ways, i.e.,

dot notation
square brackets
object destructuring

Dot notation

To access a property of an object through dot notation, we must know the property name beforehand.

Syntax: expression.identifier

Let's see an example to understand this better.

Example 1:

const items = {
      food: "soup",
      "phone-1": "iphone 12"
}

// to access food property
items.food
// output => soup

In the example above, items is an object from which we need to access a property, and food is an identifier. Accessing food property of items is easy enough. However, if we try to access the phone-1 property through dot notation, it won't work. Wondering why? Because it is not a valid identifier. So, how can we access that property? We'll cover that in the next section.

Now you know how accessing a property from dot notation works.

Note: The identifier should be a valid identifier.

Square brackets

To access a property of an object via square brackets, we do not need to know the property name beforehand, that is, the property name could be dynamic (determined at run time).

Syntax: expression[expression]

Let's understand this method through example 1. In example 1, there was an object items and it had two properties. So, to access the food property, we simply have to do this: items[food]. Now about that second property, do you think we would be able to access that?

If your answer is yes then you are correct.

We can access the phone-1 property by doing this: items["phone-1"]. When using square brackets, the expression between the brackets is evaluated and converted to a string to get the property name. Whereas using dot notations only fetches the value.

Object destructuring

Destructuring is a JavaScript expression that allows us to extract data from arrays, objects, and maps and set them into new, distinct variables. Object destructuring assigns the properties of an object to variables with the same names by default.

See the example below: -

Example 2:

const items = {
    food: "soup"
    "phone-1": "iphone 12"
}

const { food } = items;

food;
// output => soup

The destructuring defines a variable food with the value of property food.

Note: The variable should have the same name as the property.

Further, to create a variable name different than the property name and to access the phone-1 property, we can use aliasing.

Syntax: const { identifier: aliasIdentifier } = expression;

For instance in example 2, to create a different variable name of phone-1 property, do this:

const {"phone-1": newVariable} = items

newVariable;
// output => iphone 12

Conclusion

To access a property of an object via dot notation, the property name should be a valid identifier and known ahead of time. Whereas accessing the property of an object via square brackets is favorable when the property name is dynamic or is not a valid identifier. In addition, the object destructuring extracts the property directly into a variable.

Fun fact from Eloquent

The elements in an array are stored as the array’s properties, using numbers as property names. Because you can’t use the dot notation with numbers and usually want to use a binding that holds the index anyway, you have to use the bracket notation to get at them.

Did you like this blog? Let me know in the comments below✌️.