Какие способы работы с асинхронным кодом знаешь ?
Спросят с вероятностью 7%

Существует несколько способов работы с асинхронным кодом. Основные из них включают использование обратных вызовов (callbacks), промисов (Promises) и асинхронных функций (async/await). Рассмотрим каждый из них более подробно.

1️⃣Обратные вызовы (Callbacks)

Это функции, которые передаются как аргументы в другие функции и вызываются после завершения асинхронной операции.

function fetchData(callback) {
    setTimeout(() => {
        callback('Data received');
    }, 1000);
}

fetchData((data) => {
    console.log(data); // 'Data received'
});

2️⃣Промисы (Promises)

Предоставляют более элегантный способ работы с асинхронным кодом, избегая "ад колбэков" (callback hell). Промис может находиться в одном из трёх состояний: ожидание (pending), выполнен (fulfilled) или отклонён (rejected).

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data received');
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data); // 'Data received'
    })
    .catch((error) => {
        console.error(error);
    });

3️⃣Асинхронные функции (Async/Await)

Это синтаксическая надстройка над промисами, которая позволяет писать асинхронный код так, как будто он синхронный, что делает его более читабельным и удобным.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data received');
        }, 1000);
    });
}

async function fetchAsyncData() {
    try {
        const data = await fetchData();
        console.log(data); // 'Data received'
    } catch (error) {
        console.error(error);
    }
}

fetchAsyncData();

4️⃣Асинхронные итераторы (Async Iterators) и генераторы (Generators)

Используются для обработки потоков данных асинхронно, что полезно, например, при чтении данных из сетевых запросов или файлов.

async function* asyncGenerator() {
    let i = 0;
    while (i < 3) {
        yield new Promise((resolve) =>
            setTimeout(() => resolve(i++), 1000)
        );
    }
}

(async () => {
    for await (let value of asyncGenerator()) {
        console.log(value); // 0, затем 1, затем 2 (с интервалом в 1 секунду)
    }
})();

Почему это важно?

✅Управление асинхронностью: Все эти способы позволяют эффективно управлять асинхронными операциями, такими как сетевые запросы, таймеры и взаимодействие с базами данных.
✅Читаемость и поддерживаемость кода: Использование промисов и async/await делает код более читаемым и поддерживаемым по сравнению с колбэками, особенно в сложных сценариях.
✅Ошибки и обработка исключений: Промисы и async/await предоставляют удобные механизмы для обработки ошибок, что делает код более устойчивым и надёжным.

Основные способы работы с асинхронным кодом включают колбэки, промисы и async/await. Каждый из них предоставляет свои преимущества для управления асинхронными операциями, делая код более читабельным и удобным для поддержки.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что такое миксины ?
Спросят с вероятностью 7%

Миксины (mixins) — это способ повторного использования кода в различных контекстах. Позволяют вам создавать фрагменты кода, которые могут быть включены в другие объекты или классы. Это помогает избежать дублирования кода и упрощает его поддержку и расширение.

Миксины

Часто используются для добавления методов или свойств к классам. Это позволяет комбинировать функциональность из разных источников.

let sayHiMixin = {
    sayHi() {
        console.log(`Привет, ${this.name}`);
    },
    sayBye() {
        console.log(`Пока, ${this.name}`);
    }
};

class User {
    constructor(name) {
        this.name = name;
    }
}

// Копируем методы sayHiMixin в User.prototype
Object.assign(User.prototype, sayHiMixin);

let user = new User("Вася");
user.sayHi(); // Привет, Вася
user.sayBye(); // Пока, Вася

В этом примере миксин sayHiMixin добавляет методы sayHi и sayBye к классу User.

Миксины в CSS (Sass/SCSS)

Обычно используются в препроцессорах, таких как Sass или Less. Миксины позволяют определять наборы стилей, которые можно повторно использовать в различных местах стилей.

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
            border-radius: $radius;
}

