DEV Community: sushmeet sunger

Leet Code Palindrome problem in Javascript

sushmeet sunger — Wed, 12 Feb 2025 19:50:17 +0000

General Idea

Given an integer, return whether true or false if it is a palindrome.

** Approach 1
So the easiest way to approach this is to convert the number into a string, break into an array, reverse the array, then join back the string and compare the original string and reversed string. Lets try this first and look at the Time and Space Complexity.

export function isPalindrome(x: number): boolean {
  // Convert number to string
  const numStr = x.toString(); // O(1)

  // Get reversed string
  const reversedString = numStr.split("").reverse().join("");

  // Compare original and reversed strings
  return numStr === reversedString;
}

Approach 1 Complexity

Time Complexity is O(n)

So when we convert the input integer to a string, it depends on the size of integer so O(n)
Then we break the string into an array, so again O(n)
Then we reverse array O(n)
Join the reversed array above into a string O(n)
Compare the 2 strings O(n)

So O(n) + O(n) + O(n) + O(n) + O(n) = O(n).

Even though there are 5 different O(n) operations, we simplify it to just O(n) because:

Constants don't matter in Big O notation - whether an algorithm takes n steps or 5n steps, the growth rate is still linear with respect to the input size.

We care about the algorithmic scaling behavior as n gets very large, and at that point, the difference between n and 5n becomes negligible

Space Complexity is O(n)
We create additional strings and arrays:

We create a new string numStr from the original integer O(n)
we create a new array from split O(n)
We have a reversed str O(n)

The solution is simple but not the most efficient for space complexity.

** Approach 2 More Efficient and what we want.

Let's look at a more optimized solution that avoids string conversion and uses a mathematical approach.

Approach 2 Complexity

Time Complexity: O(log n)

We only process half the digits
For a number n, the number of digits is log₁₀(n)
Each iteration processes one digit

Space Complexity: O(1)

We only use two variables regardless of input size:

x (which we modify)
reversedHalf

Key optimizations:

Early returns for negative numbers and single digits
Only reverses half the number instead of the entire number
No string conversion needed
Handles both even and odd length numbers
Uses constant extra space

Example of how it works for number 1221:

Initially: x = 1221, reversedHalf = 0
First iteration: x = 122, reversedHalf = 1
Second iteration: x = 12, reversedHalf = 12
Loop ends as x ≤ reversedHalf
Check if x === reversedHalf (12 === 12) → true

Leet Code Two Sum problem in Javascript

sushmeet sunger — Sun, 08 Dec 2024 22:07:13 +0000

General Idea

The Two Sum problem is a classic algorithmic problem. It asks you to find two numbers in an array that add up to a specific *target * that is provided and then return their indices from the given array.

Problem Statement

Given an array of integers nums and an integer target, return the indices of the two numbers such that they add up to the target. Each input will have exactly one solution, and you may not use the same element twice.

Input: nums = [2, 7, 11, 15], target = 9 Output: [0, 1] Explanation: nums[0] + nums[1] = 2 + 7 = 9

Approach 1 Brute force

First approach to any problem could just be to get something done and the easiest thing conceptually.

Iterate through the array with two loops and check all pairs of numbers.

const twoSum = (nums, target) => {
  for(let i = 0; i < nums.length; i++) {
    for (let j = i + 1; j < nums.length; j++) {
      console.log(` i is ${nums[i]} and k is ${nums[j]}`)
      // lets check if we add the 2 numbers if it equals target
      if (target === nums[i] + nums[j]) {
        return [i, j]
      }
    }
  }
};

const nums = [2, 7, 11, 15];
const target = 9;
console.log(twoSum(nums, target));

Approach 1 Complexity

Time Complexity is O(n²)

Nested loops checking every pair of numbers
Checks every possible combination
Becomes very slow with large arrays

Space Complexity is O(1)
1.We have created no new data structure

Approach 2 More Efficient and what we want.

We will use a hash map to solve this. Let's explain this algorithm a bit

We use a hash map (object in JavaScript) to store numbers we've seen
For each number, we calculate its complement (target - current number)
We check if the complement exists in our map
If it does, we've found our two numbers and return their indices
If not, we add the current number to the map

So first solution could be using the regular JS object and building our HashMap that way

const twoSumOptimizedRegularObject = (nums, target) => {
  const objectStuff = {}

  // write a for loop, to go through the arr
  for (let i = 0; i < nums.length; i++) {
    const complement = target - nums[i] 

    if (complement in objectStuff) {
      return [objectStuff[complement],i]
    }
    objectStuff[nums[i]] = i 
  }
}

const nums = [2, 7, 11, 15];
const target = 9;
console.log(twoSumOptimizedRegularObject(nums, target));

