DEV Community: Ashwani Singh

XMLHttpRequest has been blocked by CORS policy:

Ashwani Singh — Sun, 02 Mar 2025 19:39:18 +0000

Error
"Access to XMLHttpRequest at 'http://localhost:5001/auth/register' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Solutions

This error occurs because your backend server (localhost:5001) is not allowing requests from your frontend (localhost:3000) due to CORS (Cross-Origin Resource Sharing) policy restrictions. To fix this, you need to configure your backend to allow requests from your frontend.

Fix for Node.js (Express) Backend

If you're using Express.js, install the cors package and configure it:

1. Install cors

Run this command in your backend project:

npm install cors

2. Update Your Backend Code

Modify your Express server code (index.js or server.js):

const express = require("express");
const cors = require("cors");

const app = express();

// Allow requests from frontend (localhost:3000)
app.use(cors({
    origin: "http://localhost:3000",
    methods: ["GET", "POST", "PUT", "DELETE"],
    allowedHeaders: ["Content-Type", "Authorization"]
}));

app.use(express.json());

// Your routes here...
app.post("/auth/register", (req, res) => {
    res.json({ message: "User registered successfully" });
});

app.listen(5001, () => {
    console.log("Server running on port 5001");
});

Alternative: Enable CORS for All Origins (Temporary)

For debugging purposes, you can allow all origins:

app.use(cors());

If Using Fetch in Frontend

Make sure your fetch request in React includes mode: 'cors':

fetch("http://localhost:5001/auth/register", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ username: "ashwani", password: "123456" }),
    mode: "cors"
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));

Time complexity

Ashwani Singh — Fri, 03 Jan 2025 07:30:14 +0000

O(1) (in the worst case): Given the page that a business's name is on and the business name, find the phone number.

O(1) (in the average case): Given the page that a person's name is on and their name, find the phone number.

O(log n): Given a person's name, find the phone number by picking a random point about halfway through the part of the book you haven't searched yet, then checking to see whether the person's name is at that point. Then repeat the process about halfway through the part of the book where the person's name lies. (This is a binary search for a person's name.)
Binary search is an example with complexity O(log n).

O(n): Find all people whose phone numbers contain the digit "5".

O(n): Given a phone number, find the person or business with that number.

O(n log n): There was a mix-up at the printer's office, and our phone book had all its pages inserted in a random order. Fix the ordering so that it's correct by looking at the first name on each page and then putting that page in the appropriate spot in a new, empty phone book.

For the below examples, we're now at the printer's office. Phone books are waiting to be mailed to each resident or business, and there's a sticker on each phone book identifying where it should be mailed to. Every person or business gets one phone book.

O(n log n): We want to personalize the phone book, so we're going to find each person or business's name in their designated copy, then circle their name in the book and write a short thank-you note for their patronage.

O(n2): A mistake occurred at the office, and every entry in each of the phone books has an extra "0" at the end of the phone number. Take some white-out and remove each zero.

O(n · n!): We're ready to load the phonebooks onto the shipping dock. Unfortunately, the robot that was supposed to load the books has gone haywire: it's putting the books onto the truck in a random order! Even worse, it loads all the books onto the truck, then checks to see if they're in the right order, and if not, it unloads them and starts over. (This is the dreaded bogo sort.)

O(nn): You fix the robot so that it's loading things correctly. The next day, one of your co-workers plays a prank on you and wires the loading dock robot to the automated printing systems. Every time the robot goes to load an original book, the factory printer makes a duplicate run of all the phonebooks! Fortunately, the robot's bug-detection systems are sophisticated enough that the robot doesn't try printing even more copies when it encounters a duplicate book for loading, but it still has to load every original and duplicate book that's been printed.

Simple Code Examples Of Various Big O Categories:

O(1) - Constant Time Examples:

Algorithm 1:
Algorithm 1 prints hello once and it doesn't depend on n, so it will always run in constant time, so it is O(1).

print "hello";
Algorithm 2:
Algorithm 2 prints hello 3 times, however it does not depend on an input size. Even as n grows, this algorithm will always only print hello 3 times. That being said 3, is a constant, so this algorithm is also O(1).

print "hello";
print "hello";
print "hello";
O(log(n)) - Logarithmic Examples:

Algorithm 3 - This acts like "log_2"
Algorithm 3 demonstrates an algorithm that runs in log_2(n). Notice the post operation of the for loop multiples the current value of i by 2, so i goes from 1 to 2 to 4 to 8 to 16 to 32 ...

for(int i = 1; i <= n; i = i * 2)
print "hello";
Algorithm 4 - This acts like "log_3"
Algorithm 4 demonstrates log_3. Notice i goes from 1 to 3 to 9 to 27...

for(int i = 1; i <= n; i = i * 3)
print "hello";
Algorithm 5 - This acts like "log_1.02"
Algorithm 5 is important, as it helps show that as long as the number is greater than 1 and the result is repeatedly multiplied against itself, that you are looking at a logarithmic algorithm.

for(double i = 1; i < n; i = i * 1.02)
print "hello";
O(n) - Linear Time Examples:

Algorithm 6
This algorithm is simple, which prints hello n times.

for(int i = 0; i < n; i++)
print "hello";
Algorithm 7
This algorithm shows a variation, where it will print hello n/2 times. n/2 = 1/2 * n. We ignore the 1/2 constant and see that this algorithm is O(n).

for(int i = 0; i < n; i = i + 2)
print "hello";
O(n*log(n)) - nlog(n) Examples:

Algorithm 8
Think of this as a combination of O(log(n)) and O(n). The nesting of the for loops help us obtain the O(n*log(n))

for(int i = 0; i < n; i++)
for(int j = 1; j < n; j = j * 2)
print "hello";
Algorithm 9
Algorithm 9 is like algorithm 8, but each of the loops has allowed variations, which still result in the final result being O(n*log(n))

for(int i = 0; i < n; i = i + 2)
for(int j = 1; j < n; j = j * 3)
print "hello";
O(n^2) - n squared Examples:

Algorithm 10
O(n^2) is obtained easily by nesting standard for loops.

for(int i = 0; i < n; i++)
for(int j = 0; j < n; j++)
print "hello";
Algorithm 11
Like algorithm 10, but with some variations.

for(int i = 0; i < n; i++)
for(int j = 0; j < n; j = j + 2)
print "hello";
O(n^3) - n cubed Examples:

Algorithm 12
This is like algorithm 10, but with 3 loops instead of 2.

for(int i = 0; i < n; i++)
for(int j = 0; j < n; j++)
for(int k = 0; k < n; k++)
print "hello";

Algorithm 13
Like algorithm 12, but with some variations that still yield O(n^3).

for(int i = 0; i < n; i++) for(int j = 0; j < n + 5; j = j + 2) for(int k = 0; k < n; k = k + 3) print "hello";

Summary

The above give several straight forward examples, and variations to help demonstrate what subtle changes can be introduced that really don't change the analysis. Hopefully it gives you enough insight

LeetCode Solutions (DSA)

Ashwani Singh — Fri, 03 Jan 2025 07:23:11 +0000

1. LeetCode Solutions (DSA) - Two Sum

1. Two Sum

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

You can return the answer in any order.

Example 1:

Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].
Example 2:

Input: nums = [3,2,4],**** target = 6
Output: [1,2]
Example 3:

Input: nums = [3,3], target = 6
Output: [0,1]

Result ->


let nums = [2,7,11,15];
let target = 9
let index = [];

function twoSum(nums, target){
  for(let i = 0; i<nums.length; i++){
    for (let j = i+1; j < nums.length; j++) {
      if((nums[i] + nums[j]) === target){
        index.push(i)
        index.push(j)
      }
    }
  }
}
twoSum(nums, target)
console.log(index)

let nums = [8,9, 4, 6, 2,7,11,15], target = 9;

function addTwoNumbers(nums){
  const numsToIndex = new Map();

  for (var i = 0; i < nums.length; i++) {
    const val = nums[i];
    const subs = target - val; 

    if(numsToIndex.has(subs)){
      return [numsToIndex.get(subs), i]
    }

    numsToIndex.set(val, i)

  }
}

console.log(addTwoNumbers(nums))

2. Add Two Numbers

You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.

You may assume the two numbers do not contain any leading zero, except the number 0 itself.