.box { 
    @include border-radius(10px);
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

В этом примере миксин border-radius определяет стили для создания скругленных углов. Затем он используется в классе .box для применения этих стилей.

Почему это важно?

✅Повторное использование кода: Миксины позволяют избежать дублирования кода, что упрощает его поддержку и уменьшает вероятность ошибок.
✅Организация кода: Миксины помогают организовать код, разделяя общую функциональность на логические блоки.
✅Удобство и гибкость: С миксинами легко добавлять или изменять функциональность, не затрагивая основные классы или стили.

Миксины — это способ повторного использования кода. Они позволяют добавлять общие методы и свойства к классам (в JavaScript) или повторно использовать наборы стилей.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Как передать данные из родительского компонента в дочерний ?
Спросят с вероятностью 7%

Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему.

Шаги для передачи данных из родительского компонента в дочерний

1️⃣Создание родительского компонента:
✅В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать.
✅Затем передаем эти данные в дочерний компонент через пропсы.

2️⃣Приём данных в дочернем компоненте:
✅В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий.

Рассмотрим пример, где родительский компонент передает строку message в дочерний компонент.

Родительский компонент (ParentComponent.js):

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const message = "Привет, дочерний компонент!";
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent message={message} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js):

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent;

Пояснение

1️⃣В родительском компоненте `ParentComponent`:
✅Создаем переменную message, содержащую строку "Привет, дочерний компонент!".
✅В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message.

2️⃣В дочернем компоненте ChildComponent:
✅Принимаем пропс message через параметр props.
✅Используем props.message для отображения переданной строки внутри тега <p>.

Дополнительные примеры

Родительский компонент (ParentComponent.js):

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const user = {
        name: "Иван",
        age: 25
    };
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent user={user} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js):

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>Имя: {props.user.name}</p>
            <p>Возраст: {props.user.age}</p>
        </div>
    );
}

export default ChildComponent;

В React данные передаются из родительского компонента в дочерний с помощью пропсов. В родительском компоненте данные передаются дочернему компоненту через атрибуты JSX, а в дочернем компоненте эти данные принимаются и используются через объект props.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что делает $emit ?
Спросят с вероятностью 7%

$emit — это метод, используемый для отправки событий из дочернего компонента в родительский компонент. Он позволяет дочернему компоненту уведомлять родительский компонент о том, что что-то произошло, передавая вместе с этим событием любые необходимые данные.

Как его использовать

1️⃣В дочернем компоненте:
✅Используйте метод $emit, чтобы отправить событие.
✅Передайте имя события и любые данные, которые нужно передать родительскому компоненту.

2️⃣В родительском компоненте:
✅Слушайте это событие, используя директиву v-on или её сокращение @.
✅Обработайте событие в методе родительского компонента.

Дочерний компонент (ChildComponent.vue)

<template>
  <button @click="notifyParent">Нажми меня</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childClicked', 'Данные от дочернего компонента');
    }
  }
}
</script>

Родительский компонент (ParentComponent.vue)

<template>
  <div>
    <h1>Родительский компонент</h1>
    <child-component @childClicked="handleChildClick"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick(message) {
      console.log('Событие от дочернего компонента:', message);
    }
  }
}
</script>

Пояснение

1️⃣В дочернем компоненте `ChildComponent`:
✅Мы создали кнопку и добавили к ней обработчик события @click, который вызывает метод notifyParent.
✅Метод notifyParent использует $emit для отправки события childClicked и передает строку 'Данные от дочернего компонента' в качестве данных.

2️⃣В родительском компоненте ParentComponent:
✅Мы добавили дочерний компонент <child-component> в шаблон и прослушиваем событие childClicked с помощью директивы @childClicked.
✅Когда событие childClicked происходит, вызывается метод handleChildClick, который принимает данные, переданные дочерним компонентом, и выводит их в консоль.

Почему это важно?

