DEV Community: Samarth Goudar

Backtracking

Samarth Goudar — Mon, 26 May 2025 04:16:07 +0000

Backtracking is a classic algorithmic strategy that feels a bit like trying on different keys until you find the one that fits, but with a methodical twist. If you’ve ever played Sudoku, solved a maze, or explored multiple choices in a game, you’ve already used backtracking.

What Is Backtracking?

Think of backtracking as a smart “trial and error” approach. Instead of blindly checking every possible combination, you build solutions one step at a time. If you hit a dead end, you back up (or "backtrack") to try a different path. It’s like retracing your steps in a maze whenever you hit a wall, ensuring you eventually cover all possible routes, but never getting lost.

How to Identify a Backtracking Problem

Let’s talk about how you can recognize when a problem is a good fit for backtracking.

Ask yourself these questions:

Does the problem ask you to find all solutions, or any valid solution, from a huge number of possibilities?
Are you making a sequence of choices, where each choice leads to further choices?
Can you “undo” or back up a choice if it doesn’t lead to a solution?
Is brute-forcing every combination possible, but slow or repetitive?

Common Signs:

You’re working with combinations, permutations, or subsets (for example, generating all possible arrangements of something).
You need to solve puzzles, such as Sudoku, N-Queens, or crossword filling.
You’re searching through a maze or a tree of possibilities.

If the answer to any of these is yes, there’s a good chance backtracking is the way to solve the problem.

How to Set Up a Backtracking Solution

Once you recognize a backtracking problem, the setup follows a simple pattern. Think of it like setting up a board game: you have a starting point, a set of possible moves, and a way to check if you’ve won i.e met the condition.

Here’s a step-by-step approach:

Define the Choices:

Figure out what decisions you make at each step. In our keypad example, the choice is which letter to pick for the current digit.
Track the Path:

Keep track of the current sequence of choices (this could be a list, string, or array).
Set the Goal:

Decide when a solution is “complete.” For the keypad problem, a complete path is when you’ve picked a letter for every digit.
Implement the Backtracking Function:
- At each step, loop through all available choices.
- Add the choice to your path.
- Recursively try the next step.
- If you reach the goal, record the solution.
- Remove the last choice (backtrack) and try the next possibility.

Visualizing It:

Imagine you’re navigating a tree, where each branch is a choice. You explore a branch, and if you reach a leaf (end of the path) that isn’t a solution, you move back to the previous fork and try a different branch.

Template Code Structure:

def backtrack(choices, path):
    if is_goal(path):
        save_solution(path)
        return
    for choice in choices:
        make_choice(path, choice)
        backtrack(next_choices, path)
        undo_choice(path)

This pattern pops up in all sorts of classic backtracking problems.

A Step-By-Step Walkthrough: Letter Combinations of a Phone Number

Let’s see backtracking in action with a real coding example: generating all possible letter combinations for a string of digits, just like texting on an old-school phone keypad.

Problem Recap

Given a string of numbers like "23", return all possible letter combinations those numbers could represent on a phone keypad.

Code Example

Here’s a Python implementation using backtracking:

class Solution:
    def letterCombinations(self, digits: str) -> List[str]:
        if len(digits) == 0:
            return []

        keypad = {
            '2': ['a','b','c'],
            '3': ['d','e','f'],
            '4': ['g','h','i'],
            '5': ['j','k','l'],
            '6': ['m','n','o'],
            '7': ['p','q','r','s'],
            '8': ['t','u','v'],
            '9': ['w','x','y','z']
        }

        def backtrack(index, path):
            if len(path) == len(digits):
                combinations.append("".join(path))
                return
            possible = keypad[digits[index]]
            for letter in possible:
                path.append(letter)
                backtrack(index + 1, path)
                path.pop()

        combinations = []
        backtrack(0, [])
        return combinations

How It Works: Step by Step

Let’s break this down as if you’re walking through a decision tree, one branch at a time.

Set Up the Problem:

We check if digits is empty. If so, return an empty list. No digits means no combinations.
Keypad Mapping:

We map each digit to its possible letters, like you see on a phone keypad.
Backtracking Function:
- Goal: Build all combinations by picking one letter for each digit, moving from left to right.
- Parameters:
  - index: Which digit we’re working on.
  - path: The current combination we’re building (as a list of characters).