Input: l1 = [2,4,3], l2 = [5,6,4]
Output: [7,0,8]
Explanation: 342 + 465 = 807.
Example 2:

Input: l1 = [0], l2 = [0]
Output: [0]
Example 3:

Input: l1 = [9,9,9,9,9,9,9], l2 = [9,9,9,9]
Output: [8,9,9,9,0,0,0,1]

Result 1. ->

function AddTwoNumber(l1, l2){
  let arr = []
  let sum = Number(l1.join('')) + Number(l2.join(''));
  let str = String(sum).split('').reverse();
  for(let i=0; i<str.length; i++){
    arr.push(Number(str[i]))
  }
  return arr;
}

console.log(AddTwoNumber(l1, l2))

Result 2. ->

function AddTwoNumbers(l1, l2){
if(l1.length != l2.length){
  let length = (l1.length > l2.length) ? l1.length - l2.length : l2.length - l1.length;
  for(let j = 0 ; j < length; j++){
  (l1.length > l2.length) ? l2.push(0) : l1.push(0)
  }
}
  let carry = 0;
  let final = []
  for(let i = 0; i < l1.length; i++){
    let sum = l1[i] + l2[i] + carry;
    if(sum > 9){
      final.push(Math.floor(sum % 10));
      carry = Math.floor(sum/10);
    } else {
      final.push(sum)
      carry = 0;
    }
  }
  if(carry >= 1){
    final.push(carry)
  }
  return final;
};
AddTwoNumbers(l1, l2)

3. Palindrome Number

Given an integer x, return true if x is a palindrome, and false otherwise.

Example 1:

Input: x = 121
Output: true
Explanation: 121 reads as 121 from left to right and from right to left.
Example 2:

Input: x = -121
Output: false
Explanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore it is not a palindrome.
Example 3:

Input: x = 10
Output: false
Explanation: Reads 01 from right to left. Therefore it is not a palindrome.

Result 1. ->

let x = 121;
var isPalindrome = function (x) {
 return x < 0 ? false : x === +x.toString().split("").reverse().join('')
};
isPalindrome(x)
--------------------------xxxxxxxxxxxxxxxx-----------------------


let val = 121;
function isPalindrome(val){
  let str = Number(String(val).split('').reverse().join(''));
  if(str === val){
    return true;
  } else return false;
}
console.log(isPalindrome(val))

Result 2. ->

function isPalindrome(val){
let data = Array.from(String(val));
let arr = []
for(let i = data.length-1; i >= 0; i--){
  if(Number(data[i])){
  arr.push(Number(data[i]));
  } else {
    arr.push((data[i]));
  }
}
let out = arr.join('');
  if(out == val){
    return true;
  } else return false;
}
console.log(isPalindrome(val))

4. Roman to Integer

Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M.

Symbol Value
I 1
V 5
X 10
L 50
C 100
D 500
M 1000
For example, 2 is written as II in Roman numeral, just two ones added together. 12 is written as XII, which is simply X + II. The number 27 is written as XXVII, which is XX + V + II.

Roman numerals are usually written largest to smallest from left to right. However, the numeral for four is not IIII. Instead, the number four is written as IV. Because the one is before the five we subtract it making four. The same principle applies to the number nine, which is written as IX. There are six instances where subtraction is used:

I can be placed before V (5) and X (10) to make 4 and 9.
X can be placed before L (50) and C (100) to make 40 and 90.
C can be placed before D (500) and M (1000) to make 400 and 900.
Given a roman numeral, convert it to an integer.

Example 1:

Input: s = "III"
Output: 3
Explanation: III = 3.
Example 2:

Input: s = "LVIII"
Output: 58
Explanation: L = 50, V= 5, III = 3.
Example 3:

Input: s = "MCMXCIV"
Output: 1994
Explanation: M = 1000, CM = 900, XC = 90 and IV = 4.

Result :


var romanToInt = function (rom) {
    let modRoman = rom;
    let sum = 0;
    if (rom.includes('IV')) {
        modRoman = rom.replace('IV', '');
        sum = sum + 4;
    } if (rom.includes('IX')) {
        modRoman = modRoman.replace('IX', '');
        sum = sum + 9
    } if (rom.includes('XL')) {
        modRoman = modRoman.replace('XL', '')
        sum = sum + 40;
    } if (rom.includes('XC')) {
        modRoman = modRoman.replace('XC', '')
        sum = sum + 90;
    } if (rom.includes('CD')) {
        modRoman = modRoman.replace('CD', '')
        sum = sum + 400;
    } if (rom.includes('CM')) {
        modRoman = modRoman.replace('CM', '')
        sum = sum + 900;
    };
    let value = modRoman.split('');
    for (let i = 0; i < value.length; i++) {
        if (value[i] === 'I') {
            sum = sum + 1;
        } else if (value[i] === 'I') {
            sum = sum + 1;
        } else if (value[i] === 'V') {
            sum = sum + 5;
        } else if (value[i] === 'X') {
            sum = sum + 10;
        } else if (value[i] === 'L') {
            sum = sum + 50;
        } else if (value[i] === 'C') {
            sum = sum + 100;
        } else if (value[i] === 'D') {
            sum = sum + 500;
        } else if (value[i] === 'M') {
            sum = sum + 1000;
        }
    };
    return sum
};

Result.2

 let findInt = (Roman) =>{
    switch(Roman){
        case 'I': return 1;
        case 'V': return 5;
        case 'X': return 10;
        case 'L': return 50;
        case 'C': return 100;
        case 'D': return 500;
        case 'M': return 1000;

    }
 }
var romanToInt = function(s) {
    let result = 0;
    for(i = 0;i < s.length;i++){
        console.log(result, s[i], s[i+1])

        if(findInt(s[i]) < findInt(s[i+1])){
            result -= findInt(s[i]);
        }else{
            result +=findInt(s[i]);
        }
    }
       return result

};
console.log(romanToInt("MCMXCIV"))

Result - 4

function romanToInt(rom){
  let obj = {
    'I': 1,
    'V': 5,
    'X': 10,
    'L': 50,
    'C': 100,
    'D': 500,
    'M': 1000
  };
  let count = 0;
  for (var i = 0; i < rom.length; i++) {
    if(rom[i] + rom[i+1] === 'IV'){
      count += 4
      i++
    } else if(rom[i] + rom[i+1] === 'IX'){
      count += 9;
      i++
    } else if(rom[i] + rom[i+1] === 'XL'){
      count += 40;
      i++
    } else if(rom[i] + rom[i+1] === 'XC'){
      count += 90;
      i++
    } else if(rom[i] + rom[i+1] === 'CD'){
      count += 400;
      i++
    } else if(rom[i] + rom[i+1] === 'CM'){
      count += 900;
      i++
    } else if (obj.hasOwnProperty(rom[i])) {
      count = count + obj[rom[i]]
    }
    }
    return count;
  }

let obj = {
  'I': 1,
  'IV': 4,
  'V' : 5,
  'IX': 9,
  'X': 10,
  'XL': 40,
  'L': 50,
  'XC': 90,
  'C': 100,
  'CD': 400,
  'D': 500,
  'CM': 900,
  'M': 1000
}

function romanToIntegers(s){
    let count = 0;
  for (var i = 0; i < s.length; i++) {
    if(s[i] + s[i+1] === 'IV'){
      count = count + obj[s[i] + s[i+1]]; 
      i++
    } else if(s[i] + s[i+1] === 'IX'){
      count = count + obj[s[i] + s[i+1]]; 
      i++
    } else if(s[i] + s[i+1] === 'XL'){
      count = count + obj[s[i] + s[i+1]]; 
      i++
    } else if(s[i] + s[i+1] === 'XC'){
      count = count + obj[s[i] + s[i+1]]; 
      i++
    } else if(s[i] + s[i+1] === 'CD'){
      count = count + obj[s[i] + s[i+1]]; 
      i++
    } else if(s[i] + s[i+1] === 'CM'){
      count = count + obj[s[i] + s[i+1]]; 
      i++
    }
    else {
      count = count + obj[s[i]]
    }
  }
    return count;
}
console.log(romanToIntegers(s))

5. Count Characters

Javascript Practice Problems: Count Characters in String;

Results :