The second solution is actually using the Map Data Structure in JS.This allows for a more stricter and more robust implementations, using a Map object (introduced in ES6) and is often preferred. A Map provides explicit hash map behavior and avoids some quirks of JavaScript objects, like inheriting properties from Object.prototype.

const twoSumOptimized = (nums, target) => {
  const mapOfStuff = new Map()

  // write a for loop, to go through the arr
  for (let i = 0; i < nums.length; i++) {
    let complement = target - nums[i]

    if (mapOfStuff.has(complement)) {
      return [mapOfStuff.get(complement), i]
    }
    mapOfStuff.set(nums[i], i)
  }

}

const nums = [2, 7, 11, 15];
const target = 9;
console.log(twoSumOptimized(nums, target));

Approach 2 Complexity

Time Complexity is O(n)

Single pass through the array
Hash map provides O(1) lookup
Total time scales linearly with array size

Space Complexity is O(n)
In worst case, we might store nearly all numbers
Trade-off between time and memory efficiency

Caveats

Empty array
No solution exists
Multiple solution are possible. In this case, ask if you return after the first iteration.

How to Install React in 5 minutes

sushmeet sunger — Tue, 03 Jan 2023 01:53:24 +0000

Heard a lot about React!! Looking to give it a try on your computer but unsure as to how you can set up your development environment. No worries we got you covered.

Firstly let's ensure you have NodeJS installed on your machine.
We will install nvm (node version manager) which will in turn let us install multiple versions of NodeJS, so we can choose whichever one we need to run.

Type the below command to get the latest

nvm install node

If you don't have nvm than you can first try installing nvm.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

We will install a React Application and have it configured with Visual Studio Code (VS Code) which will allow you to edit, and create new react apps.

Install VS code by going to the side VS Code Site here
Once installed, open VS code, and open an Integrated Terminal within VS Code. You can do this by Use the View > Terminal or Terminal > New Terminal menu commands.
Now go to this Integrated Terminal and ensure that you are in the space where you want to create your project. So if you want to create your project in documents just type.

cd Documents

Once you are in the location, that you want to create your code folder, type the following command below. So in the command below where I have nameOfYourAppHere you can put any name for your app, so whatever you like.

npx create-react-app nameOfYourAppHere

Once this is done you should have React and all of it's package dependencies installed
Now let's start you React Application by typing

cd nameOfYourAppHere
npm start

In your browser go to http://localhost:3000
You will see the react logo spinning and that is your application.

API routes with Vercel Serverless Functions and NextJS

sushmeet sunger — Fri, 23 Sep 2022 05:07:40 +0000

Introduction

You use Next.js for your frontend Applications. Did you also know that you could use Next.js to create a Node API and essentially have a back end application 😃!!!.

That's right no need to set up a separate back end application using Nodejs or other webframeworks like Express JS or Fastify.

So I did know about this by reading the docs, but something that stumbled me a bit was there were apparently two choices that are presented to us.

First being Vercel's Serverless Functions and second being Next.js API routes. Both allow you to serve API endpoints 🤔.

Vercel is the company behind Next.js , and for me initially the line was blurry because both implementations seemed very similar(spoiler 🚨 this is not true). So in this article we will go over the differences between the two approaches, which approach might be right for you and how to move forward with those approaches.

Option1: Serverless functions with Vercel

Creating Serverless functions with Vercel has only one package dependency and that is Vercel and you don't need Next.js. This a zero configuration deployment.

To deploy Serverless Functions, you can put files with
extensions matching supported languages and exported functions in the /api directory at the root of your project.

Pros

Serverless functions with Vercel would be great if you are looking to create Microservices and have multiple applications consume your API.
Supported Languages with Vercel include Node.js, Go, Python and Ruby. More info and examples on this from official docs here

How to install/use Vercel Serverless Functions
So if you feel Option 1 is the choice you are looking for here are some resources to get Started

A great step by step detailed blog post here written by TheHouseAVAX
A great Video Tutorial by James Perkins
Vercel's official documentation on Serveless functions here

Option2: Creating API routes with Next.js
Next.js API routes also give us the ability to create
serverless API routes and are pre configured to be the perfect backend companion to a Next.js app. Next.js is needed as a dependency for this.

Creating API routes with Next.js can be done by creating a folder called /api/ in the pages Directory (not root directory like for Option 1) and adding files to it. Any file inside the folder pages/api will be treated as an API endpoint.

These bundles are server side only and won't increase your client-side bundle size. So the API folder will never be shipped to your browser.

Caveats

They by default are same-origin only, meaning if your domain is https://mySite.com/, then requests from that domain ONLY can access your API. If you would like other apps (from other domains) to access this API it would be denied. You can customize such behaviour by wrapping the request handler with the CORS middleware meaning, we can allow some other trusted sites apart from http://myDifferentSite.com/ to access the API

