Recalling JavaScript Concepts for React!!

In this blog, we will be recalling the JavaScript Concepts which every developer should know to start with REACT.

---

let, var, and const:

These are some important keywords that are used to declare a variable in JavaScript. var had been used in ES5 earlier. let and const are an addition to the upgrades which we get in the ES6. What makes them different from var which we've been using till date ?. Let's get into each of them, one by one:

1. var :

var has a global scope or a function scope. It means that it can either be declared outside a function (global scope) or inside a function (function scope).

Let us understand with an example:

var name = "Aditya";

function greet(){
    var youtube = "Coding Adda";
}

Here, name has a global scope and youtube has function scope. Now what if we do this:

var name = "Aditya";

function greet(){
    var youtube = "Coding Adda";
}
console.log(youtube);

If you try to run it on your IDE, you will get an error. This is because youtube is declared on global scope and to print it, we will have to write console.log(youtube) inside the function.

The important thing about var:

var variables can be redeclared and updated.

var name = "Aditya";
console.log(name); //It will give Aditya as output
//Updating the name
var name = "Harikrishnan";
console.log(name); //It will give Harikrishnan as output

1. let:

   let is now preferred for variable declaration. It is kind of an improvement to var. It is block scoped which means it is only available for use within that block. Consider the following example:

    let vacation = "Summer";
    let enjoy = 4;
   
    if(enjoy > 3) {
        let code = "DSA";
        console.log(code);
    }
    console.log(code);
   

   We see that using DSA outside the block returns an error. It is because let is block scoped.

The Important thing about let:

let can be updated but not redeclared

//This will run
let vacation = "Summer";
vacation = "It is not Summer, it is Winter";

//This will not run
let vacation = "Summer";
let vacation = "Winter";

1. const:

   Variables that we declare in const maintain a constant value. Like let, const declarations can only be accessed within the block they are declared in.

The important thing about const:

const cannot be updated or redeclared.

//This willn't run
const vacation = "Summer";
vacation = "It is not Summer, it is Winter";
console.log(vacation);

//Nor This
const vacation = "Summer";
const vacation = "Winter";
console.log(vacation);

//But this will run
const vacation = "Summer";
console.log(vacation);

---

Ternary Operator:

This is one of the important operators to be used in React. This helps in managing the states in React. Applications like dark mode, and light mode in a website can be implemented with the help of the Ternary Operator. In React, the ternary operator is a concise way to conditionally render content based on a condition. It allows you to write a single expression that evaluates a condition and returns one of two possible values, depending on whether the condition is true or false. The syntax of the ternary operator in JavaScript (which is also used in React) is as follows:

condition ? valueIfTrue : valueIfFalse

Here's how it works in React:

1. You start by defining a condition, which can be any expression that evaluates to either true or false.

2. After the question mark ?, you provide the value or expression to be returned if the condition is true.

3. Following the colon :, you provide the value or expression to be returned if the condition is false.

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <p>Welcome, user!</p> : <p>Please log in.</p>}
    </div>
  );
}

In React, the ternary operator is a concise way to conditionally render content based on a condition. It allows you to write a single expression that evaluates a condition and returns one of two possible values, depending on whether the condition is true or false. The syntax of the ternary operator in JavaScript (which is also used in React) is as follows:

javascriptCopy codecondition ? valueIfTrue : valueIfFalse

Here's how it works in React:

1. You start by defining a condition, which can be any expression that evaluates to either true or false.

2. After the question mark ?, you provide the value or expression to be returned if the condition is true.

3. Following the colon :, you provide the value or expression to be returned if the condition is false.

Let's see an example in React:

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <p>Welcome, user!</p> : <p>Please log in.</p>}
    </div>
  );
}

In this example, the isLoggedIn variable is set to true, indicating that the user is logged in. If isLoggedIn is true, it will render the <p>Welcome, user!</p> element. Otherwise, if isLoggedIn is false, it will render the <p>Please log in.</p> element.

---

Destructuring:

Destructuring is a feature in JavaScript that allows you to extract values from arrays or objects and assign them to variables more concisely and conveniently. It provides a shorthand syntax for unpacking values, making your code more readable and expressive.

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

const [first, second, , fourth] = numbers;

console.log(first);   // 1
console.log(second);  // 2
console.log(fourth);  // 4

In this example, the array numbers contain five elements. By using destructuring, we assign the first element to the variable first, the second element to second, and the fourth element to fourth. The third element is skipped by leaving it empty. Now you can use these variables independently.

---

Spread Operator:

The spread operator, denoted by three consecutive dots (...), is a powerful feature in JavaScript that allows you to expand iterable objects such as arrays, strings, or objects into individual elements. It provides a concise syntax for copying, merging, or creating new data structures. The behavior of the spread operator depends on the context in which it is used.

Consider the following code:

const numberOne = [1,2,3];
const numberTwo = [4,5,6];

const combinedNumber = [...numberOne,...numberTwo];
console.log(combinedNumber);

Here we have two arrays with variables assigned numberOne and numberTwo respectively. Using the spread operator, we can concatenate the arrays and get the output as [1,2,3,4,5,6]. It effectively creates a new array containing all the elements from the original array and the additional elements [4,5,6].

---

Arrow Function:

It is one of the most important function that we will be using to declare a function. It comes under the anonymous function category. It can be further used in React to declare functional components. The syntax is as follows:

const hello = () => {
    console.log("Hello");
}

Here () => {} is the arrow function.

---

Mapping Elements:

map() creates a new array from calling a function for every array element. Consider the following code:

function myfunc(num) {
    return num * 10;
}

const numbers = [1,5,78];
const mappednumber = numbers.map(myfunc);
console.log(mappednumber);

Here what will happen is that the numbers will be mapped to the function myfunc which will return the number times 10. It is similar to the loops which we all know. It is mostly used to display a large amount of data from APIs or JSON formatted data and representing them on the frontend.

---

FETCH API:

This function is used to fetch data from API. MERN Stack involves the creation of APIs and also fetching data from APIs as well. The syntax for Fetching data from api is as follows:

async function fetchData () {
    const response = await fetch(YOUR API LINK HERE);
    const jsonData = await response.tojson();    
    console.log(jsonData);
}

It involves the asynchronous programming technique. We already have made a video on asynchronous programming. To revise the concepts, you can watch the video given:

---

In the next blog, we shall see the Environment Setup for REACT. To know more, make sure to watch the video on our Youtube channel. Happy Coding!!

Adios Amigos 👋👋