function findCountOfOcc(str){
  let obj = {};
  for(let i = 0; i < str.length; i++){
    let key = str[i]
    obj[key] = (obj[key] || 0) + 1;
  }
  return obj
}

console.log(findCountOfOcc("HelloWorld"));

function findCountOfOcc(str){
  let obj = {};
  for(let i in str){
    let key = str[i]
    obj[key] = (obj[key] || 0) + 1;
  }
  return obj
}

console.log(findCountOfOcc("HelloWorld"));

function findCountOfOcc(str){
  let obj = {};
  for(let key of str){
    if(obj[key]){
      obj[key] = obj[key] + 1
    } else obj[key] = 1
  }
  return obj
}

console.log(findCountOfOcc("HelloWorld"));

6. Longest Common Prefix

Write a function to find the longest common prefix string amongst an array of strings.

If there is no common prefix, return an empty string "".

Example 1:

Input: strs = ["flower","flow","flight"]
Output: "fl"
Example 2:

Input: strs = ["dog","racecar","car"]
Output: ""
Explanation: There is no common prefix among the input strings.

Result


let strs = ["flower","flow","flight"];

function toFindPrefix(strs){
  let srt = strs.sort();
  let firstEle = srt[0];
  let lastEle = srt[srt.length-1];
  let data = ''
  for(let i = 0; i < lastEle.length; i++){
    if(lastEle[0] === firstEle[0]){
      if(lastEle[i] === firstEle[i]){
      data = `${data + firstEle[i]}`
    } else break;
    }
  }
  return data;
}
toFindPrefix(strs);

7 Valid Parentheses

iven a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.

Open brackets must be closed by the same type of brackets.
Open brackets must be closed in the correct order.
Every close bracket has a corresponding open bracket of the same type.

Example 1: Input: s = "()" Output: true

Example 2: Input: s = "()[]{}" Output: true

Example 3: Input: s = "(]" Output: false

Example 4: Input: s = "([])" Output: true

function isValid(s){
  let arr = [];
  for(char of s){
    if(char === '(' || char === '{' || char === '['){
      arr.push(char)
    } else if(
      char === ')' && arr[arr.length - 1] === '(' ||
      char === '}' && arr[arr.length - 1] === '{' ||
      char === ']' && arr[arr.length - 1] === '['
      ) {
        arr.pop()
      } else {
        return false
      }
  }
  return arr.length === 0;
}
console.log(isValid(str))

var isValid = function (s) {
let obj = {
    '(': ')',
    '{': '}',
    '[':']'
  };
  if(
    s[0] === '(' && !s.includes(')') || 
    s[0] === '{' && !s.includes('}') || 
    s[0] === '[' && !s.includes(']') 
  ){
    return false;
  };
  let stack = [];
  for (var i = 0; i < s.length; i++) {
    if(obj[s[i]]){
      stack.push(s[i])
    } else {
      let pop = stack.pop();
      if(obj[pop] !== s[i]){
        return false
      }
    }
  }
  return stack.length === 0;
};

function isValid(str){
  let obj = {
  ')':'(',
  '}':'{',
  ']':'['
};

  let strVal = str.split("");
  let stack = [];

  if(obj[strVal[0]]) return false;

  for (var i = 0; i < strVal.length; i++) {
    if(strVal[i])

    if(!obj[strVal[i]]){
      stack.push(strVal[i])

    } else {
     // If it's a closing bracket, check if it matches the last 
        opened bracket.

      if (stack.length === 0 || stack[stack.length - 1] !== obj[strVal[i]]) {
        return false;
      }
      stack.pop()
    }
  }
    return (stack.length === 0) ? true : false

}
console.log(isValid(str))

Search Insert Position (binary search)

Given a sorted array of distinct integers and a target value, return the index if the target is found. If not, return the index where it would be if it were inserted in order.
You must write an algorithm with O(log n) runtime complexity.

Example 1:

Input: nums = [1,3,5,6], target = 5
Output: 2
Example 2:

Input: nums = [1,3,5,6], target = 2
Output: 1
Example 3:

Input: nums = [1,3,5,6], target = 7
Output: 4

Result - 1

let nums = [1,3,5,6], target = 2

function searchInsert(nums, target){
  let start = 0;
  let end = nums.length - 1;
  while(start <= end){
  let middle = Math.floor((start+end)/2);
    if(nums[middle] === target){
      return middle;
    } else if(nums[middle] < target){
      start = middle + 1;
    } else if (nums[middle] > target){
      end = middle - 1;
    }
  }
  return start
};

console.log(searchInsert(nums, target))

Result-2

let nums = [1,3,5,6], target = 5

function searchInsert(nums, target, start, end){
  if (start > end){
    return start;
  }
  let middle = Math.floor((start+end)/2);
  if(nums[middle] === target){
    return middle;
  } else if(nums[middle] < target){
    return searchInsert(nums, target, middle + 1, end)
  } else if (nums[middle] > target){
    return searchInsert(nums, target, start, middle-1)
  }
};

console.log(searchInsert(nums, target, 0, nums.length-1))

Kaprekar Number

Input : n = 45

Output : Yes
Explanation : 452 = 2025 and 20 + 25 is 45

Input : n = 13
Output : No
Explanation : 132 = 169. Neither 16 + 9 nor 1 + 69 is equal to 13

Input : n = 297

Output : Yes
Explanation: 2972 = 88209 and 88 + 209 is 297

Input : n = 10
Output : No
Explanation: 102 = 100. It is not a Kaprekar number even if
sum of 100 + 0 is 100. This is because of the condition that
none of the parts should have value 0.

let num = 9999 
// 9, 45, 55 99 297 703 999 2223 2728 4879 4950 5050 5292 7272 7777 9999 

function tocheckKarpekarNumber(num){
  let sq = num*num;
  let val = sq.toString().split("")
  let n = ''
  for(let i = 0; i < 5; i++){
    n = n + val[i];
    if((Number(n) + Number(val.slice(i+1).join("")) == num)){
      return true
    }
  }
  return false
}

Reverse String

Input
let str = "I Am Not String"

output = "g ni rtS toNmAI";

function reverseString(val){
  let arr = val.split(" ");
  console.log(arr)
  let newVal= [];
  let data = val.split("").reverse().join("").split(" ").join("").split("");
  for (var i = 0; i < data.length; i++) {
    let d = data.splice(0, arr[i].length).join("")
    newVal.push(d)
  }
  return newVal.join(" ")
}
console.log(reverseString(str))

Remove Duplicates from Sorted Array

Given an integer array nums sorted in non-decreasing order, remove the duplicates in-place such that each unique element appears only once. The relative order of the elements should be kept the same. Then return the number of unique elements in nums.

Example 1:

Input: nums = [1,1,2]
Output: 2, nums = [1,2,_]
Explanation: Your function should return k = 2, with the first two elements of nums being 1 and 2 respectively.
It does not matter what you leave beyond the returned k (hence they are underscores).
Example 2:

Input: nums = [0,0,1,1,1,2,2,3,3,4]
Output: 5, nums = [0,1,2,3,4,,,,,_]
Explanation: Your function should return k = 5, with the first five elements of nums being 0, 1, 2, 3, and 4 respectively.
It does not matter what you leave beyond the returned k (hence they are underscores).

✅ What does “in-place” mean?
It means you cannot use another array to store results. You must modify the given nums array directly, using constant extra memory (O(1)).

🧠 Approach (Two-pointer technique)
Use two pointers:

i → last index where a unique number was placed.

j → current index scanning the array.

Compare nums[j] with nums[i]:

If different: it’s a unique value → move i forward and assign nums[i] = nums[j].

function removeDuplicates(nums){
  if (nums.length === 0) return 0;
    let j = 0;
    for (var i = 0; i < nums.length; i++) {
    if(nums[i] !== nums[j]){
      j++
      nums[j] = nums[i]
      console.log(nums[j])
    }
  }
  return j+1
}
console.log(removeDuplicates(nums))

Find the Index of the First Occurrence in a String

Given two strings needle and haystack, return the index of the first occurrence of needle in haystack, or -1 if needle is not part of haystack.

Example 1:

Input: haystack = "sadbutsad", needle = "sad"
Output: 0
Explanation: "sad" occurs at index 0 and 6.
The first occurrence is at index 0, so we return 0.
Example 2:

Input: haystack = "leetcode", needle = "leeto"
Output: -1
Explanation: "leeto" did not occur in "leetcode", so we return -1.

let haystack = "sadbutsad", needle = "sad";

function strStr(haystack,needle){
  let arr = []
  let index = 0;
  let l = needle.length;
  for (var i = 0; i < haystack.length; i+=l) {
    let val = haystack.slice(i, i+l);
    arr.push(val);
  };
  return arr.indexOf(needle);
}

  console.log(strStr(haystack,needle));

function strStr(haystack,needle){
if (!haystack.length) return -1
    let val = haystack.indexOf(needle);
    return val
}

Remove Element

Given an integer array nums and an integer val, remove all occurrences of val in nums *in-place *

Example 1:

Input: nums = [3,2,2,3], val = 3
Output: 2, nums = [2,2,,]
Explanation: Your function should return k = 2, with the first two elements of nums being 2.
It does not matter what you leave beyond the returned k (hence they are underscores).
Example 2:

Input: nums = [0,1,2,2,3,0,4,2], val = 2
Output: 5, nums = [0,1,4,0,3,,,_]
Explanation: Your function should return k = 5, with the first five elements of nums containing 0, 0, 1, 3, and 4.
Note that the five elements can be returned in any order.
It does not matter what you leave beyond the returned k (hence they are underscores).

var removeElement = function(nums, val) {
    if(nums.length <= 0 ) return;
    let k = 0;
    for(let i = 0; i < nums.length; i++){
        if(nums[i] !== val){
            nums[k] = nums[i]
            k++
        }
    }
    return k;
};

Search Insert Position (Binary Search)

Given a sorted array of distinct integers and a target value, return the index if the target is found. If not, return the index where it would be if it were inserted in order.

You must write an algorithm with O(log n) runtime complexity.

Example 1:

Input: nums = [1,3,5,6], target = 5
Output: 2
Example 2:

Input: nums = [1,3,5,6], target = 2
Output: 1
Example 3:

Input: nums = [1,3,5,6], target = 7
Output: 4

var searchInsert = function(nums, target) {
      let start = 0;
  let end = nums.length - 1;
  while(start <= end){
  let middle = Math.floor((start+end)/2);
    if(nums[middle] === target){
      return middle;
    } else if(nums[middle] < target){
      start = middle + 1;
    } else if (nums[middle] > target){
      end = middle - 1;
    }
  }
  return start
};

Plus One

Increment the large integer by one and return the resulting array of digits.

Example 1:

Input: digits = [1,2,3]
Output: [1,2,4]
Explanation: The array represents the integer 123.
Incrementing by one gives 123 + 1 = 124.
Thus, the result should be [1,2,4].
Example 2:

Input: digits = [4,3,2,1]
Output: [4,3,2,2]
Explanation: The array represents the integer 4321.
Incrementing by one gives 4321 + 1 = 4322.
Thus, the result should be [4,3,2,2].
Example 3:

Input: digits = [9]
Output: [1,0]
Explanation: The array represents the integer 9.
Incrementing by one gives 9 + 1 = 10.
Thus, the result should be [1,0].

let digits = [4,3,2,9];

function addOnes(){
  for(let i = digits.length-1; i >= 0; i--){
  // check if the didgits is less then 9 then just add 1 and return

        if(digits[i] < 9){
            digits[i]++;
            return digits;
        };

  // If the digit is 9, set it to 0 (and carry over to the next)

        digits[i] = 0;
        console.log(digits,"pppp")

    }

  // If we finished the loop, it means all digits were 9 (e.g., 999)
  // So we need to add a 1 at the beginning

    digits.unshift(1);
    return digits;
}

console.log(addOnes(digits))

Add Binary

Given two binary strings a and b, return their sum as a binary string.

Example 1:

Input: a = "11", b = "1"
Output: "100"
Example 2:

Input: a = "1010", b = "1011"
Output: "10101"

Constraints:

1 <= a.length, b.length <= 104
a and b consist only of '0' or '1' characters.
Each string does not contain leading zeros except for the zero itself.

let a = "1010", b = "11111";

var addBinary = function(a, b) {
  a = a.split('').reverse().join("");
  b = b.split('').reverse().join("");

  let obj = {
    '0': 0,
    '1': 1,
    '2': 0,
    '3': 1
  };
  console.log(a, b)
  let carry = 0;
  let ans = '';



  let lenA = a.length, lenB = b.length;
  for (var i = 0; i < Math.max(lenA, lenB); i++) {

    let numA = i < lenA ? Number(a[i]) : 0
    let numB = i < lenB ? Number(b[i]) : 0

    let sum = numA + numB + carry;
    sum >= 2 ? carry = 1 : carry = 0;
    let c = `${sum}`;
    ans = ans + obj[c];
  }
  if(carry) return (ans + carry).split('').reverse().join('');
  return ans.split('').reverse().join('');
};

console.log(addBinary(a,b))

var addBinary = function(a, b) {
    let val1 = parseInt(a, 2);
    let val2 = parseInt(b, 2);

    let final = val1 + val2;
    return final.toString(2);
}
    console.log(addBinary(a,b))

Let’s solve the error of GROUP BY clause and contains nonaggregated column in MySQL

Ashwani Singh — Fri, 28 Jun 2024 14:38:03 +0000



SET GLOBAL sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''));

Higher Order Components (HOC) in React js

Ashwani Singh — Fri, 07 Jun 2024 08:02:04 +0000

A Higher-Order Component (HOC) is an advanced technique for reusing component logic. HOCs are not part of the React API, but rather a pattern that emerges from React’s compositional nature.

A higher-order component is a function that takes a component as an argument and returns a new component that wraps the original component
This allows you to add additional functionality to the component without modifying its original code. HOCs are commonly used to share common functionality between multiple components, such as state modification or props change.

1. Creating a Higher-Order Component:

import React from 'react';

// This is the HOC function
function withCounter(WrappedComponent) {
  class WithCounter extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        count: 0,
      };
    }

    handleIncrement = () => {
      this.setState((prevState) => {
        return { count: prevState.count + incremntNuber };
      });
    };
    render() {
      return (
        <WrappedComponent
          count={count}
          incrementHandler={this.handleIncrement}
          {...this.props}
        />
      );
    }
  }
return WithCounter;
}

2. Using the HOC:

// A simple component
function MyComponent(props) {
  return (
      <button onClick={props.incrementHandler}>
        {props.name} Click {props.count} times
      </button>
    );
}

// Wrap the component with the HOC
const EnhancedComponent = withCounter(MyComponent);

// Usage
function App() {
  return <EnhancedComponent name="Hello World!" />;
}

In this example, withCounter is the HOC that adds some extra information to the MyComponent component. When EnhancedComponent is used, it renders MyComponent with the original props along with the additional paragraph containing "Some extra information".

3. Key Points About HOCs:

Pure Functions: HOCs should be pure, meaning they should not modify the original component. Instead, they should create a new component that wraps the original one.

Props Proxy: HOCs can pass props to the wrapped component. This pattern is useful for injecting additional props or modifying existing ones before passing them down.

Composability: HOCs can be composed. You can create multiple HOCs and apply them to a component sequentially.

Convention: It's a common convention to name HOCs with a prefix like with, such as withRouter or withUser, to indicate that it's an HOC.

Static Methods: HOCs do not copy static methods from the wrapped component. If the wrapped component has static methods that need to be accessed, you’ll need to manually copy them.

Here’s an example of ensuring static methods are preserved:

import React from 'react';

// Helper function to copy static methods
function hoistStatics(targetComponent, sourceComponent) {
  const keys = Object.getOwnPropertyNames(sourceComponent);
  keys.forEach(key => {
    if (!targetComponent.hasOwnProperty(key)) {
      targetComponent[key] = sourceComponent[key];
    }
  });
  return targetComponent;
}

function withExtraInfo(WrappedComponent) {
  class HOC extends React.Component {
    render() {
      return (
        <div>
          <WrappedComponent {...this.props} />
          <p>Some extra information</p>
        </div>
      );
    }
  }

  // Copy static methods
  hoistStatics(HOC, WrappedComponent);

  return HOC;
}

Conclusion:

HOCs are a powerful pattern in React for reusing component logic, but they should be used judiciously to avoid overly complex component hierarchies.

Error Boundary in React js