How to use Next.js API Routes
Some resources for Option 2

The Next.js documentation is truly the gold standard here. It's concise, easy to digest and covers all options for you.
A free video tutorial on Egghead.io here

Similarities

The way the code is written for both these options is very similar so it's nice to have that consistency from both these options.
So you could choose either option and not have to relearn too much.

Conclusion

Under the hood both options (1 and 2) are the same: It's an abstraction over Lambda and other serverless functions that is meant to be a zero configuration service.
If the API you are building is exclusively for your Next.js Front-End companion App then Next.js API routes are the way to go. It is the perfect backend companion that by default restricts origin and is usable with middleware.
You could technically achieve the same result with both options but their configurations cater to different audiences / usecases.

Mobile Development with React Native

sushmeet sunger — Fri, 23 Sep 2022 04:48:38 +0000

Introduction

This react native tutorial should help you to get a high level understanding of how to begin or get started with Mobile Development with React Native.

There are two ways to get your React Native applications bootstrapped. The first way is to use Expo Managed App (we will get into what a managed app is later) and this is the easiest and most hassle free way to get started. The second way is to use React Native CLI and create a Bare App. This process is definitely more involved but gives a lot more control and access to libraries which might not be available via Expo.

Managed vs Bare Applications

Pros for Managed Apps

Managed Applications is the way to go if you would like expo to take care of everything for you. You only write Javascript or Typescript and expo helps with everything else from publishing your project, providing links to share with other people, and even releasing the Apps (IOS and Android) on the App store. Official Documentation describing the difference between them is here
Expo removes a lot of the tedious set up portions for you and provides you with a plethora of API's and Services that can be used to make your development process smoother.
You can easily share the Apps with anyone using Expo Go to get feedback during the development process. Once you publish your app with Expo, you will get a URL, which can be shared with anyone who has the Expo Go app installed and they can then view and run your application on their native devices. This is also possible for Bare Apps with Expo, albeit it requires a bit more work.

Cons for Managed Apps

Downsides to Managed Apps is some features and libraries are only available as React Native Modules and hence will not work with a Managed App from Expo. If you find yourself in this position there is a feature to eject from Expo.
Managed Apps are usually larger in size because of all the prepackaged libs that are associated with them so they do increase the size of your vanilla application. This could be a deterrent for some people with limited space on their devices.

Bare Applications (Expo)

Expo does give you the option of having bare apps and thus you get some support from expo, while also getting the freedom of using any libraries that use react native modules. Expo is usually a version behind on React native , but the benefits of that is they have a lot of testing before they upgrade to the latest offering from React Native.

Bare Apps with React Native CLI

This gets as close to bare metal as you can. You get to choose the libs you want so you application size will definitely be the smallest possible. You also get access to the latest features versions of React Native.

Installation

The official Documentation to install expo is available here and is extremely precise and detailed.
Install the expo cli

npm install -g expo-cli BootStrap a new project called AwesomeProject
expo init AwesomeProject

Install Options

Now using Expo CLI we will init a new expo project. You will have two options creating a bare project or a managed project.
Choose the Managed Options and proceed.
yarn start
Choose your platform IOS, Android or Web.

Common Installation Problems (with expo installation)

Ensure that you have the latest version of Xcode Running for IOS, and Android Studio if you are developing for Android.
When you yarn start and your App doesn't open up in the simulator and you get an error, then the first thing to try is open the simulator with Native IDE. So use Xcode and Open simulator or Android Studio and open simulator. Once that works then you can close Xcode / Android Studio. Now try starting you App again yarn start and choose IOS or Android, it should open up your simulator and you should see your App running

Conclusion

If you are new to React Native Mobile Development and are just looking to hit the ground running, then Expo Managed Apps is a great way to do that. They also provide a lot of services that enable you to release your code for both Apple and Google PlayStores.

However if you would like to use specific react native modules that don't have expo equivalents, and care about your application size, and just want more granular control, then you have Choice of having Bare Apps with expo or Just with React Native CLI.

Props Drilling and understanding React Context via them

sushmeet sunger — Sat, 08 Jan 2022 05:26:50 +0000

Introduction

If you pass props around to multiple components, where in some cases, the elements receiving them are not even using them, then you are prop drilling. It's like if you have 3 components A, B and C and you pass prop name from component <A name="Tony" /> to component <B />. But component B doesn't even use the name prop. It simply passes it on to component C where the prop is actually used.

Context API provided a mechanism to pass data through the component tree, without having the need to pass props manually down every level.

Let's begin with an example

import { useState } from "react";

const App = () => {
  const [input, setInput] = useState("");
  const inputHandler = (e) => setInput(e.target.value);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <label>Input </label>
      <input value={input} onChange={inputHandler} />
    </div>
  );
};

Here we have a simple input box, where you can enter some text.