The Recursion:
- If path has as many letters as the input digits, we’ve built a full combination and add it to combinations.
- Otherwise, look up the current digit in the keypad mapping and try each letter:
  - Add the letter to path.
  - Recursively call backtrack to work on the next digit.
  - After the recursive call, pop the last letter. This is the backtrack step, undoing our last choice so we can try another.

A Quick Example

If the input is "23", the algorithm explores:

First digit 2: try a, b, c
For each letter from 2, try all possibilities for digit 3: d, e, f

So it generates combinations like ad, ae, af, bd, be, bf, and so on.

Why Pop from Path?

That little line path.pop() is crucial. After trying a letter, we remove it to return path to its previous state, ready to try the next possibility. Think of it like removing a chess piece before trying a different move.

Backtracking is about exploring choices, retracing your steps, and efficiently finding all solutions. It’s perfect for situations where you need to try every combination, but want to avoid unnecessary work by skipping impossible paths early.

Whether you’re generating letter combos, solving puzzles, or navigating a maze, understanding backtracking will give you a powerful tool for tackling all kinds of problems without brute force.

The State of Web Frameworks in 2025

Samarth Goudar — Fri, 16 May 2025 04:25:37 +0000

Web development never stands still. Just a few years ago, debates raged over Angular vs React; today, the landscape is wider, smarter, and more competitive than ever. If you’re building for the web in 2025, you’ve got more options, smarter tools, and new trends to consider.

So, which frameworks are leading the charge, what defines this year’s trends, and how do developers actually make their choices?

The Current Leaders in Web Frameworks

The world of web frameworks in 2025 features a dynamic mix of established giants and innovative newcomers. Here are the frameworks dominating the scene:

React: Still a top contender, React remains popular for its vast ecosystem, flexibility, and active community. Its component model fits almost every use case.
Next.js: Built on top of React, Next.js is now the go-to for production-grade apps, offering SSR, SSG, API routes, and built-in AI integrations.
Svelte & SvelteKit: Svelte continues to win fans for its simplicity and compiler-driven approach—code is lean, fast, and feels intuitive.
SolidJS: Gaining momentum, SolidJS boasts fine-grained reactivity with minimal overhead, attracting performance-focused teams.
Qwik: Famous for instant loading and “resumability,” Qwik’s approach to delivering only what’s necessary for each interaction has inspired a new generation of frameworks.
Astro: Astro makes multi-framework development feel effortless, letting devs blend React, Svelte, Vue, and more in a single project. Its partial hydration keeps pages lightning-fast.

Defining Trends in 2025

What separates 2025 from previous years? A few major trends stand out:

Performance as Table Stakes

Users expect blazing speed, even on low-powered devices. Frameworks compete on metrics like Time to Interactive and Core Web Vitals, not just features.
AI-Assisted Development

Frameworks now ship with built-in AI helpers. From code completion to real-time documentation and even component scaffolding, AI is woven into the dev experience.
Edge & Serverless by Default

Deploying to the edge is just a click away. Next-gen frameworks embrace serverless and edge-first deployment, pushing logic closer to users for lower latency.
Unified DX (Developer Experience)

Command-line tools, visual editors, and integrated AI assistants work together. Setting up a project, previewing changes, or rolling back mistakes is smoother than ever.
Hybrid Rendering Everywhere

Static, dynamic, streaming; modern frameworks offer them all. Developers can blend SSR, SSG, and client-side rendering as needed for each route.

How Developers Are Choosing Frameworks

In 2025, picking a framework isn’t just about popularity—it’s about fit and future-proofing. Here’s what matters most:

Ecosystem & Community: Is there strong plugin support, frequent updates, and active forums?
Performance: Will it deliver sub-second load times and pass strict performance budgets?
AI Integration: Does the framework offer intelligent tooling or automate routine tasks?
Flexibility: Can you mix rendering strategies and target modern deployment platforms?
Learning Curve: Does it feel welcoming for new team members or require steep upskilling?

Key Takeaway