Ashwani Singh — Sat, 01 Jun 2024 20:16:13 +0000

In React, an Error Boundary is a component that helps catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire application. This feature is particularly useful for improving the user experience by gracefully handling unexpected errors.

Key Concepts of Error Boundaries

1. Definition and Use:

Error boundaries are React components that catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

They do not catch errors for:

Event handlers (use try-catch in the event handler).
Asynchronous code (e.g., setTimeout or requestAnimationFrame callbacks).
Server-side rendering.
Errors thrown in the error boundary itself (e.g., inside componentDidCatch).

2. How to Create an Error Boundary:

An error boundary is any React component that implements either componentDidCatch lifecycle method or the static getDerivedStateFromError method.

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Error caught by ErrorBoundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

3. Using an Error Boundary:

<ErrorBoundary>
  <AppComponet />
</ErrorBoundary>

Best Practices

1. Granularity:

It's better to place error boundaries at the top level of your application to catch all errors, but you can also place them around specific components to isolate errors within specific parts of your app.

2. Logging:

Implement logging in componentDidCatch to send error details to an error monitoring service (e.g., Sentry, LogRocket).

3. Fallback UI:

Make sure the fallback UI is user-friendly and provides a way to recover from the error if possible (like a "Try Again" button).

Limitations.

1. Event Handlers:

Error boundaries do not catch errors inside event handlers. You need to handle those manually using try-catch blocks.

2. Async Code:

Errors in asynchronous code should be handled within the async functions using try-catch blocks.

Example in Functional Components

With the introduction of hooks, you might wonder about using error boundaries in functional components. As of now, React does not provide hooks for error boundaries. You must use class components for creating error boundaries.

In summary, React's Error Boundaries are a robust way to handle errors gracefully in your application, ensuring that users have a smooth experience even when something goes wrong.

What are portals in React and when do we need them ?

Ashwani Singh — Fri, 31 May 2024 07:06:29 +0000

In React 16.0 version, React portals were introduced. Portals in React come up with a way to render children components into a DOM node which typically occurs outside the DOM hierarchy of the parent component.

Before React Portals, It was very difficult to render the child component outside the hierarchy of its parent component. Every single React component in the React application falls under the root element.

But, the React portal concept provides us the ability to break out of this dom tree and render a component onto a dom node that is not under this root element. Doing so breaks the convention where a component needs to be rendered as a new element and follows a parent-child hierarchy. Portals are commonly used in modal dialog boxes, hover cards, loaders, and popup messages. Below is the syntax of React portals.

Syntax:

import ReactDOM from "react-dom";

// createPortal is a function of ReactDom, always import ReactDom 
// before using their property.

ReactDOM.createPortal(child, container)

Parameters:

child: It can be a React element, string, or fragment
container: It is a DOM node.

In the syntax above, we have two parameters the first parameter is a child that can be a React element, string, or fragment and the second one is a container which is the DOM node (or location) lying outside the DOM hierarchy of the parent component at which our portal is to be inserted.

Advantages of React Portals:

Event Bubbling inside a portal: Although we don’t render a portal inside the parent DOM element, its behavior is still similar to a regular React component inside the application. It can access the props and state as it resides inside the DOM tree hierarchy.
React portals can use Context API to transfer the data in components.

index.html

  <!-- Filename - public/index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon"
        href="%PUBLIC_URL%/favicon.ico" />

    <title>React App</title>
</head>