Let's refactor this component so that the state and the onChange handler are passed from the App component to another component called InputStuff.

import { useState } from "react";

const InputStuff = ({ input, inputHandler }) => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <label>Input </label>
      <input value={input} onChange={inputHandler} />
    </div>
  );
};

const App = () => {
  const [input, setInput] = useState("");
  const inputHandler = (e) => setInput(e.target.value);

  return <InputStuff input={input} inputHandler={inputHandler} />;
};

The InputStuff needs a reference to the input and inputHandler state, so we're sending some props there. Let's refactor it once more to add another layer in our component tree.

import { useState } from "react";

const InputLabel = () => {
  return <label>Input </label>;
};

const InputDisplay = ({ input, inputHandler }) => {
  return <input value={input} onChange={inputHandler} />;
};

const InputStuff = ({ input, inputHandler }) => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <InputLabel />
      <InputDisplay input={input} inputHandler={inputHandler} />
    </div>
  );
};

const App = () => {
  const [input, setInput] = useState("");
  const inputHandler = (e) => setInput(e.target.value);

  return <InputStuff input={input} inputHandler={inputHandler} />;
};

CodeSandbox URL showing the above code here

Voila this is prop drilling. To get the input state and inputHandler handler to the right places, we have to drill props through the InputStuff component. The InputStuff component itself doesn't actually need those props to function, but we have to still accept them and forward those props because its children need them.

Props drilling has both pros and cons. In a contrived example like this we do not have much issues, but once you have deeper layers and need some props everywhere, we can take advantage of the React Context API.

Here is the above example using React Context API

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

const InputContext = createContext();

const InputLabel = () => {
  return <label>Input </label>;
};

const InputDisplay = () => {
  const { input, inputHandler } = useContext(InputContext);
  return <input value={input} onChange={inputHandler} />;
};

const InputStuff = ({ input, inputHandler }) => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <InputLabel />
      <InputDisplay input={input} inputHandler={inputHandler} />
    </div>
  );
};

const App = () => {
  const [input, setInput] = useState("");
  const inputHandler = (e) => setInput(e.target.value);

  return (
    <InputContext.Provider value={{ input, inputHandler }}>
      <InputStuff input={input} inputHandler={inputHandler} />
    </InputContext.Provider>
  );
};

Here is the codesandbox ex using Context API here

Conclusion

We understood props drilling and what the Context API are.
Props Drilling by itself is fine and is useful to trace the path of how data flows, and hence eventually make refactoring and changes easy although this can spiral out of hand quite easily
Context API can be used to share data that is considered global for React Components. It provides a mechanism to have props available at any level, without explicitly passing the props. It is ideally used for passing Theme, Locale to many components in an application.

Add Typescript to an existing NextJS Project in 5 mins

sushmeet sunger — Tue, 28 Dec 2021 02:54:44 +0000

Introduction

So your team and you have heard all the hype about Typescript and would like to add it to your existing NextJS project. Or you are a seasoned Typescript expert and want to introduce it at your current organization, so as to give everyone a chance to opt in and use Typescript and Javascript side by side. So how complicated is this and where do you start?

Process
Usually adding typescript to any project requires you to have a tsconfig.json, which sits at the root of a project.The tsconfig.json file specifies the root files and the compiler options required to compile the project.

Lets Do This

Create an empty file named tsconfig.json at the root of your project. You can do so by creating a new file in your editor or typing the following command



touch tsconfig.json

Now just run your Next application as usual with npm run dev or yarn dev
Once you do this, NextJS will try to help you for the rest of the installation process, which requires installing typescript and it's dependencies. Have a look at your terminal or server and copy and paste the command that is present.

With NPM

npm install --save-dev typescript @types/react @types/node

With Yarn

yarn add --dev typescript @types/react @types/node


This is what the auto-generated tsconfig.json should look like

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "/*.ts", "/*.tsx"],
"exclude": ["node_modules"]
}





> _Important_
 These are dev dependencies and are needed only in your development workflow but not while running your code.

**Tadaaa**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxrob5akitqbpyi9ldad.jpg)

- Now restart your server and you will see `next-env.d.ts` file created at the root of your server. This file ensures Next.js types are picked up by the TypeScript compiler. You cannot remove it or edit it as it can change at any time.
-  You will also see the `.tsconfig.json` file to be pre-populated for you.
- Now that you have typescript installed, you can start converting your `.js` files into `.tsx`, or just start creating new `.tsx` files. 
- TypeScript strict mode is turned off by default. When you feel comfortable with TypeScript, it's recommended to turn it on in your tsconfig.json. like so ` "strict": true`

**References**

-  [Official NextJS documentation](https://nextjs.org/docs/basic-features/typescript)
- [Github Example](https://github.com/vercel/next.js/tree/canary/examples/with-typescript)