Frontend | Вопросы собесов

🤔 Что лучше использовать div или фрагмент? 🚩React.Fragment Позволяет группировать несколько дочерних элементов без добавления дополнительного узла в DOM. Это полезно, когда вам нужно вернуть несколько элементов из компонента, но вы не хотите добавлять лишние элементы, такие как <div>, в структуру DOM. 🚩Плюсы React.Fragment ➕Чистый DOM Фрагменты не создают дополнительных элементов в DOM, что помогает избежать ненужных вложенных структур и упрощает разметку. ➕Производительность Избегание дополнительных узлов может немного улучшить производительность, так как уменьшается количество элементов, которые браузер должен обрабатывать и рендерить. ➕Логическая группировка Использование фрагментов делает код более семантичным и чистым, показывая, что элементы логически связаны без необходимости добавлять новый HTML-элемент. 🚩Пример использования Элемент <div> добавляет новый узел в DOM и используется для группировки других элементов. Это стандартный блоковый элемент в HTML, который часто используется для создания контейнеров и структурирования страницы.

import React from 'react';

function List() {
  return (
    <React.Fragment>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
    </React.Fragment>
  );
}

// С использованием короткого синтаксиса:
function List() {
  return (
    <>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
    </>
  );
}

🚩Плюсы`<div>`: ➕Стилизация и атрибуты <div> позволяет легко добавлять стили, классы и атрибуты, что делает его полезным для создания структурированных и стилизованных контейнеров. ➕Макет и разметка <div> подходит для создания блоков, секций и контейнеров, которые требуют определенной разметки или стилей. 🚩Пример использования

import React from 'react';

function Container() {
  return (
    <div className="container">
      <p>Это первый параграф</p>
      <p>Это второй параграф</p>
    </div>
  );
}

🟠`React.Fragment` или `<>...</>` Когда вам нужно вернуть несколько элементов из компонента без добавления лишних узлов в DOM. Когда группировка элементов не требует стилизации или добавления атрибутов. 🟠`<div>` Когда вам нужно добавить стили, классы или атрибуты к контейнеру. Когда вам нужно создать структурированный блок или секцию на странице. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое семантика в веб-разработке - Семантика в HTML относится к использованию HTML-тегов в соответствии с их назначением для повышения доступности и поисковой оптимизации. - Семантически корректная верстка помогает устройствам чтения с экрана и поисковым системам лучше понимать структуру и содержание веб-страницы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔 В чем отличие ssr от csr? Это два подхода к рендерингу веб-страниц, которые различаются по тому, где происходит рендеринг контента: на сервере или на клиенте. 🚩Различия 🟠Место рендеринга SSR (Server-Side Rendering): Рендеринг контента происходит на сервере. Сервер генерирует HTML страницу и отправляет её клиенту (браузеру), который отображает готовую страницу. CSR (Client-Side Rendering): Рендеринг контента происходит на стороне клиента (в браузере). Браузер загружает минимальный HTML и JavaScript файлы, которые затем выполняются для создания и отображения контента. 🟠Время начальной загрузки SSR: Начальная загрузка может быть быстрее, так как клиент получает готовый HTML и может сразу начать его отображать. Однако последующие взаимодействия могут быть медленнее, так как могут потребовать загрузки дополнительных данных с сервера. CSR: Начальная загрузка может быть медленнее, так как клиент сначала загружает JavaScript, который затем рендерит страницу. Однако последующие взаимодействия обычно быстрее, так как они обрабатываются на клиенте без полной перезагрузки страницы. 🟠SEO SSR: Лучше подходит для SEO, так как поисковые системы получают готовый HTML контент, который легко индексировать. CSR: Может быть сложнее для SEO, так как контент генерируется на клиенте после загрузки JavaScript. Поисковым системам сложнее индексировать такие страницы. 🟠Опыт пользователя SSR: Пользователь видит контент быстрее при первой загрузке страницы, так как сервер отправляет готовый HTML. Однако последующие действия могут быть медленнее из-за необходимости делать запросы на сервер. CSR: Пользователь может дольше ждать при первой загрузке, но последующие действия обычно быстрее и более интерактивны, так как они обрабатываются на клиенте. 🟠Зависимость от JavaScript SSR: Менее зависим от JavaScript, так как основной контент генерируется на сервере и доступен даже если JavaScript отключен или не работает. CSR: Полностью зависит от JavaScript. Если JavaScript отключен или не работает, сайт может не функционировать должным образом. 🚩Пример

// pages/index.js
import React from 'react';

const Home = ({ data }) => (
  <div>
    <h1>Server-Side Rendered Page</h1>
    <p>{data}</p>
  </div>
);

