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

Showing Greeting Message using ReactJS

In ReactJS, To Display Personalized Greeting message (like “Good Morning”, “Good Afternoon” ) based on the current time, we need to follow the following code.

import React, { useEffect, useState } from 'react';
import { Typography } from '@mui/material';

const Greeting = ({ user }) => {
    const [greeting, setGreeting] = useState('');
    const [color, setColor] = useState('');

    const updateGreeting = () => {
        const hour = new Date().getHours();

        if (hour < 12) {
            setGreeting('Good Morning');
            setColor('#FFA726');
        } else if (hour < 17) {
            setGreeting('Good Afternoon');
            setColor('#29B6F6');
        } else if (hour < 20) {
            setGreeting('Good Evening');
            setColor('#9AB7BC');
        } else {
            setGreeting('Good Night');
            setColor('#0FFDE4');
        }
    };

    useEffect(() => {
        updateGreeting();
        const interval = setInterval(updateGreeting, 60 * 1000);
        return () => clearInterval(interval);
    }, []);

    return (
        <Typography variant="h6">
            <span style={{ color, fontWeight: 500 }}>{greeting}</span>{' '}
            <span>{user.name || user.role}</span>
        </Typography>
    );
};

export default Greeting;

const [greeting, setGreeting] = useState(”) ==> This holds the current Greeting string (like “Good Morning”, “Good Afternoon” ).

const [color, setColor] = useState(”) ==> This holds the current color for the Greeting Text.

const hour = new Date().getHours() ==> Gives current hour. Based on the current hour, it will compare with 12, 17, 20 and sets different greeting message and associated color.

useEffect() ==> For the first render calls updateGreeting(), and displays the Greeting message. Then we used setInterval(updateGreeting, 60 * 1000), to update the Greeting message for every 1 minute. Finally this line return () => clearInterval(interval), cleans up the interval when the component unmounts to prevent the memory leaks.