<body
    style="text-align: center; margin: auto;">

    <div id="root"></div>
    <div id="portal"></div>
   <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty 
      page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> 
      tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn 
      build`.
    -->
</body>

</html>

App.js

// Filname - App.js

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Portal extends Component {
    render() {
        // Creating portal
        return ReactDOM.createPortal(
            <button>Click</button>,
            document.getElementById("portal")
        );
    }
}

class App extends Component {
    constructor(props) {
        super(props);

        // Set initial state
        this.state = { click: "" };

        // Binding this keyword
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        // This will trigger when the button
        // inside Portal is clicked, It updates
        // Parent's state, even though it is not
        // rendered inside the parent DOM element
        if (this.state.click == "")
            this.setState((prevState) => ({
                click: "Welcome to Portal demo",
            }));
        else {
            this.setState({ click: "" });
        }
    }

    render() {
        return (
            <div onClick={this.handleClick}>
                <h1 style={{ color: "green" }}>
                    component which have id 
                                        "root"
                </h1>
                <h2 style={{ color: "Green" }}>
                    {this.state.click}
                </h2>
                <Portal />
            </div>
        );
    }
}

export default App;

When do we need React Portals ?

We mainly need portals when a React parent component has a hidden value of overflow property(overflow: hidden) or z-index style, and we need a child component to openly come out of the current tree hierarchy.

Following are the examples when we need the react portals:

Dialogs
Modals
Tooltips
Hovercards

In all these cases, we’re rendering elements outside of the parent components in the DOM tree.

Extract Array of object data in MySql DB

Ashwani Singh — Wed, 29 May 2024 10:23:50 +0000

// your_column = [{id: 1, name: "Tom", age: 30}];

SELECT * FROM your_table 
WHERE json_contains(your_column->'$[*].id', json_array("your_id_to_match"));

JavaScript Data Types

Ashwani Singh — Tue, 02 Apr 2024 07:14:52 +0000

1. Introduction

Computer programs generally deal with a lot of data. This data can be one of several types. Each type has its own purpose, utilities, and underlying mechanism of implementation.

In this chapter, we shall get an overview of the data types that JavaScript comes equipped with, out of the box.

We'll understand the distinction between primitive and object (non-primitive) types before moving on to explore the six most common primitive types and the three most common object types. Moreover, we'll also consider the typeof operator, used to inpsect the type of a given value.

2. What are data types?

A data type describes a set of values and the operations possible on those values.

JavaScript divides data essentially into two main categories: primitives and objects (non-primitives).

2.1 Primitive data types:
Primitive data types in JavaScript are predefined and built-in data types. They are simple and represent fundamental values. The primitive data types in JavaScript include:

String: Represents textual data and is enclosed in single quotes ('') or double quotes ("").
Number: Represents numeric values, including integers and floating-point numbers.
BigInt: Represents integers with arbitrary precision, allowing for the representation of extremely large numbers.
Boolean: Represents a logical value, either true or false.
Undefined: Represents a variable that has been declared but has not been assigned a value.
Null: Represents the intentional absence of any object value.
Symbol: Represents a unique and immutable value that can be used as an identifier for object properties.

2.2 Non-primitive data types:
On the other hand, non-primitive data types in JavaScript are derived from primitive data types. They are also known as reference data types or derived data types. Non-primitive data types include:

Object: Represents a collection of key-value pairs and can hold complex data structures.
Array: Represents an ordered list of values, accessible by their index.
Function: Represents a reusable block of code that performs a specific task.
Date: Represents a specific moment in time.
RegExp: Represents a regular expression, used for pattern matching within strings.
Error: Represents an error object that contains information about an error that occurred during the execution of code.

The main difference between primitive and non-primitive data types is that primitive data types are immutable, meaning their values cannot be changed, while non-primitive data types are mutable and can be modified.

Let's understand what is mutable and immutable meaning?

2.3 Mutable :
Mutable objects or variables can be modified or changed after they are created. This means that their state or value can be altered without creating a new object. Examples of mutable objects in JavaScript include arrays and objects.

let mutableArray = [1, 2, 3];
mutableArray.push(4); // Modifying the array by adding an element
console.log(mutableArray); // Output: [1, 2, 3, 4]

let mutableObject = { name: "John", age: 25 };
mutableObject.age = 26; // Modifying the object by changing the age property
console.log(mutableObject); // Output: { name: "John", age: 26 }

2.4 Immutable:

Immutable objects or variables, on the other hand, cannot be changed once they are created. Any attempt to modify their value will result in the creation of a new object with the updated value, while the original object remains unchanged. Examples of immutable objects in JavaScript include strings and numbers.

let immutableString = "Hello";
let newString = immutableString.toUpperCase(); // Creating a new string with modified value
console.log(immutableString); // Output: "Hello"
console.log(newString); // Output: "HELLO"

let immutableNumber = 5;
let newNumber = immutableNumber + 1; // Creating a new number with modified value
console.log(immutableNumber); // Output: 5
console.log(newNumber); // Output: 6

It's important to note that while primitive data types (such as strings and numbers) are immutable, objects (including arrays and custom objects) are mutable by default in JavaScript. However, you can use techniques like object freezing or immutability libraries to enforce immutability for objects if desired.

2.5 Dynamic and weak typing :
JavaScript is a dynamic language with dynamic types. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types:

let foo = 42; // foo is now a number
foo = "bar"; // foo is now a string
foo = true; // foo is now a boolean

JavaScript is also a weakly typed language, which means it allows implicit type conversion when an operation involves mismatched types, instead of throwing type errors.

const foo = 42; // foo is a number
const result = foo + "1"; // JavaScript coerces foo to a string, so it can be concatenated with the other operand
console.log(result); // 421

3. Primitive data types

In JavaScript, primitive data types are the most basic data types provided by the language. They are used to represent simple values and are not objects. Here are the primitive data types in JavaScript:

Number: Represents numeric values, including integers and floating-point numbers. For example: 10, 3.14.

String: Represents a sequence of characters enclosed in single or double quotes. For example: 'Hello', "JavaScript".

Boolean: Represents a logical value, either true or false. It is often used for conditional statements and comparisons.

Undefined: Represents a variable that has been declared but has not been assigned a value. If a variable is declared without initialization, its value is undefined.

Null: Represents the intentional absence of any object value. It is often used to indicate that a variable has no value or that an object does not exist.

Symbol: Represents a unique identifier. Symbols are often used as keys in objects to avoid naming conflicts.

BigInt: Represents integers with arbitrary precision. It can be used to store and perform operations on large numbers that exceed the limits of the Number type.

These primitive data types are immutable, meaning their values cannot be changed once they are created. Additionally, they do not have any methods or properties associated with them.

To understand more about and deep in primitive data type follow the below...

Full concept of Primitive data type

4. Non-Primitive data types

Non-primitive data types in JavaScript are derived from the primitive data types and are also known as reference data types or derived data types. These data types are stored in the heap memory of the system, unlike primitive data types which are stored in the stack space of the system.

In computer science, an object is a value in memory which is possibly referenced by an identifier. In JavaScript, objects are the only mutable values. Functions are, in fact, also objects with the additional capability of being callable.

4.1 Array

JavaScript arrays are written with square brackets.
Array items are separated by commas.
An array is a special variable, which can hold more than one value.
The following code declares (creates) an array called cars, containing three items (car names):

const cars = ["Saab", "Volvo", "BMW"];

Array indexes are zero-based, which means the first item is [0], second is [1], and so on.

You can also create an array, and then provide the elements:

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Accessing Array Elements:

You access an array element by referring to the index number:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

4.2 Objects

JavaScript objects are written with curly braces {}.
Objects are variables too. But objects can contain many values.
Object properties are written as name:value pairs, separated by commas.

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

The object (person) in the example above has 4 properties: firstName, lastName, age, and eyeColor.

Accessing Object Properties:

You can access object properties in two ways:

objectName.propertyName

objectName["propertyName"]

How is an array an 'object'?

As we know, arrays fall in the object category of JavaScript data types i.e they are stored by references and NOT by their actual values.

JavaScript simplifies the work of typeof by returning 'object' whenever the given expression is a reference to some data in memory.

An array is indeed a reference to an ordered bunch of data in memory and likewise translates to 'object' when inspected by the typeof operator.

5. Difference between primitive and non primitive datatypes

Note:-

It's important to note that non-primitive data types are stored in the heap memory of the system, while primitive data types are stored in the stack space of the system.

Primitive Data Types:

Predefined: Primitive data types are predefined (already defined) in JavaScript.
Simple: They are simple and basic data types.
Immutable: Primitive values are immutable, meaning they cannot be changed once created.
Stored by Value: Primitive values are stored directly in memory and accessed by their value.
Examples: Examples of primitive data types in JavaScript include numbers, strings, booleans, null, undefined, and symbols.

Non-Primitive Data Types:

Created by the Programmer: Non-primitive data types are created by the programmer and are not predefined in JavaScript (except for String).
Complex: They are more complex data types that can store collections or sets of data.
Mutable: Non-primitive values are mutable, meaning they can be modified after creation.
Stored by Reference: Non-primitive values are stored in memory as references and accessed by their reference.
Examples: Examples of non-primitive data types in JavaScript include objects, arrays, functions, and regular expressions.

JavaScript Non-Primitive Data Types

Ashwani Singh — Tue, 02 Apr 2024 07:01:09 +0000

Non-Primitive data types

Non-primitive data types in JavaScript are derived from the primitive data types and are also known as reference data types or derived data types. These data types are stored in the heap memory of the system, unlike primitive data types which are stored in the stack space of the system.

const arr = [1,3,4,5];
console.log(typeof arr); // object

const obj = {name:"nick" age: 30};
console.log(typeof obj) //object

1. Array

JavaScript arrays are written with square brackets.
Array items are separated by commas.
An array is a special variable, which can hold more than one value.
The following code declares (creates) an array called cars, containing three items (car names):

const cars = ["Saab", "Volvo", "BMW"];

Array indexes are zero-based, which means the first item is [0], second is [1], and so on.

You can also create an array, and then provide the elements:

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Accessing Array Elements:

You access an array element by referring to the index number:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

2. Objects

JavaScript objects are written with curly braces {}.
Objects are variables too. But objects can contain many values.
Object properties are written as name:value pairs, separated by commas.

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

The object (person) in the example above has 4 properties: firstName, lastName, age, and eyeColor.

Accessing Object Properties:

You can access object properties in two ways:

objectName.propertyName

objectName["propertyName"]

How is an array an 'object'?

As we know, arrays fall in the object category of JavaScript data types i.e they are stored by references and NOT by their actual values.

JavaScript simplifies the work of typeof by returning 'object' whenever the given expression is a reference to some data in memory.

An array is indeed a reference to an ordered bunch of data in memory and likewise translates to 'object' when inspected by the typeof operator.

3 Difference between Array and Object Data Types in JavaScript

In JavaScript, both arrays and objects are used to store and manipulate data, but they have some key differences. Let's explore these differences:

Arrays:

An array is a collection of data stored in a sequence of memory locations.
It can store various data types, including integers, floats, strings, and booleans .
Array elements can be accessed using index numbers, starting from 0.
Arrays are mutable, meaning you can add, remove, and modify elements in an array.
Arrays have built-in methods and properties that allow for easy manipulation and iteration, such as push(), pop(), length, and forEach() .

Objects:

An object is a mutable data structure used to represent a thing or entity.
It stores data in key-value pairs, where the keys can be any string or symbol except for undefined .

JavaScript Primitive Data Types

Ashwani Singh — Mon, 01 Apr 2024 15:01:28 +0000

In JavaScript, primitive data types are the predefined data types provided by the language itself. They are also known as in-built data types. JavaScript has seven primitive data types: Number, String, Boolean, Undefined, Null, Symbol, and BigInt

Primitive data types

We'll go over each of the primitive types one-by-one, starting with numbers.

Null

The null value represents the intentional absence of any object value. It is one of JavaScript's primitive values and is treated as falsy for boolean operations.

function getVowels(str) {
  const m = str.match(/[aeiou]/gi);
  if (m === null) {
    return 0;
  }
  return m.length;
}

console.log(getVowels('sky'));
// Expected output: 0

Syntax -> null

The value null is written with a literal: null. null is not an identifier for a property of the global object, like undefined can be. Instead, null expresses a lack of identification, indicating that a variable points to no object. In APIs, null is often retrieved in a place where an object can be expected but no object is relevant.

// foo does not exist. It is not defined and has never been initialized:

foo; //ReferenceError: foo is not defined

// foo is known to exist now but it has no type or value:
const foo = null;
foo; //null

Undefined

The Undefined type is inhabited by exactly one value: undefined.

Conceptually, undefined indicates the absence of a value, while null indicates the absence of an object (which could also make up an excuse for typeof null === "object"). The language usually defaults to undefined when something is devoid of a value:

A return statement with no value (return;) implicitly returns undefined.
Accessing a nonexistent object property (obj.iDontExist) returns undefined.
A variable declaration without initialization (let x;) implicitly initializes the variable to undefined.
Many methods, such as Array.prototype.find() and Map.prototype.get(), return undefined when no element is found.

null is used much less often in the core language. The most important place is the end of the prototype chain — subsequently, methods that interact with prototypes, such as Object.getPrototypeOf(), Object.create(), etc., accept or return null instead of undefined.

null is a keyword, but undefined is a normal identifier that happens to be a global property. In practice, the difference is minor, since undefined should not be redefined or shadowed.

Difference between null and undefined:-

When checking for null or undefined, beware of the differences between equality (==) and identity (===) operators, as the former performs type-conversion.

typeof null; // "object" (not "null" for legacy reasons)
typeof undefined; // "undefined"
null === undefined; // false
null == undefined; // true
null === null; // true
null == null; // true
undefined === undefined; // true
undefined == undefined; // true
!null; // true
Number.isNaN(1 + null); // false
Number.isNaN(1 + undefined); // true

Boolean

The Boolean type represents a logical entity and is inhabited by two values: true and false.

Boolean values are usually used for conditional operations, including ternary operators, if...else, while, etc.

Boolean primitives and Boolean objects

For converting non-boolean values to boolean, use Boolean as a function or use the double NOT operator. Do not use the Boolean() constructor with new.

const good = Boolean(expression); const good2 = !!expression; // you do use this!

const bad = new Boolean(expression); // don't use this!

This is because all objects, including a Boolean object whose wrapped value is false, are truthy and evaluate to true in places such as conditional statements. (See also the boolean coercion section below.)

console.log(typeof new Boolean()) // object

console.log(new Boolean()) // [Boolean: false]

console.log(new Boolean(true)) // [Boolean: true]

if (new Boolean(true)) {
  console.log("This log is printed.");
}
// This log is printed.

if (new Boolean(false)) {
  console.log("This log is ALSO printed.");
}
//This log is ALSO printed.

if (new Boolean()) {
  console.log("This log is also printed.");
}
// This log is ALSO printed.

const myFalse = new Boolean(false); // myFalse is a Boolean object (not the primitive value false)
const g = Boolean(myFalse); // g is true
const myString = new String("Hello"); // myString is a String object
const s = Boolean(myString); // s is true

Boolean coercion

Many built-in operations that expect booleans first coerce their arguments to booleans. The operation can be summarized as follows:

undefined turns into false.
null turns into false.
0, -0, and NaN turn into false; other numbers turn into true.
0n turns into false; other BigInts turn into true.
The empty string "" turns into false; other strings turn into true.
Symbols turn into true.
All objects become true.

Note: A legacy behavior makes document.all return false when used as a boolean, despite it being an object. This property is legacy and non-standard and should not be used.

Note: Unlike other type conversions like string coercion or number coercion, boolean coercion does not attempt to convert objects to primitives.

In other words, there are only a handful of values that get coerced to false — these are called falsy values. All other values are called truthy values. A value's truthiness is important when used with logical operators, conditional statements, or any boolean context.

There are two ways to achieve the same effect in JavaScript.

Double NOT: !!x negates x twice, which converts x to a boolean using the same algorithm as above.

The Boolean() function: Boolean(x) uses the same algorithm as above to convert x.

Note that truthiness is not the same as being loosely equal to true or false.

if ([]) {
  console.log("[] is truthy");
}
if ([] == false) {
  console.log("[] == false");
}
// [] is truthy
// [] == false

Creating Boolean objects with an initial value of false

const bNoParam = new Boolean(); // [Boolean: false]
const bZero = new Boolean(0); // [Boolean: false]
const bNull = new Boolean(null); // [Boolean: false]
const bEmptyString = new Boolean(""); // [Boolean: false]
const bfalse = new Boolean(false); // [Boolean: false]

Creating Boolean objects with an initial value of true

const btrue = new Boolean(true); // [Boolean: true]
const btrueString = new Boolean("true"); // [Boolean: true]
const bfalseString = new Boolean("false"); // [Boolean: true]
const bSuLin = new Boolean("Su Lin"); // [Boolean: true]
const bArrayProto = new Boolean([]); // [Boolean: true]
const bObjProto = new Boolean({}); // [Boolean: true]

Number type

The number type represents both integer and floating point numbers.

JavaScript has only one type of number, which is a 64-bit floating-point number. This means that JavaScript numbers are always stored as double precision floating-point numbers, following the international IEEE 754 standard.

let x = 3.14;    // A number with decimals
let y = 3;       // A number without decimals

Extra large or extra small numbers can be written with scientific (exponent) notation:

let x = 123e5;    // 12300000
let y = 123e-5;   // 0.00123

Integer Precision :-

Integers (numbers without a period or exponent notation) are accurate up to 15 digits.

let x = 999999999999999;   
let y = 9999999999999999;   

console.log(x); // 999999999999999
console.log(y); // 10000000000000000

Floating Precision :-
Floating point arithmetic is not always 100% accurate:

let x = 0.2 + 0.1; 
console.log(x) // 0.30000000000000004

let y = (0.2*10 + 0.1*10) / 10;
console.log(y) //0.3

Adding Numbers and Strings:-

Note-
JavaScript uses the + operator for both addition **and **concatenation.
Numbers are added. Strings are concatenated.

let x = 10;
let y = 20;
let z = x + y; // 30

let x = "10";
let y = "20";
let z = x + y;  // 1020

If you add a number and a string, the result will be a string concatenation:

let x = "10";
let y = 20;
let z = x + y; // 1020

Note:- A common mistake is to expect in this below result to be 30.

let x = 10;
let y = 20;
let z = "The result is: " + x + y; // The result is: 1020

Note:- A common mistake is to expect in this below result to be 102030:

let x = 10;
let y = 20;
let z = "30";
let result = x + y + z; // 3030

Note:-
The JavaScript interpreter works from left to right.
First 10 + 20 is added because x and y are both numbers.
Then 30 + "30" is concatenated because z is a string.

Numeric Strings:-

JavaScript strings can have numeric content:

let x = 100; // x is a number
let y = "100"; // y is a string

JavaScript will try to convert strings to numbers in all numeric operations:

let x = "100";
let y = "10";
let z = x / y;
console.log(z) // 10

let x = "100";
let y = "10";
let z = x * y;
console.log(z) // 1000

let x = "100";
let y = "10";
let z = x - y;
console.log(z) // 90

The below will not work because JavaScript uses the + operator to concatenate the strings.

let x = "100";
let y = "10";
let z = x + y; //10010

NaN - Not a Number:-

NaN is a JavaScript reserved word indicating that a number is not a legal number.
Trying to do arithmetic with a non-numeric string will result in NaN (Not a Number):

let x = 100 / "Apple"; 
console.log(x) // Nan

However, if the string is numeric, the result will be a number:

let x = 100 / "10";
console.log(x) // 10

You can use the global JavaScript function isNaN() to find out if a value is a not a number:

let x = 100 / "Apple";
let y = isNaN(x);
console.log(y) // true

In the below example, If you use NaN in a mathematical operation, the result will also be NaN:
Or the result might be a concatenation like NaN5:

let x = NaN;
let y = 5;
let z = x + y;
console.log(z) // NaN

let x = NaN;
let y = "5";
let z = x + y;
console.log(z) // NaN5

NaN is a number: typeof NaN returns number:

console.log(typeof NaN) // number

Infinity :-

Infinity (or -Infinity) is the value JavaScript will return if you calculate a number outside the largest possible number.

let myNumber = 2;
// Execute until Infinity
while (myNumber != Infinity) {
  myNumber = myNumber * myNumber;
}
console.log(myNumber) // Infinity

Division by 0 (zero) also generates Infinity:

let x =  2 / 0;
let y = -2 / 0;

Note:- -Infinity is a number: typeof Infinity returns number.

console.log(typeof Infinity) // number

Hexadecimal:-

JavaScript interprets numeric constants as hexadecimal if they are preceded by 0x.

let x = 0xFF;
console.log(x) // 255

Never write a number with a leading zero (like 07).
Some JavaScript versions interpret numbers as octal if they are written with a leading zero.

By default, JavaScript displays numbers as base 10 decimals.
But you can use the toString() method to output numbers from base 2 to base 36.
Hexadecimal is base 16. Decimal is base 10. Octal is base 8. Binary is base 2.

let myNumber = 32;
myNumber.toString(32);
myNumber.toString(16);
myNumber.toString(12);
myNumber.toString(10);
myNumber.toString(8);
myNumber.toString(2);

JavaScript Numbers as Objects:-

Normally JavaScript numbers are primitive values created from literals:

let x = 123;
let y = new Number(123);

console.log(x, y, typeof y) //123, [Number: 123], object

Do not create Number objects.

The new keyword complicates the code and slows down execution speed.

Number Objects can produce unexpected results:

let x = 500;
let y = new Number(500);
console.log(x == y) // true
console.log(x === y) // false

let a = new Number(500);
let b = new Number(500);

console.log(a == b) // true
console.log(a === b) // false

Comparing two JavaScript objects always returns false.

BigInt type

JavaScript BigInt variables are used to store big integer values that are too big to be represented by a normal JavaScript Number.

JavaScript Integer Accuracy

JavaScript integers are only accurate up to 15 digits:
let x = 999999999999999;
let y = 9999999999999999;

In JavaScript, all numbers are stored in a 64-bit floating-point format (IEEE 754 standard).
With this standard, large integer cannot be exactly represented and will be rounded.
Because of this, JavaScript can only safely represent integers: Up to 9007199254740991 +(253-1) and Down to -9007199254740991 -(253-1).
Integer values outside this range lose precision.

How to Create a BigInt

To create a BigInt, append n to the end of an integer or call BigInt():

let x = 9999999999999999;
let y = 9999999999999999n;

console.log(x) //10000000000000000
console.log(y) //9999999999999999n

let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)

console.log(x) //1234567890123456789012345n
console.log(y) //1234567890123456824475648n

let x = BigInt(999999999999999);
let type = typeof x;

console.log(x) //999999999999999n
console.log(type) //bigint

the JavaScript typeof a BigInt is "bigint":

String type

A string in JavaScript must be surrounded by quotes.

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

In JavaScript, there are 3 types of quotes.

Double quotes: "Hello".
Single quotes: 'Hello'.
Backticks: Hello.

Double and single quotes are “simple” quotes. There’s practically no difference between them in JavaScript.

Backticks are “extended functionality” quotes. They allow us to embed variables and expressions into a string by wrapping them in ${…}, for example:

let name = "John";

// embed a variable
alert( `Hello, ${name}!` ); // Hello, John!

// embed an expression
alert( `the result is ${1 + 2}` ); // the result is 3

The expression inside ${…} is evaluated and the result becomes a part of the string. We can put anything in there: a variable like name or an arithmetical expression like 1 + 2 or something more complex.

Please note that this can only be done in backticks. Other quotes don’t have this embedding functionality!

alert( "the result is ${1 + 2}" ); 
// the result is ${1 + 2} (double quotes do nothing)

Template Strings:

Templates were introduced with ES6 (JavaScript 2016).
Templates are strings enclosed in backticks (This is a template string).
Templates allow single and double quotes inside a string:

let text = `He's often called "Johnny"`;