export async function getServerSideProps() {
  // Fetch data from an API or database
  const data = "This is server-side rendered content";

  return {
    props: {
      data,
    },
  };
}

export default Home;

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое state manager и с какими приходилось работать - State manager управляет состоянием приложения в централизованной системе управления. - Примеры state managers включают Redux, MobX и Context API в React. - Redux предоставляет глобальное хранилище для состояния и управляет его изменениями через чистые функции (reducers). - MobX использует наблюдаемые объекты и автоматически отслеживает изменения для реактивного обновления UI. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое csr? Это метод рендеринга веб-страниц, при котором большая часть обработки и рендеринга контента происходит на стороне клиента, т.е. в браузере пользователя. В контексте веб-разработки, CSR обычно используется в одностраничных приложениях (Single Page Applications, SPA), где JavaScript играет ключевую роль в управлении содержимым и взаимодействиями на странице. 🚩Как работает 🟠Загрузка HTML При первой загрузке страницы браузер получает минимальный HTML-код, обычно содержащий только базовую структуру и ссылку на JavaScript файл. 🟠Загрузка JavaScript Основной JavaScript файл загружается и исполняется. Этот файл обычно содержит код приложения и необходимые библиотеки. 🟠Запросы к API JavaScript код инициирует запросы к серверу (обычно через API) для получения данных, необходимых для отображения содержимого страницы. 🟠Рендеринг в браузере Полученные данные используются для динамического создания и отображения контента непосредственно в браузере пользователя. 🚩Плюсы ➕Быстрое взаимодействие После начальной загрузки, взаимодействие с приложением обычно быстрее, поскольку обновление контента происходит без полной перезагрузки страницы. ➕Плавный пользовательский опыт Пользователь получает более плавный и интерактивный опыт, так как обновления происходят мгновенно без видимой перезагрузки страниц. ➕Гибкость и динамичность CSR позволяет создавать более динамичные и интерактивные пользовательские интерфейсы, так как все управление происходит на клиентской стороне. 🚩Минусы ➖SEO и начальная загрузка Так как основное содержание страницы рендерится на клиентской стороне, поисковым системам может быть сложнее индексировать такие страницы. Это может повлиять на SEO. ➖Долгое время начальной загрузки Начальная загрузка страницы может занять больше времени, так как сначала загружается и исполняется JavaScript код, а затем уже происходит рендеринг контента. ➖Зависимость от JavaScript Пользователи с отключенным JavaScript не смогут полноценно пользоваться сайтом. Также могут возникать проблемы с производительностью на слабых устройствах. 🚩Пример Минимальный HTML

<!DOCTYPE html>
<html>
<head>
    <title>My React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>

JavaScript рендеринг

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое контекст функции в JavaScript (this) - Контекст функции, или this, ссылается на объект, в контексте которого была вызвана функция. - В глобальной функции this ссылается на глобальный объект (в браузере это window). - В методе объекта this ссылается на сам объект. - Стрелочные функции не имеют собственного контекста this, они наследуют его от окружающего контекста. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего используются хуки? Для работы с состоянием и другими возможностями React без использования классовых компонентов. Они позволяют вам использовать функциональные компоненты и при этом сохранять состояние, обрабатывать побочные эффекты и использовать другие возможности, которые ранее были доступны только в классовых компонентах. 🚩Хуки 🟠useState Позволяет добавлять состояние в функциональные компоненты. Он принимает начальное значение состояния и возвращает массив с текущим значением состояния и функцией для его обновления.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

🟠useEffect Позволяет выполнять побочные эффекты в функциональных компонентах. Это может быть запрос данных, подписка на события или манипуляции с DOM. Он выполняется после рендера компонента.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer); // Очистка таймера при размонтировании
  }, []);

  return (
    <div>
      <p>Счетчик: {count}</p>
    </div>
  );
}

🟠useContext Позволяет использовать контекст в функциональных компонентах. Он принимает объект контекста и возвращает текущее значение контекста.

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Тема: {theme}</button>;
}

🚩Пользовательские хуки Вы можете создавать свои собственные хуки, чтобы переиспользовать логику между компонентами. Пользовательский хук — это функция, которая использует другие хуки.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// Использование пользовательского хука
function DataComponent() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) return <p>Загрузка...</p>;
  return <div>Данные: {JSON.stringify(data)}</div>;
}

Ставь 👍 и забирай 📚 Базу знании

🤔 Что такое прототипы в JavaScript - Прототипы позволяют объектам в JavaScript наследовать свойства и методы друг от друга. - Прототипное наследование является механизмом, позволяющим объектам использовать свойства и методы, определенные в других объектах. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем нужны дженерики? Необходимы для создания повторно используемых компонентов, которые работают с различными типами данных, обеспечивая при этом строгую типизацию. Они позволяют писать код, который может работать с различными типами данных без необходимости указывать конкретные типы при каждом использовании. 🚩Почему нужны 🟠Повторное использование кода Дженерики позволяют создавать обобщенные функции, классы и интерфейсы, которые можно использовать с различными типами данных, уменьшая дублирование кода и увеличивая его повторное использование. 🟠Безопасность типов Использование дженериков позволяет избежать ошибок, связанных с типами, поскольку компилятор TypeScript может проверять типы на этапе компиляции. 🟠Гибкость и абстракция Дженерики предоставляют возможность создавать более гибкие и абстрактные компоненты, которые могут работать с любыми типами данных, обеспечивая при этом строгую типизацию. 🚩Функции Дженерики позволяют создавать функции, которые могут работать с различными типами данных. Например, функция, которая возвращает переданное ей значение:

function identity<T>(value: T): T {
  return value;
}

const numberIdentity = identity(42); // T is inferred as number
const stringIdentity = identity("Hello"); // T is inferred as string

🚩Классы Классы могут использовать дженерики для работы с различными типами данных:

class Box<T> {
  contents: T;
  
  constructor(value: T) {
    this.contents = value;
  }
  
  getContents(): T {
    return this.contents;
  }
}

const numberBox = new Box<number>(123);
console.log(numberBox.getContents()); // 123

const stringBox = new Box<string>("Hello");
console.log(stringBox.getContents()); // Hello

🚩Интерфейсы Интерфейсы могут использовать дженерики для описания структур данных, которые могут содержать различные типы:

interface Pair<T, U> {
  first: T;
  second: U;
}

const numberStringPair: Pair<number, string> = {
  first: 42,
  second: "Answer"
};

const booleanArrayPair: Pair<boolean, boolean[]> = {
  first: true,
  second: [true, false, true]
};

🚩Ограничения дженериков Иногда требуется ограничить типы, которые могут быть переданы дженерикам. Для этого используются ограничения (extends). В этом примере функция logLength принимает только те типы, у которых есть свойство length.

function logLength<T extends { length: number }>(value: T): void {
  console.log(value.length);
}

logLength("Hello"); // 5
logLength([1, 2, 3]); // 3
logLength({ length: 10, value: "example" }); // 10

Ставь 👍 и забирай 📚 Базу знаний

🤔 Методы массивов в JavaScript - push() добавляет элемент в конец массива. - pop() удаляет последний элемент из массива. - shift() удаляет первый элемент массива. - unshift() добавляет один или несколько элементов в начало массива. - map() создает новый массив с результатами вызова указанной функции для каждого элемента. - filter() создает новый массив со всеми элементами, прошедшими проверку, заданную в передаваемой функции. - reduce() применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем тип отличается от интерфейса? 🚩Типы (Type) Типы в TypeScript используются для создания алиасов для различных типов данных. Они могут описывать примитивные типы, объединения, пересечения, массивы, объекты и функции. Типы предоставляют гибкость в описании более сложных структур данных.

type User = {
  name: string;
  age: number;
};

Типы могут комбинировать другие типы с использованием объединений (|) и пересечений (&):

type ID = string | number;

type Employee = {
  id: ID;
  department: string;
};

type Manager = User & Employee & {
  employees: User[];
};

🚩Интерфейсы (Interface) Интерфейсы используются для описания структуры объектов. Они позволяют определять обязательные и необязательные свойства, а также методы объектов. Интерфейсы поддерживают наследование и могут быть расширены.

interface User {
  name: string;
  age: number;
}

interface Employee extends User {
  department: string;
}

Интерфейсы могут расширять другие интерфейсы:

interface Manager extends Employee {
  employees: User[];
}

🚩Ключевые различия 🟠Расширение (extends) и пересечение (&) Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова extends. Типы могут использовать пересечения (&) для комбинирования других типов. 🟠Объединения (Union types) Типы могут определять объединения (например, string | number), что позволяет описывать переменные, которые могут быть одного из нескольких типов. Интерфейсы не поддерживают объединения. 🟠Декларативное объединение Интерфейсы могут быть объединены (merged) TypeScript'ом, если они объявлены несколько раз с одинаковым именем. Типы не поддерживают объединение, и объявление одного и того же типа несколько раз приведет к ошибке. 🟠Примитивы и другие типы Типы могут представлять примитивные типы (например, string, number), а также сложные типы и функции. Интерфейсы могут описывать только структуры объектов. 🚩Примеры Тип с объединением