The web framework landscape in 2025 is fast, flexible, and smarter than ever. While React and Next.js remain strong, frameworks like SvelteKit, SolidJS, Qwik, and Astro are pushing boundaries especially in performance, AI integration, and developer experience.

Choosing a framework today is about more than what’s popular, it’s about finding the right mix of speed, ecosystem, and innovation that fits your project’s needs and your team’s strengths.

JavaScript Array Methods Cheat Sheet

Samarth Goudar — Thu, 15 May 2025 05:15:34 +0000

Method	Purpose	Example Usage	Returns
`map()`	Transforms each element and returns a new array	`arr.map(x => x * 2)`	New array
`filter()`	Returns array of elements that pass the test in the callback	`arr.filter(x => x > 0)`	New array
`reduce()`	Reduces array to single value by applying a function	`arr.reduce((a, b) => a + b, 0)`	Single value
`forEach()`	Runs a function on each array element (no return)	`arr.forEach(x => console.log(x))`	undefined
`find()`	Finds the first element that passes the test	`arr.find(x => x > 10)`	Element or undefined
`findIndex()`	Finds the index of the first element passing the test	`arr.findIndex(x => x > 10)`	Index or -1
`some()`	Checks if any element passes the test	`arr.some(x => x < 0)`	true/false
`every()`	Checks if all elements pass the test	`arr.every(x => x > 0)`	true/false
`includes()`	Checks if array contains a value	`arr.includes(2)`	true/false
`indexOf()`	Finds index of value in array (-1 if not found)	`arr.indexOf(2)`	Index or -1
`push()`	Adds elements to end, returns new length	`arr.push(4)`	New length
`pop()`	Removes last element, returns removed value	`arr.pop()`	Removed element
`shift()`	Removes first element, returns removed value	`arr.shift()`	Removed element
`unshift()`	Adds elements to start, returns new length	`arr.unshift(1)`	New length
`slice()`	Returns part of array, does not modify original	`arr.slice(1, 3)`	New array
`splice()`	Changes array by adding/removing elements	`arr.splice(1, 2)`	Removed elements
`concat()`	Combines arrays, returns new array	`arr.concat([4,5])`	New array
`join()`	Joins all elements into a string	`arr.join('-')`	String
`reverse()`	Reverses array in place	`arr.reverse()`	Same array
`sort()`	Sorts array in place	`arr.sort()`	Same array
`flat()`	Flattens nested arrays	`arr.flat()`	New array
`fill()`	Fills array with static value	`arr.fill(0)`	Same array
`from()`	Creates array from array-like object	`Array.from('abc')`	New array
`isArray()`	Checks if a value is an array	`Array.isArray(arr)`	true/false

Callbacks in JavaScript

Samarth Goudar — Thu, 15 May 2025 05:02:25 +0000

What is a Callback?

A callback is a function passed into another function, to be called later when something happens or a task is finished.

Analogy:

Imagine you order food and give the restaurant your phone number so they can call you when your food is ready. Your phone number is the callback.

Why Are Callbacks Important?

JavaScript is single-threaded and often needs to wait for things (like loading data or waiting for a user action).

Instead of stopping everything, it uses callbacks to say, “Do this later, when the waiting is done.”

How Do Callbacks Work?

1. Writing a Function That Accepts a Callback

function doSomethingLater(callback) {  
console.log("Doing something...");  
callback();  
}

2. Defining the Callback Function

function sayHello() {  
console.log("Hello, I'm the callback!");  
}

3. Passing the Callback

doSomethingLater(sayHello);

Output:

Doing something...  
Hello, I'm the callback!

4. Using Inline (Anonymous) Callbacks

doSomethingLater(function() {  
console.log("This is an inline callback!");  
});

Real-Life Applications

setTimeout and setInterval

setTimeout(function() {  
console.log("This runs after 2 seconds");  
}, 2000);

Event Listeners

button.addEventListener('click', function() {  
console.log("Button clicked!");  
});

Fetching Data (with Promises, but still uses callbacks)

fetch('https://api.example.com/data')  
.then(function(response) {  
return response.json();  
})  
.then(function(data) {  
console.log(data);  
});

Common Misconceptions

Callbacks are not always asynchronous.

Some callbacks are called right away.
Callbacks are just functions.