String Length:
To find the length of a string, use the built-in length property:

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length; //26

Escape Characters:

Because strings must be written within quotes, JavaScript will misunderstand this string:

let text = "We are the so-called "Vikings" from the north.";
console.log(text);
// SyntaxError: Unexpected identifier

To solve this problem, you can use an backslash escape character.
The backslash escape character () turns special characters into string characters:

Code Result Description
\' ' Single quote
\" " Double quote
\ \ Backslash

let text = "We are the so-called \"Vikings\" from the north.";
console.log(text); // We are the so-called "Vikings" from the north.

let text= 'It\'s alright.';
let text = "The character \\ is called backslash.";

Six other escape sequences are valid in JavaScript:

Code Result
\b Backspace
\f Form Feed
\n New Line
\r Carriage Return
\t Horizontal Tabulator
\v Vertical Tabulator

JavaScript Strings as Objects:

Normally, JavaScript strings are primitive values, created from literals:

strings can also be defined as objects with the keyword new:

let x = "John";
let y = new String("John");

Note:-

Do not create Strings objects.
The new keyword complicates the code and slows down execution speed.
String objects can produce unexpected results:

let x = "John"; //john
let y = new String("John"); //[String: 'John']
console.log(x == y) //true
console.log(x === y) //false
console.log(typeof x) //string
console.log(typeof y) //object

