5 концепций JavaScript, которые должен знать каждый разработчик React🧑‍💻

1. Оператор распространения и объектдеструктуризация

Оператор расширения, обозначаемый тремя последовательными точками (…), позволяет нам расширять итерируемые объекты, такие как массивы, строки или даже объекты, на отдельные элементы. Он предоставляет простой и лаконичный способ объединения или клонирования массивов, объединения объектов и передачи аргументов функциям.

//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

• Деструктуризация объекта:

Деструктуризация объектов позволяет нам извлекать свойства из объектов и назначать их переменным. Он обеспечивает элегантный способ доступа и использования свойств объекта без повторяющихся точечных обозначений. Давайте рассмотрим несколько сценариев:

//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. Асинхронный характер языка

Понимание асинхронного программирования: в синхронном программировании каждая строка кода выполняется последовательно, одна за другой. Это означает, что если выполнение задачи занимает много времени, она блокирует выполнение последующего кода до тех пор, пока не завершится. С другой стороны, асинхронное программирование позволяет выполнять несколько задач одновременно, улучшая общую скорость отклика и производительность приложения.

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. Обещания и асинхронное ожидание

Обещания обеспечивают структурированный и интуитивно понятный способ работы с асинхронным кодом. Обещание представляет возможное завершение (или сбой) асинхронной операции и возвращает значение или ошибку. Он имеет три состояния: ожидание, выполнено или отклонено.

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 — это синтаксис, представленный в ES2017, который упрощает работу с промисами, обеспечивая более синхронную структуру кода. Это позволяет писать асинхронный код последовательно, что упрощает его чтение и понимание. Давайте посмотрим, как работает async/await:

//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. Равенство в JavaScript

В JavaScript операторы == (неполное равенство) и === (строгое равенство) служат разным целям при сравнении значений. Свободное равенство выполняет приведение типов, делая его более щадящим, но потенциально приводя к неожиданным результатам. Строгое равенство сравнивает как значения, так и типы напрямую без каких-либо преобразований типов. Обычно рекомендуется использовать строгое равенство (===) для надежных и предсказуемых сравнений, так как это обеспечивает больший контроль и ясность кода.

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: метод map позволяет преобразовывать каждый элемент массива в новое значение, создавая новый массив с преобразованными элементами. В качестве аргумента он принимает функцию обратного вызова, которая вызывается для каждого элемента массива. Возвращаемые значения из функции обратного вызова собираются и формируют новый массив. Вот пример:

//* 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. Метод сокращения используется для получения одного значения из массива путем итеративной обработки каждого элемента. Он принимает функцию обратного вызова и необязательное начальное значение в качестве аргументов. Функция обратного вызова получает аккумулятор и текущий элемент в качестве параметров и возвращает обновленное значение аккумулятора. Вот пример:

//* Reduce Method in Javascript

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

3. Метод filter позволяет создать новый массив, содержащий элементы, соответствующие заданному условию. В качестве аргумента он принимает функцию обратного вызова, которая вызывается для каждого элемента массива. Функция обратного вызова должна возвращать логическое значение, чтобы определить, следует ли включать элемент в результирующий массив. Вот пример:

//* Filter Method in Javascript

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

5 концепций JavaScript, которые должен знать каждый разработчик React🧑‍💻