5 JS concept about react

5 JavaScript Concepts every React developers should know🧑‍💻

1. Spread operator and object destructuring

The spread operator, denoted by three consecutive dots (…), allows us to expand iterable objects, such as arrays, strings, or even objects, into individual elements. It provides a simple and concise way to combine or clone arrays, merge objects, and pass arguments to functions.

//Array Manipulation
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concatenatedArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
const copiedArr = [...arr1]; // [1, 2, 3]

//Objecct Merging
const obj1 = { name: 'John' };
const obj2 = { age: 25 };
const mergedObj = { ...obj1, ...obj2 }; // { name: 'John', age: 25 }

//Functional Arguments
function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers); // 6

• Object destructuring :

Object destructuring allows us to extract properties from objects and assign them to variables. It provides an elegant way to access and use object properties without repetitive dot notation. Let’s take a look at a few scenarios:

//Variable Assignments
const person = { name: 'Alice', age: 30 };
const { name, age } = person;
console.log(name); // 'Alice'
console.log(age); // 30

//Function Parameters
function displayInfo({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}
const person = { name: 'Bob', age: 35 };
displayInfo(person); // Name: Bob, Age: 35

//Default Values
const { name = 'Unknown', country = 'USA' } = person;
console.log(name); // 'Alice'
console.log(country); // 'USA'

2. Async nature of language

Understanding Asynchronous Programming: In synchronous programming, each line of code is executed sequentially, one after another. This means that if a task takes a long time to complete, it blocks the execution of subsequent code until it finishes. Asynchronous programming, on the other hand, allows multiple tasks to be executed concurrently, improving the overall responsiveness and performance of the application.

console.log("Vineet is a good boy");

setTimeout(() => {
    console.log("Inside the setTimeout");
}, 1000);

console.log("Vineet is a bad boy");

//Above Code output
Vineet is a good boy
Vineet is a bad boy
Inside the setTimeout

3. Promises and Async await

Promises provide a structured and intuitive way to work with asynchronous code. A promise represents the eventual completion (or failure) of an asynchronous operation and returns a value or an error. It has three states: pending, fulfilled, or rejected.

const fs = require("fs/promises");
fs.readFile("file.txt", "utf-8", (err, data) => {
    console.log(err, data);
})
const result = fs.readFile("file.txt", "utf-8")
result.then((data) => {
    console.log(data);
})
//In the above Code you have to create file of name file.txt

• Async await :

Async/await is a syntax introduced in ES2017 that simplifies working with promises by providing a more synchronous-looking code structure. It allows you to write asynchronous code in a sequential manner, making it easier to read and understand. Let’s see how async/await works:

//Async Await function
const ReadThree = async (file1, file2, file3) => {

    const result1 = fs.readFile(file1, "utf-8")
    const result2 = fs.readFile(file2, "utf-8")
    const result3 = fs.readFile(file3, "utf-8")

    c1 = await result1
    console.log(c1);

    c2 = await result2
    console.log(c2);

    c3 = await result3
    console.log(c3);
}
ReadThree("file1.txt", "file2.txt", "file3.txt");

4. Equality in JavaScript

In JavaScript, the == (loose equality) and ===(strict equality) operators serve different purposes when comparing values. Loose equality performs type coercion, making it more forgiving but potentially leading to unexpected results. Strict equality compares both the values and types directly without any type conversions. It is generally recommended to use strict equality (===) for reliable and predictable comparisons, as it provides more control and clarity in your code.

console.log(5 == '5'); // true
console.log(true == 1); // true
console.log(null == undefined); // true

console.log(5 === '5'); // false
console.log(true === 1); // false
console.log(null === undefined); // false

5. Map, reduce, and Filter Methods

1. The Map Method: The map method allows you to transform each element of an array into a new value, creating a new array with the transformed elements. It takes a callback function as an argument, which is invoked for each element in the array. The returned values from the callback function are collected and form the new array. Here's an example:

//* Map Method in Javascript 
let nums = [10, 54, 54, 54, 5, 5, 15, 45, 4, 54, 54];

let res = nums.map((data) => {
    return data
});

console.log(res); //it returns the new array

2. The reduce method is used to derive a single value from an array by iteratively processing each element. It takes a callback function and an optional initial value as arguments. The callback function receives an accumulator and the current element as parameters and returns the updated value of the accumulator. Here's an example:

//* Reduce Method in Javascript

let res3 = nums.reduce((data1, data2) => {
    return data1 + data2
})
console.log(res3);

3. The filter method allows you to create a new array containing elements that pass a specified condition. It takes a callback function as an argument, which is invoked for each element in the array. The callback function should return a Boolean value to determine whether the element should be included in the resulting array. Here's an example:

//* Filter Method in Javascript

let res2 = nums.filter((data) => {
    return data === "45"
})
console.log(res2);