Author: Learners Store

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.

error ‘@testing-library/react’ should be listed in the project’s dependencies, not devDependencies

This is an ESLint error

This error comes from the import/no-extraneous-dependencies rule, which expects any module you import in non-test code to be in the regular dependencies section, not in the devDependencies.

To fix this issue, we need to configure ESLint to allow this import. If the file which is throwing this error is only used in tests, update the ESLint configuration file (.eslintrc.js) as follows

rules: {
    'import/no-extraneous-dependencies': 'off'
}

Difference between map and flatmap in javascript with examples.

map() in JavaScript :

  1. map() method creates a new Array by applying a function to each element of the original Array.
  2. map() returns a new Array of the Same Length.
  3. map() does not modify the original Array.

Example of returning an Array : 

const array = [5, 10, 15, 20];
const newArray = array.map(n => n * 2);
console.log(newArray);

Output :

[ 10, 20, 30, 40 ]

Example of returning nested Array Structure :

const array = [5, 10, 15, 20];
const nestedArray = array.map(n => [n, n * 2]);
console.log(nestedArray);

Output : 

[ [ 5, 10 ], [ 10, 20 ], [ 15, 30 ], [ 20, 40 ] ]

Example with null / undefined values in the Array :

const array = ["Hello", null, "World", undefined];
const newArray = array.map(word => word ? [word] : []);
console.log(newArray);

Output :

[ [ 'Hello' ], [], [ 'World' ], [] ]

flatMap() in JavaScript :

  1. flatMap() method first maps each element using a function, then flattens the result by one level.
  2. Applies a function like map()
  3. flattens one level deep of nesting.
  4. useful to remove null/undefined from Array.

Example of returning an Array like map() :

const array = [5, 10, 15, 20];
const newArray = array.flatMap(n => n * 2);
console.log(newArray);

Output :

[ 10, 20, 30, 40 ]

Example of nested structure into a flat Array : 

const array = [5, 10, 15, 20];
const nestedArray = array.flatMap(n => [n, n * 2]);
console.log(nestedArray);

Output :

[ 5, 10, 10, 20, 15, 30, 20, 40 ]

Example with null / undefined values in the Array :

const array = ["Hello", null, "World", undefined];
const newArray = array.flatMap(word => word ? [word] : []);
console.log(newArray);

Ouput : 

[ 'Hello', 'World' ]

NOTE : flatMap() only flattens one level deep.