let, var and const variables in JavaScript or ReactJS

In ReactJS, the differences between let, var, and const variables are the same as in JavaScript. Here's a brief explanation of each:  

   

1. let: The let keyword declares a block-scoped variable that can be reassigned. It allows you to define variables that are limited in scope to the block, statement, or expression in which they are used. For example, you can use let variables inside loops or conditional statements.  

   Examples:

let lx;

jsvariables(lx)

function jsvariables(lx) {
    
    console.log(lx)
}

console.log(lx);


//Output

undefined
undefined

let lx = 5;

jsvariables(lx)

function jsvariables(lx) {
    lx = 7;
    console.log(lx)
}

console.log(lx);


//Output

7
5

let lx = 5;

jsvariables(lx)

function jsvariables(lx) {
    let lx = 7;
    console.log(lx)
}

console.log(lx);


//Output

let lx = 7;
        ^

SyntaxError: Identifier 'lx' has already been declared

jsvariables()

function jsvariables() {
    let lx = 7;
    console.log(lx)
}

console.log(lx);


//Output

7

console.log(lx);
            ^

ReferenceError: lx is not defined

2. var: The var keyword declares a function-scoped variable that can be reassigned. It is the older way of declaring variables in JavaScript before the introduction of let and const. Unlike let, var declarations are not limited to the block scope but rather to the function scope. This means that var variables are accessible anywhere within the function in which they are declared.  

   Examples:

var vx =12;

jsvariables(vx)

function jsvariables(vx) {
    console.log(vx)
}

console.log(vx);


//Output

12
12

var vx = 12;

jsvariables(vx)

function jsvariables(vx) {
    var vx = 13;
    console.log(vx)
}

console.log(vx);


//Output

13
12

var vx = 12;

jsvariables(vx)

function jsvariables(vx) {
    vx = 13;
    console.log(vx)
}

console.log(vx);


//Output

13
12

var vx;

jsvariables(vx)

function jsvariables(vx) {
    var vy = 12;
    console.log(vy)
}

console.log(vx);


//Output

12
undefined

var vx;

jsvariables(vx)

function jsvariables(vx) {
    vx = 12;
    console.log(vx)
}

console.log(vx);


//Output

12
undefined

var vx;

jsvariables(vx)

function jsvariables(vx) {
    vx = 12;
    console.log(vx)
}
vx = 16;
console.log(vx);


//Output

12
16

3. const: The const keyword declares a block-scoped variable that cannot be reassigned. It is used to declare constants, which are variables that cannot be changed after they are declared. const variables must be initialized with a value at the time of declaration, and you cannot reassign them later.  

   Examples:

const cx = 12;

jsvariables(cx)

function jsvariables(cx) {
    console.log(cx)
}

console.log(cx);


//Output

12
12

const cx;

jsvariables(cx)

function jsvariables(cx) {
    console.log(cx)
}

console.log(cx);


//Output

const cx;
      ^^

SyntaxError: Missing initializer in const declaration

const cx;
cx = 12;
jsvariables(cx)

function jsvariables(cx) {
    
    console.log(cx)
}

console.log(cx);


//Output

const cx;
      ^^

SyntaxError: Missing initializer in const declaration

In general, it is recommended to use const for variables that will not be reassigned, let for variables that will be reassigned within their scope, and avoid using var as it has some potential issues related to scoping and hoisting. However, the choice between let and const ultimately depends on your specific use case and requirements.

Minified React error #311

According to react official docuemntation, this error occurs when we call React Hooks from regular JavaScript fucntion. We could fix this error by looking on the use of Hooks and only call Hooks from React Functions.

Don’t call Hooks from regular JavaScript functions. Instead, you can:

- Call Hooks from React function components.
- Call Hooks from custom Hooks (we’ll learn about them on the next page).

Check your fucntion in the code, fucntion should be a React JS function not general JavaScript function. A React function should have following four things into it.

React functions:

1. Follow React component naming convention, i.e. they must be Capitalized
2. Take a single props object argument
3. Return valid JSX
4. React functions are NEVER invoked. A reference to them is passed or they are referenced as JSX

References

• Rules of Hooks – React (reactjs.org)
• Rules of Hooks Explanation – React (reactjs.org)
• Difference between Regular javascript functions and React Functions
  

Callback function JavaScript and NodeJS

Lets understand the callback fucntion in NodeJS using the below geocode example.

Here we have created geoCode function with two paramters, first parameter will take input of the location name and second parameter the function that needs to call. Similary, we can add or pass any number of paramters in fucntion as per need.

const geoCode = (location, callback) => {

    const data = {

        location: location,

        latitude: 0,

        longitude: 0

    }

    callback(data)

}

 

When we call the geoCode function, we are here passing a city name and second paramter a fucntion itself that print the return data from callback on console.

 

geoCode('New Delhi', (callbackData) => {

    console.log(callbackData)

});

Return

{ location: 'New Delhi', latitude: 0, longitude: 0 }

Failed to construct 'Text': Please use the 'new' operator

Failed to construct 'Text': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Resolution

We did not import anything Text in the React Component. Hence, component is fail to understand this. Import the Text from the source.

e.g. import { Text } from 'ReactFile.js'

Module not found in ReactJS

Error

ModuleNotFoundError: Module not found: Error: Can't resolve '../../public/page-data/sq/d/595050432.json' 

Cause

The page or component that we created doesn't have .js extension.

Resolution

Create the file with required extension. e.g. reactPageSample.js

Module not found error in ReactJS application

Issue:

ModuleNotFoundError: Module not found: Error: Can't resolve '../../../public/page-data/sq/d/3428351200.json' in 'C:\git\gatsby-starter-hello-world\src\components\City'

failed Re-building development bundle - 0.215s

ERROR in ./src/pages/index.js?export=default 6:0-44

Module not found: Error: Can't resolve '/components/City/City.js' in 

'C:\git\gatsby-starter-hello-world\src\pages'

Resolution: 

The import statement for City component is not correct, please put the correct path of the React component.