Author: Learners Store

How to convert first letter of the word to UpperCase in JavaScript ?

We can convert the first letter of the word to uppercase by using chatAt and slice methods as follows.

let word = "hello";

console.log(word.charAt(0).toUpperCase() + word.slice(1));

Output: Hello

Here, charAt(0).toUpperCase will convert the first letter of the word to uppercase and word.slice(1) will return the remaining characters of the word except first letter.

How to call Multiple Apis on the same page or component using createBrowserRouter ?

If we want to call multiple APIs when loading a particular page or component using createBrowserRouter, the best place to do that is in the loader function of the route.

Genarally we use createBrowserRouter as follows.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Dashboard from 'Components/Dashboard';
import dashboardLoader from 'loaders/dashboardLoader';


const App = () => {
     
    const router = createBrowserRouter([
         {
          path: "/dashboard",
          element: <Dashboard />,
          loader: dashboardLoader,
         }
   ])

    return <RouterProvider router={router} />
}

Here in the above example, the best place to call multiple APIs is dashboardLoader. In the similar way we use a loader of any specific page where we will call required number of API calls.

How to find smallest number with the highest frequency in the array ? – JavaScript

We have multiple approaches to find smallest number with the highest frequency.

1. Using Object.entries : 

const arr = [1, 3, 3, 4, 2, 3, 2, 5, 1, 4, 2];

const result = Object.entries(arr.reduce((acc, val) => {
    acc[val] = (acc[val] || 0) + 1;
    return acc
}, {})).reduce((a, b) => b[1] > a[1] || (b[1] === a[1] && Number(b[0]) < Number(a[0])) ? b : a)[0]

console.log(Number(result));

Output: 2

Explaination:

We got output as 2 because 2 appeared three times (2’s frequency is three). for 3 also we are having frequency three. But we need to find the smallest number with the highest frequency. So Answer is 2.

arr.reduce((acc, val) => {
    acc[val] = (acc[val] || 0) + 1;
    return acc
}, {})

Above code gives output as { ‘1’: 2, ‘2’: 3, ‘3’: 3, ‘4’: 2, ‘5’: 1 }. Here this object is in the form of key, value pairs, Where Keys are the given numbers in the array and values are their counts. acc[val] || 0 returns undefined values as 0 and + 1 increments the count.

When we wrap the above code inside Object.entries, it returns an Array of arrays as follows. [ [ ‘1’, 2 ], [ ‘2’, 3 ], [ ‘3’, 3 ], [ ‘4’, 2 ], [ ‘5’, 1 ] ]

Finally we are finding highest frequency. If multiple numbers have the same frequency then we are choosing the smallest number by applying the reduce method. 

const arr = [1, 3, 3, 4, 2, 3, 2, 5, 1, 4, 2];

const result = Object.entries(arr.reduce((acc, val) => {
    acc[val] = (acc[val] || 0) + 1;
    return acc
}, {})).reduce((a, b) => b[1] > a[1] || (b[1] === a[1] && Number(b[0]) < Number(a[0])) ? b : a)

console.log(result);

Output : [ '2', 3 ]

Above code gives output as [ ‘2’, 3 ]. From here we need to extract the value 2. So we are using [0]. and it will give ‘2’ and then finally we are converting string to number by using console.log(Number(result)).

2. Using step by step Approach : 

const arr = [1, 3, 3, 4, 2, 3, 2, 5, 1, 4, 2];

let freq = {};
for(let num of arr) {
    freq[num] = (freq[num] || 0) + 1;
}

let maxFreq = Math.max(...Object.values(freq));

let result = Math.min(...Object.keys(freq).filter(key => freq[key] === maxFreq).map(Number))


console.log(result);

Output: 2

The following code counts frequency and gives this output : { ‘1’: 2, ‘2’: 3, ‘3’: 3, ‘4’: 2, ‘5’: 1 }

let freq = {};
for(let num of arr) {
    freq[num] = (freq[num] || 0) + 1;
}

Next we will find max frequency which is 3 with the following line of code

let maxFreq = Math.max(...Object.values(freq));

Finally we will filter by max frequency and find smallest number with the following code.

let result = Math.min(...Object.keys(freq).filter(key => freq[key] === maxFreq).map(Number))

Error creating ./public/runtime-env.js: Error: Could not generate runtime config. Check your .env format! error command failed with exit code 1.

This Error usually occurs when you have issues in your .env file and try to run npm start or yarn start.

We need to take care of the following things to fix the above error.

  1. Ensure .env file not empty.
  2. Ensure correct Key, Value format.
  3. No Duplicate Keys.
  4. No unnecessary spaces, quotes.

Explain JavaScript Call() method with Examples.

  • The Call method is a predefined javaScript method.
  • In JavaScript, the call method is used to invoke(call) a function with a specified this context and arguments provided individually.

Example 1 : (Using Call() method to invoke a function and specifying the this value )

function greeting() {
    console.log(this.greet, "learnersstore.com");
}

const obj1 = {
    greet: 'Hi'
}

const obj2 = {
    greet: 'Hello'
}

greeting.call(obj1);
greeting.call(obj2);

Output : 

Hi learnersstore.com
Hello learnersstore.com

Example 2 : (Using Call() method to invoke a function without first argument)

function greeting() {
    console.log(this.greet, "learnersstore.com");
}

const obj1 = {
    greet: 'Hi'
}


greeting.call();

Output :

undefined learnersstore.com

Note: If we are omitting the first parameter, then it returns undefined.

Example 3 : (Using Call() method to invoke a function without first argument But with globalThis)

globalThis.greet = "Hello";

function greeting() {
    console.log(this.greet, "learnersstore.com");
}

const obj1 = {
    greet: 'Hi'
}

greeting.call();

Output: 

Hello learnersstore.com

Example 4 : (Using Call() method to invoke a function with multiple arguments)

function display(name, age) {
    console.log(`Name : ${name}, Age: ${age}, Location: ${this.location}`);
}

const obj1 = {
    location: 'India',
}

display.call(obj1, "Smith", 26);

Output :

Name : Smith, Age: 26, Location: India