let x = new String("John");
let y = new String("John");
console.log(x == y) //false
console.log(x === y) //false
console.log(typeof y) //object

Symbol type

A Symbol is a unique and immutable primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called "atoms". The purpose of symbols is to create unique property keys that are guaranteed not to clash with keys from other code.

To create a new primitive Symbol, you write Symbol() with an optional string as its description:

const sym1 = Symbol();
const sym2 = Symbol("foo");
const sym3 = Symbol("foo");

console.log(sym1) //Symbol()
console.log(sym2) //Symbol(foo)
console.log(sym3) //Symbol(foo)

The above code creates three new Symbols. Note that Symbol("foo") does not coerce the string "foo" into a Symbol. It creates a new Symbol each time:

const sym2 = Symbol("foo");
const sym3 = Symbol("foo");

console.log(sym2 === sym3) // false
console.log(sym2 == sym3) //false

Note:-
Symbols are the only primitive data type that has reference identity (that is, you cannot create the same symbol twice).

const sym = Symbol("foo");
typeof sym; // "symbol"

Integrating Nodemailer in a Node.js Project

Ashwani Singh — Tue, 19 Mar 2024 15:13:15 +0000

Integrating Nodemailer in a Node.js Project

To integrate Nodemailer in a Node.js project, you can follow these steps:

1. Install Nodemailer

npm install nodemailer --save

This will install Nodemailer and add it to your project's dependencies .

2. Set Up Nodemailer in Your Project:

After installing Nodemailer, you can include it in your Node.js application using the following code:

var nodemailer = require('nodemailer');

If you are using ES modules, you can use the import statement instead .

3. Create a Transporter:

Use the createTransport method to create a transporter for sending emails. You can specify the email service (e.g. Gmail, outlook, aws ses ect.) and provide authentication details:

var transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'youremail@gmail.com',
    pass: 'yourpassword'
  }
});

-------------------------or--------------------------
var transporter = nodemailer.createTransport({
        service: "Outlook365",
        host: "smtp.office365.com",
        port: "587",
        auth: {
         user: 'youremail@gmail.com',
         pass: 'yourpassword',
        },
        requireTLS: true,
      });

Replace 'youremail@gmail.com' with your email address and 'yourpassword' with your email password .

4. Send an Email:

Once the transporter is set up, you can use it to send an email. Here's an example of how to send a simple email:

var mailOptions = {
  from: 'youremail@gmail.com',
  to: 'recipient@example.com',
  subject: 'Subject of the Email',
  text: 'Body/template of the Email'
};

transporter.sendMail(mailOptions, function(error, info) {
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});

Replace 'youremail@gmail.com' with your email address, 'recipient@example.com' with the recipient's email address, and provide the subject and body of the email as needed .

These steps outline the process of integrating Nodemailer in a Node.js project and sending emails using Nodemailer and Gmail/outlook/aws ect. Remember to handle sensitive information such as email credentials securely in your project.

Conclusion

If you want to make you gmail/outlook will able to send email through code, you will also need to provide authentication of nodemailer in setting of gmail/aws/outlook etc.

For best practice, put all the credential in .env file, and call it in the function to make active.

e.g:

.env file

SMTP_PASS = xxxxxxxx
SMTP_HOST = amazonaws.com / gmail / office365.com
STMP_PORT = 5187
FROM_Email = youremail@gmail.com

create an export function to call when send an mail.

export function mailSend(email_id, otp) {

    let mailTransporter = nodemailer.createTransport({
        service: 'aws',
        host: process.env.SMTP_HOST,
        auth: {
            user: process.env.SMTP_USER_NAME,
            pass: process.env.SMTP_PASS
        }
    });

    let mailDetails = {
        from: process.env.FROM_Email,
        to:   `${email_id}`,
        subject: 'Otp send by Team',
        text : `OTP is ${otp}`

    };

    mailTransporter.sendMail(mailDetails, function(err, data) {
        if(err) {
            console.log('Error Occurs', err);
        } else {
            console.log('Email sent successfully');
        }
    });
}

Call mailSend function when you want to initiate nodemailer to send otp.

mailSend(email_id, '983844');