type ID = string | number;

const userId: ID = 123;
const userName: ID = "abc";

Объединение интерфейсов

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = {
  name: "John",
  age: 30
};

Расширение интерфейсов

interface User {
  name: string;
  age: number;
}

interface Employee extends User {
  department: string;
}

const employee: Employee = {
  name: "Alice",
  age: 25,
  department: "HR"
};

Тип с пересечением

type User = {
  name: string;
  age: number;
};

type Employee = User & {
  department: string;
};

const employee: Employee = {
  name: "Bob",
  age: 35,
  department: "IT"
};

Ставь 👍 и забирай 📚 Базу знаний

🤔 Различия между let и const - let позволяет переназначать значения переменных, в то время как const не позволяет это после инициализации. - Обе директивы предоставляют блочную область видимости. - let идеально подходит для использования в случаях, когда значение переменной может изменяться. - const используется для объявления переменных с неизменным значением. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Создавайте красоту с HUAWEI Пришло время творить! Загрузите свой рисунок, созданный на планшете HUAWEI. Станьте финалистом конкурса GoPaint и выиграйте главный приз - планшет HUAWEI MatePad Pro. Перейти на сайт #реклама consumer.huawei.com О рекламодателе

🤔 На что влияет доступность? В веб-разработке влияет на то, насколько удобно и возможно использовать веб-сайт или веб-приложение для всех пользователей, включая людей с ограниченными возможностями. Она охватывает широкий спектр практик и технологий, которые делают веб-контент более доступным и понятным для людей с различными физическими, сенсорными, когнитивными и технологическими ограничениями. 🚩Почему важна 🟠Инклюзивность Доступность позволяет людям с ограниченными возможностями использовать веб-сайты наравне с другими пользователями. Это включает людей с нарушениями зрения, слуха, двигательной активности и когнитивными проблемами. 🟠Юридические требования В некоторых странах и регионах существуют законы и нормативные акты, требующие обеспечения доступности веб-сайтов и приложений. Например, в США действует Закон о доступности (ADA), а в Европейском Союзе – Директива о доступности веб-сайтов и мобильных приложений. 🟠SEO и охват Доступные веб-сайты часто лучше индексируются поисковыми системами, поскольку многие практики доступности пересекаются с рекомендациями по SEO (поисковой оптимизации). Это помогает улучшить видимость сайта и его охват. 🟠Пользовательский опыт Доступные сайты обычно имеют более ясную и интуитивно понятную структуру, что улучшает общий пользовательский опыт для всех, включая людей без ограниченных возможностей. 🚩Основные аспекты 🟠Текстовые альтернативы Все визуальные элементы (например, изображения, иконки) должны иметь текстовые альтернативы (атрибуты alt), чтобы их можно было понять с помощью экранных читалок. 🟠Навигация с клавиатуры Весь функционал сайта должен быть доступен с клавиатуры. Это важно для людей, которые не могут использовать мышь. 🟠Контраст и читабельность Текст должен быть достаточно контрастным по отношению к фону, чтобы его было легко читать людям с нарушениями зрения. 🟠Использование семантических HTML-тегов Семантические теги (<header>, <nav>, <main>, <footer>, <article>, <section> и т.д.) помогают структурам страницы быть более понятными для вспомогательных технологий. 🟠Формы и элементы управления Формы должны быть четко обозначены с помощью меток (<label>) и иметь описания ошибок, чтобы пользователи могли легко взаимодействовать с ними. 🟠Видео и аудио Видео и аудио должны сопровождаться субтитрами и текстовыми транскрипциями, чтобы пользователи с нарушениями слуха могли понять содержание.

<img src="example.jpg" alt="Описание изображения">

Пример формы с доступными метками:

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Электронная почта:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Отправить</button>
</form>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое двустороннее связывание? Двустороннее связывание (two-way binding) — это процесс автоматической синхронизации данных между моделью и представлением. В контексте JavaScript и фреймворков, таких как Angular, это означает, что изменения в модели обновляют пользовательский интерфейс, и наоборот — изменения в интерфейсе изменяют данные в модели. Двустороннее связывание упрощает работу с формами и вводом данных, так как не требует явного написания кода для передачи данных в обе стороны. Это улучшает интерактивность и упрощает обработку данных. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Помощь в трудоустройстве в IT-сфере! По всей России объявили бесплатную программу на шестимесячное обучение по IT-cпециальностям. Запись на участие в программе продлится до конца июля, но чтобы туда попасть, нужно пройти специальный профтест. По результату тестирования сразу узнаете, какая профессия вам подойдет, и проходите ли вы на бесплатное обучение. Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔 Чем html отличается от jsx? HTML и JSX имеют сходства и различия, которые важно понимать при разработке веб-приложений, особенно в контексте работы с библиотекой React. 🚩HTML Это стандартный язык разметки для создания веб-страниц. Он используется для определения структуры и содержания веб-страницы. HTML состоит из элементов, заключенных в теги, которые определяют различные части веб-страницы, такие как заголовки, абзацы, списки, ссылки, изображения и другие элементы.

<!DOCTYPE html>
<html>
<head>
  <title>Пример HTML</title>
</head>
<body>
  <h1>Заголовок</h1>
  <p>Это абзац.</p>
</body>
</html>

🚩JSX Это синтаксическое расширение для JavaScript, которое используется в React для описания того, как пользовательский интерфейс должен выглядеть. JSX позволяет писать HTML-подобный код внутри JavaScript, который затем транспилируется в вызовы JavaScript-функций. Этот код выглядит как HTML, но на самом деле он является JavaScript-кодом, который будет компилироваться в вызовы React.createElement.

const element = (
  <div>
    <h1>Заголовок</h1>
    <p>Это абзац.</p>
  </div>
);

🚩Ключевые отличия 🟠Синтаксис и семантика HTML использует стандартные HTML-теги и атрибуты. JSX использует JavaScript-выражения внутри фигурных скобок {}, и некоторые атрибуты имеют другие названия (например, className вместо class, htmlFor вместо for). 🟠Логика и данные В HTML нельзя напрямую писать JavaScript-код, можно лишь использовать его через теги <script>. В JSX можно использовать любые JavaScript-выражения, что позволяет динамически формировать разметку. 🟠Транспиляция HTML непосредственно интерпретируется браузером. JSX нужно транспилировать (с помощью Babel или другого транспилера) в обычный JavaScript, чтобы браузер мог его понять. 🟠Расширенные возможности HTML не поддерживает логику напрямую, все изменения в DOM происходят через JavaScript. JSX позволяет интегрировать логику непосредственно в разметку, что делает код более декларативным и удобным для работы в рамках React. Пример использования динамического контента

const name = "Мир";
const element = <h1>Привет, {name}!</h1>;

Этот JSX-код будет транспилирован

const element = React.createElement('h1', null, 'Привет, ', name, '!');

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие бывают значения у свойства position? Свойство `position` в CSS имеет следующие значения: `static` (по умолчанию, элемент расположен в нормальном потоке документа), `relative` (элемент перемещается относительно своего нормального положения), `absolute` (элемент позиционируется относительно ближайшего предка с позиционированием), `fixed` (элемент фиксируется относительно окна браузера) и `sticky` (элемент перемещается до определённой границы и остаётся закреплённым). Эти значения позволяют управлять расположением элементов на странице в зависимости от требований верстки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что возвращает map? Используется для создания нового массива, содержащего результаты вызова переданной функции для каждого элемента исходного массива. Этот метод не изменяет оригинальный массив, а возвращает новый. 🚩Почему это нужно? Метод map удобен для выполнения операции на каждом элементе массива без необходимости вручную перебирать массив с помощью цикла. Он обеспечивает более чистый и читаемый код. 🚩Как это используется? Метод map принимает одну функцию в качестве аргумента. Эта функция будет выполнена для каждого элемента массива, и результат выполнения этой функции будет добавлен в новый массив, который в итоге возвращается методом map. В этом примере каждый элемент массива numbers умножается на 2, и результат сохраняется в новом массиве doubled.

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

// Используем метод map для умножения каждого элемента на 2
const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

С использованием стрелочных функций, код становится еще более компактным:

const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

🚩Дополнительные параметры Функция, переданная в map, может принимать до трех аргументов: 🟠Текущий элемент массива. 🟠Индекс текущего элемента. 🟠Сам исходный массив. Пример с использованием всех трех аргументов:

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

const detailed = numbers.map((num, index, array) => {
  return `Элемент ${num} находится на индексе ${index} в массиве [${array}]`;
});

console.log(detailed);
/*
[
  'Элемент 1 находится на индексе 0 в массиве [1,2,3,4,5]',
  'Элемент 2 находится на индексе 1 в массиве [1,2,3,4,5]',
  'Элемент 3 находится на индексе 2 в массиве [1,2,3,4,5]',
  'Элемент 4 находится на индексе 3 в массиве [1,2,3,4,5]',
  'Элемент 5 находится на индексе 4 в массиве [1,2,3,4,5]'
]
*/

Ставь 👍 и забирай 📚 Базу знаний