✅Коммуникация между компонентами: $emit позволяет организовать эффективную коммуникацию между компонентами, передавая данные и уведомления от дочернего компонента к родительскому.
✅Разделение обязанностей: С помощью событий можно поддерживать чистую и разделенную архитектуру, где каждый компонент отвечает только за свои задачи и уведомляет другие компоненты о произошедших изменениях через события.
✅Масштабируемость и поддерживаемость: Использование событий делает приложение более масштабируемым и поддерживаемым, так как компоненты остаются независимыми и могут повторно использоваться в разных частях приложения.

$emit используется для отправки событий из дочернего компонента в родительский, позволяя передавать данные и уведомления о произошедших изменениях.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Как добавить слушатель события ?
Спросят с вероятностью 7%

Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.

Почему это нужно?

Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.

Как это используется?

Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.

1️⃣Чистый JavaScript
Для добавления слушателя события используется метод addEventListener.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

В этом примере мы получаем элемент кнопки по её id и добавляем слушатель события click, который вызывает функцию, отображающую сообщение.

2️⃣React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

Пример:

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

В этом примере мы определяем функцию handleClick и передаем её в атрибут onClick кнопки. Когда пользователь нажимает на кнопку, вызывается функция handleClick.

3️⃣jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>

В этом примере мы используем jQuery для добавления обработчика события click к кнопке.

Почему это удобно и важно:
✅Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы.
✅Гибкость: Возможность реагировать на различные действия пользователей.
✅Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.

Добавление слушателя события позволяет реагировать на действия пользователя и делает приложения интерактивными. В зависимости от технологии (чистый JavaScript, React или jQuery) процесс добавления слушателя может немного отличаться, но цель остается той же — улучшить взаимодействие пользователя с приложением.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Назови отличия директив v show и v if ?
Спросят с вероятностью 7%

v-show и v-if — это две директивы, которые используются для условного отображения элементов в DOM. Однако они работают по-разному и имеют разные случаи использования. Рассмотрим их отличия более детально.

Основные отличия

1️⃣Рендеринг в DOM:
✅v-if: Элемент с v-if рендерится в DOM только тогда, когда условие истинно. Если условие ложно, элемент не создаётся и удаляется из DOM.
✅v-show: Элемент с v-show всегда рендерится в DOM, независимо от условия. Однако, его видимость контролируется с помощью CSS-свойства display.

2️⃣Переключение состояния:
✅v-if: Переключение между состояниями приводит к созданию или уничтожению элемента в DOM. Это может быть медленнее при частом переключении, так как каждый раз происходит перерисовка.
✅v-show: Переключение состояния происходит мгновенно, поскольку элемент уже присутствует в DOM, и меняется только его CSS-свойство display.

3️⃣Использование в условиях:
✅v-if: Рекомендуется использовать, когда элемент должен быть условно добавлен или удален из DOM. Полезно, когда условие меняется редко.
✅v-show: Рекомендуется использовать, когда необходимо часто переключать видимость элемента, поскольку это более производительно.

Примеры:

С v-if:

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-if="isVisible">Этот текст отображается только если isVisible истинно</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> будет добавляться или удаляться из DOM при каждом нажатии на кнопку.

С v-show:

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-show="isVisible">Этот текст всегда присутствует в DOM, но может быть скрыт</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> всегда присутствует в DOM, но его видимость контролируется с помощью CSS.

✅v-if: Условное добавление и удаление элементов в DOM.
✅v-show: Условное изменение видимости элементов с помощью CSS.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Какие структуры данных есть в js ?
Спросят с вероятностью 7%

Существует несколько основных структур данных, которые используются для хранения и управления данными. Рассмотрим их подробнее:

1️⃣Массивы (Arrays)
✅Что это: Упорядоченные списки элементов.
✅Зачем нужны: Для хранения коллекций данных, которые можно обрабатывать по индексу.
✅Как использовать:

          let fruits = ["Apple", "Banana", "Cherry"];
     console.log(fruits[0]); // Apple
     

✅Пример использования: Хранение списка товаров в корзине интернет-магазина.

2️⃣Объекты (Objects)
✅Что это: Наборы пар "ключ-значение".
✅Зачем нужны: Для хранения данных в виде ассоциативных массивов, где ключами могут быть строки или символы.
✅Как использовать:

          let person = {
       name: "John",
       age: 30
     };
     console.log(person.name); // John
     