There’s nothing special about them except how they’re used.

Callback Cheat Sheet

Definition:

A callback is a function you pass to another function to be called later.

Basic Example:

function callback() { ... }  
someFunction(callback);

Anonymous Example:

someFunction(function() { ... });

Typical Uses:

setTimeout, setInterval
Event handling (like clicks)
Fetching data from APIs

Key Point:

Callbacks help JavaScript handle tasks that take time, so your code can keep running without waiting.

JavaScript Tips Every Beginner Should Know

Samarth Goudar — Sat, 10 May 2025 03:12:04 +0000

Real-world lessons that helped me write better code.

If you’ve spent any time writing JavaScript, you’ve probably run into moments where things don’t behave the way you expect. I definitely have. Over time, through trial and error and building actual projects, I’ve picked up a few habits and insights that have made my code cleaner and my life easier. This post is a collection of those tips. Hopefully, they’ll help you avoid some of the mistakes I made early on.

Use === Instead of == for Comparisons

In JavaScript, == tries to be helpful by converting values to the same type before comparing them. That sounds nice in theory, but in practice it can cause some very unexpected results.

0 == false      // true  
'' == 0         // true  
'123' == 123    // true

This kind of behavior can be really confusing. To avoid it, always use ===, which checks both value and type. It’s stricter, and that’s a good thing.

0 === false     // false  
'123' === 123   // false  
'hello' === 'hello' // true

It’s a simple habit that can save you a lot of debugging time.

Stick With let and const, Not var

The var keyword was how we used to declare variables in JavaScript, but it comes with quirks like function scoping and hoisting. That means variables declared with var can behave in ways that are hard to reason about.

if (true) {  
  var x = 10;  
}  
console.log(x); // 10 (even though it's outside the block)

With let and const, you get block scoping, which is more predictable and helps avoid accidental bugs.

if (true) {  
  let y = 20;  
}  
console.log(y); // ReferenceError: y is not defined

Use const when you don’t plan to reassign the variable, and let when you do. It makes your code easier to read and reason about.

Avoid Changing Arrays or Objects Directly

In JavaScript, arrays and objects are passed by reference. That means if you change them, those changes affect the original as well. This can lead to side effects you didn’t intend.

const original = [1, 2, 3];  
const copy = original;  
copy.push(4);  

console.log(original); // [1, 2, 3, 4]

Instead, make a copy first. That way, you keep your original data safe.

const original = [1, 2, 3];  
const copy = [...original];  
copy.push(4);  

console.log(original); // [1, 2, 3]  
console.log(copy);     // [1, 2, 3, 4]

The same idea applies to objects:

const obj = { a: 1, b: 2 };  
const newObj = { ...obj, b: 3 };  

console.log(newObj); // { a: 1, b: 3 }

Arrays and objects in JavaScript are passed by reference, meaning changes to them affect the original. While this behavior can be helpful in certain cases, it often leads to bugs or unintended side effects if not handled carefully.

In some cases, directly modifying the original data is intentional and can be efficient. But in other scenarios, when using frameworks like React or following functional programming practices, preserving immutability is important for predictable behavior. This is important in React, where immutability helps in detecting changes and triggering re-renders correctly. Using copies instead of direct mutations makes your code safer, easier to debug, and more maintainable.

In general, when in doubt, copy, not because mutation is always bad, but because predictability is almost always good.

Get Comfortable With Closures

Closures let a function remember the variables from where it was created. That sounds simple, but it unlocks a lot of powerful patterns in JavaScript.

function createCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Even though the outer function has finished running, the inner function keeps access to count. Closures are used all over the place, from timers to state management.

Understand How this Works

The value of this in JavaScript depends on how a function is called. That’s why you can sometimes get strange results when using regular functions inside other functions or callbacks.