✅Пример использования: Хранение информации о пользователе.

3️⃣Map (Карты)
✅Что это: Коллекции пар "ключ-значение", где ключи могут быть любого типа.
✅Зачем нужны: Для хранения данных с уникальными ключами, с более гибкими возможностями по сравнению с объектами.
✅Как использовать:

          let map = new Map();
     map.set('name', 'John');
     map.set(1, 'one');
     console.log(map.get('name')); // John
     

✅Пример использования: Хранение настроек с ключами различного типа.

4️⃣Set (Множества)
✅Что это: Коллекции уникальных значений.
✅Зачем нужны: Для хранения множества значений, где каждое значение уникально.
✅Как использовать:

          let set = new Set();
     set.add(1);
     set.add(1); // Значение не добавится, так как оно уже существует
     console.log(set.size); // 1
     

✅Пример использования: Хранение уникальных тегов из списка статей.

5️⃣WeakMap (Слабые карты)
✅Что это: Коллекции пар "ключ-значение", где ключи являются объектами и имеют слабые ссылки.
✅Зачем нужны: Для хранения данных с автоматическим удалением неиспользуемых объектов.
✅Как использовать:

          let weakMap = new WeakMap();
     let obj = {};
     weakMap.set(obj, 'value');
     obj = null; // Теперь объект может быть удалён из памяти
     

✅Пример использования: Хранение метаданных объектов без риска утечек памяти.

6️⃣WeakSet (Слабые множества)
✅Что это: Коллекции объектов, где каждое значение может быть удалено автоматически, если больше не используется.
✅Зачем нужны: Для хранения уникальных объектов с возможностью автоматического удаления.
✅Как использовать:

          let weakSet = new WeakSet();
     let obj = {};
     weakSet.add(obj);
     obj = null; // Теперь объект может быть удалён из памяти
     

✅Пример использования: Отслеживание объектов без риска утечек памяти.

7️⃣String (Строки)
✅Что это: Последовательности символов.
✅Зачем нужны: Для хранения и обработки текстовых данных.
✅Как использовать:

          let greeting = "Hello, world!";
     console.log(greeting.length); // 13
     

✅Пример использования: Хранение и манипулирование текстовой информацией, такой как имена пользователей или сообщения.

8️⃣Typed Arrays (Типизированные массивы)
✅Что это: Массивы, которые предоставляют массивы с фиксированной длиной для различных типов данных.
✅Зачем нужны: Для работы с бинарными данными и оптимизации производительности.
✅Как использовать:

          let buffer = new ArrayBuffer(16);
     let int32View = new Int32Array(buffer);
     int32View[0] = 42;
     console.log(int32View[0]); // 42
     

✅Пример использования: Обработка данных в WebGL или манипулирование бинарными данными.

Есть массивы, объекты, Map, Set, WeakMap, WeakSet, строки и типизированные массивы. Они нужны для хранения и управления различными типами данных, от упорядоченных списков до ассоциативных массивов и уникальных наборов значений.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что делает метод apply ?
Спросят с вероятностью 7%

Метод apply позволяет вызвать функцию с определённым значением this и передать аргументы в виде массива (или массивоподобного объекта). Он является частью прототипа функции и используется для управления контекстом выполнения функции и передачи аргументов.

Зачем он нужен

Метод apply полезен в ситуациях, когда:
1️⃣Нужно вызвать функцию с конкретным значением this.
2️⃣Необходимо передать аргументы в виде массива, особенно когда их количество заранее неизвестно.

Как он используется

Синтаксис метода apply выглядит так:

function.apply(thisArg, [argsArray])

✅thisArg: Значение, используемое для this при вызове функции.
✅argsArray: Массив или массивоподобный объект, содержащий аргументы для функции.

Пример

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };

greet.apply(person, ['Hello', '!']); // Вывод: "Hello, Alice!"

В этом примере:
✅Функция greet принимает два аргумента и использует this.name.
✅Метод apply вызывает greet с this, указывающим на объект person, и передает массив аргументов ['Hello', '!'].

Зачем использовать apply вместо других методов

Особенно удобен, когда аргументы уже находятся в массиве. Если бы использовался метод call, пришлось бы передавать аргументы вручную:

greet.call(person, 'Hello', '!'); // То же самое, но аргументы передаются по отдельности

Еще один пример: использование с встроенными методами

Метод apply можно использовать для передачи массивов встроенным функциям, которые не работают напрямую с массивами. Например, использование метода Math.max для нахождения максимального значения в массиве:

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); // 7

Здесь:
✅Math.max ожидает список отдельных чисел, а не массив.
✅apply передает массив как набор отдельных аргументов.

Метод apply вызывает функцию с определённым значением this и аргументами в виде массива. Это удобно, когда аргументы уже находятся в массиве и нужно управлять контекстом выполнения функции.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что такое самовызывающаяся функция ?
Спросят с вероятностью 7%

Самовызывающаяся функция (IIFE, Immediately Invoked Function Expression) — это функция, которая вызывается сразу же после её объявления. Используется для создания локальной области видимости и изоляции кода от глобальной области видимости.

Зачем нужны самовызывающиеся функции

Самовызывающиеся функции используются для:
1️⃣Изоляции переменных и предотвращения их попадания в глобальную область видимости.
2️⃣Создания замыканий.
3️⃣Инициализации кода, который должен выполняться сразу после загрузки страницы или выполнения скрипта.

Как пишется самовызывающаяся функция

Синтаксис IIFE выглядит следующим образом:

(function() {
  // код функции
})();

Или с использованием стрелочных функций:

(() => {
  // код функции
})();

Примеры:

Изоляция переменных

(function() {
  var message = 'Hello, World!';
  console.log(message); // Вывод: Hello, World!
})();

console.log(message); // Ошибка: message is not defined

В этом примере переменная message существует только внутри IIFE и недоступна вне её.

Создание замыканий

var counter = (function() {
  var count = 0;
  return function() {
    count += 1;
    return count;
  };
})();

console.log(counter()); // Вывод: 1
console.log(counter()); // Вывод: 2

Здесь IIFE создаёт локальную переменную count, к которой можно получить доступ только через возвращаемую функцию.

Инициализация кода

(function() {
  console.log('IIFE выполнена сразу после объявления!');
})();

Этот пример демонстрирует выполнение кода сразу после объявления функции.

Самовызывающаяся функция (IIFE) — это функция, которая вызывается сразу после её объявления. Она используется для изоляции переменных и создания замыканий.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Как работают map, reduce и filter ?
Спросят с вероятностью 7%

map, reduce и filter — это методы массивов, которые позволяют обрабатывать и трансформировать массивы функциональным способом.

Метод map

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

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию.
✅Возвращает новый массив с результатами вызова функции для каждого элемента.

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

В этом примере функция умножает каждый элемент массива numbers на 2, и результат сохраняется в новом массиве doubled.

Метод reduce

Применяется к массиву и сводит его к одному значению. Функция принимает аккумулятор и текущий элемент, производит операцию и возвращает новый аккумулятор.

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию, которая обновляет аккумулятор.
✅Возвращает единственное значение — аккумулятор.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

Здесь reduce суммирует все элементы массива, начиная с аккумулятора, равного 0.

Метод filter

Создает новый массив, содержащий все элементы исходного массива, для которых функция-условие возвращает true.

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию-условие.
✅Возвращает новый массив с элементами, прошедшими условие.

const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

В этом примере filter создает новый массив, содержащий только четные числа из массива numbers.

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

Все три метода делают код более читаемым и декларативным, облегчая работу с массивами.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что такое стрелочная функция ?
Спросят с вероятностью 7%

Стрелочная функция (arrow function) — это сокращённый синтаксис для создания функций, введённый в стандарте ES6 (ECMAScript 2015). Стрелочные функции имеют компактный синтаксис и обладают некоторыми особенностями в отношении контекста this.