const person = {
  name: 'Sam',
  greet: function () {
    setTimeout(function () {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // "Hi, I'm undefined"

Arrow functions help here because they don’t create their own this. They just use whatever this was already in scope.


const person = {
  name: 'Sam',
  greet: function () {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // "Hi, I'm Sam"

So when you’re inside an object and using callbacks, arrow functions are often the safer choice.

Use Default Parameters

Instead of writing manual checks for undefined, you can use default values directly in the function parameters. It keeps your code cleaner and avoids unnecessary logic.

function greet(name = 'Guest') {
  return `Hello, ${name}`;
}

console.log(greet());        // Hello, Guest
console.log(greet('Sam')); // Hello, Sam

It’s a small thing, but it makes your function signatures more expressive and your code shorter.

Destructure for Readability

Destructuring lets you extract values from arrays or objects in a single line. It makes your code more readable and avoids repetitive access patterns.

const user = { name: 'Sam', age: 30 };
const { name, age } = user;

console.log(name); // Sam
console.log(age);  // 30

You can also use it right inside function parameters:

function printUser({ name, age }) {
  console.log(`${name} is ${age} years old`);
}

printUser(user); // Sam is 30 years old

This really shines when working with APIs or data-heavy components.

Conclusion

JavaScript is a flexible and powerful language, but that flexibility means it’s easy to fall into confusing patterns if you’re not careful. These tips have helped me write cleaner, more reliable code, and understand how the language actually works under the hood. Whether you’re just getting started or you’ve been writing JavaScript for a while, I hope at least one of these ideas helps make your code better.

Javascript : Functions, Chaining, Equality and Closures

Samarth Goudar — Wed, 07 May 2025 21:17:43 +0000

JavaScript offers powerful features like higher order functions, method chaining, strict equality, and closures. Understanding these core concepts helps write cleaner, more efficient code. In this blog, we’ll break down each topic with simple explanations and examples.

Functions

In JavaScript, it’s common to see functions returning other functions or objects. When a function returns another function, it’s known as a higher-order function. These are powerful tools in functional programming, enabling dynamic behavior and function composition. Similarly, factory functions return new object instances and are often used as alternatives to classes, especially when object creation logic needs to be encapsulated

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // 10

Here, multiplier returns a new function that remembers the factor passed in. Now compare that with a factory function:

function createUser(name, age) {
  return {
    name,
    age,
    greet() {
      console.log(`Hi, I'm ${name}`);
    }
  };
}

const user = createUser('Sam', 25);
user.greet(); // Hi, I'm Sam

In this case, createUser returns a new object with data and behavior. These patterns are especially useful for creating reusable and modular code.

Chaining

Another important concept is method chaining. This is a design pattern where multiple methods are called in a single line, one after another. It’s commonly seen in libraries like jQuery or Lodash, and it relies on each method returning the object itself (or a new object). This pattern improves readability and reduces boilerplate code when performing sequential operations.

class Calculator {
  constructor(value = 0) {
    this.value = value;
  }

  add(n) {
    this.value += n;
    return this;
  }

  subtract(n) {
    this.value -= n;
    return this;
  }

  multiply(n) {
    this.value *= n;
    return this;
  }

  result() {
    return this.value;
  }
}

const calc = new Calculator();
const final = calc.add(5).multiply(2).subtract(3).result();
console.log(final); // 7

Each method returns the object, enabling us to chain them smoothly and keep the code concise.

Equality

A commonly misunderstood part of JavaScript is the difference between the equality operators == and ===. The == operator is known as the abstract equality operator and allows type coercion, meaning it will attempt to convert operands to the same type before comparing. The === operator is the strict equality operator and does not perform any conversion, both the type and value must match for it to return true.

console.log(5 == '5');  // true  (because of coercion)
console.log(5 === '5'); // false (different types)

To avoid unexpected results, it’s recommended to always use === for comparisons.

Closures

Closures are one of the most powerful and important features in JavaScript. At a basic level, a closure is formed when a function remembers the variables from its lexical scope, even after that outer function has finished executing. This allows inner functions to access variables from their outer functions long after those outer functions have returned.

function outerFunction() {
  let outerVariable = "I'm outside!";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closureFunc = outerFunction();
closureFunc(); // Output: I'm outside!

In this code, innerFunction is returned from outerFunction, and later invoked as closureFunc(). Even though outerFunction has already finished executing, innerFunction still has access to outerVariable.

Note: Closures keep references to their outer variables, which can prevent those variables from being garbage collected. While this is usually fine, excessive or long-lived closures may lead to memory leaks if not managed properly.