Зачем они нужны

Полезны для:
1️⃣Упрощения записи функций.
2️⃣Автоматического привязывания контекста this к окружению, в котором они были созданы (лексическое привязывание).

Синтаксис

Синтаксис стрелочной функции:

const функция = (аргументы) => {
  // тело функции
};

Примеры

1️⃣Функция без аргументов:

const sayHello = () => {
     console.log('Hello!');
   };

2️⃣Функция с одним аргументом:

const double = num => num * 2;

3️⃣Функция с несколькими аргументами:

const add = (a, b) => a + b;

4️⃣Функция с телом, содержащим несколько выражений:

      const sumAndLog = (a, b) => {
     const result = a + b;
     console.log(result);
     return result;
   };

Особенности

1️⃣Лексическое привязывание this: В стрелочных функциях this привязывается к контексту, в котором функция была определена. Это отличие от обычных функций, где this определяется в момент вызова функции.

      function Person() {
     this.age = 0;
   
     setInterval(() => {
       this.age++;
       console.log(this.age);
     }, 1000);
   }
   
   const person = new Person();
   

В этом примере стрелочная функция внутри setInterval использует this от внешней функции Person, что позволяет корректно увеличивать значение age.

2️⃣Отсутствие своего this, arguments, super и new.target: Стрелочные функции не имеют своих собственных версий этих объектов, что делает их непригодными в некоторых случаях, например, при использовании в качестве методов объекта.

3️⃣Нельзя использовать как конструкторы: Стрелочные функции нельзя использовать с оператором new.

const MyFunc = () => {};
   const instance = new MyFunc(); // Ошибка: MyFunc не является конструктором

Стрелочная функция — это короткий синтаксис для создания функций в JavaScript, который автоматически привязывает this к контексту, в котором она была создана. Они удобны для коротких функций и ситуаций, где требуется лексическое привязывание this.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Зачем нужен виртуальный дом ?
Спросят с вероятностью 7%

Виртуальный DOM (Virtual DOM) — это концепция, используемая в современных фреймворках и библиотеках, таких как React, для оптимизации и ускорения работы с реальным DOM. Реальный DOM медленный при частых изменениях, поэтому виртуальный DOM решает эту проблему, делая процесс более эффективным.

Зачем он нужен

1️⃣Улучшение производительности: Значительно уменьшает количество прямых манипуляций с реальным DOM, которые являются дорогостоящими с точки зрения производительности.
2️⃣Упрощение разработки: Работая с ним, можно более эффективно управлять состоянием приложения и его представлением, абстрагируясь от непосредственной работы с реальным DOM.

Как он работает

1️⃣Создание: Когда состояние приложения меняется, создаётся новый виртуальный DOM, представляющий обновлённое состояние.
2️⃣Сравнение: Сравниваются старый и новый виртуальные DOM, чтобы определить, какие части реального DOM нужно обновить. Этот процесс называется "диффинг" (diffing).
3️⃣Минимальные: После сравнения, в реальный DOM вносятся только необходимые изменения, что значительно снижает количество операций с ним.

Примеры

С React

import React, { useState } from 'react';

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

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

export default Counter;

В этом примере при каждом изменении состояния count React создаёт новый виртуальный DOM, затем сравнивает его с предыдущим виртуальным DOM и применяет только те изменения, которые необходимы для реального DOM.

Преимущества

1️⃣Повышение производительности: Благодаря уменьшению количества прямых операций с реальным DOM.
2️⃣Кроссбраузерная совместимость: Виртуальный DOM позволяет абстрагироваться от специфичных для браузера особенностей работы с DOM.
3️⃣Лёгкость обновлений и рендеринга: Использование виртуального DOM делает процесс обновления интерфейса приложения более предсказуемым и управляемым.

Виртуальный DOM — это оптимизация работы с реальным DOM, обеспечивающая более быструю и эффективную работу приложений. Он позволяет минимизировать количество изменений, вносимых в реальный DOM, что существенно повышает производительность и упрощает разработку.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых