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

Как работает реактивность в vue.Js ? Спросят с вероятностью 7% Реактивность — это одна из ключевых характеристик фреймворка, которая позволяет автоматически обновлять пользовательский интерфейс при изменении состояния. Вот как это работает: Основные концепции 1️⃣Реактивные данные: Vue использует объекты с реактивными свойствами, чтобы отслеживать изменения. Когда данные изменяются, Vue автоматически обновляет связанные с ними компоненты. 2️⃣Объект Vue: При создании нового экземпляра Vue, он делает все данные, определенные в опции data, реактивными.

      var vm = new Vue({
     data: {
       message: 'Hello Vue!'
     }
   });
   

3️⃣Реактивность через геттеры и сеттеры: Vue использует JavaScript Proxy (или Object.defineProperty в более старых версиях) для создания реактивных свойств. Каждый раз, когда свойство считывается, вызывается геттер, и когда свойство изменяется, вызывается сеттер. Пример реактивности

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

При изменении vm.message интерфейс автоматически обновится:

vm.message = 'Hello World!';

Как это работает "под капотом" 1️⃣Инициализация: При инициализации Vue.js обходит все свойства объекта data и преобразует их в геттеры и сеттеры с помощью Object.defineProperty. Этот процесс называется обсервацией. 2️⃣Детекторы изменений (Observers): Каждый раз, когда создается реактивное свойство, создается объект наблюдателя (Observer), который следит за изменениями этого свойства. 3️⃣Депенденси трекинг (Dependency Tracking): Во время рендера компонента, Vue регистрирует все зависимости (реактивные свойства), которые используются. Это означает, что Vue "запоминает", какие свойства нужно отслеживать для каждого компонента. 4️⃣Реактивное обновление: Когда реактивное свойство изменяется, Vue уведомляет все компоненты, которые зависят от этого свойства, и они автоматически перерисовываются. Реактивные системы в действиях

new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 2
  },
  computed: {
    sum() {
      return this.a + this.b;
    }
  },
  watch: {
    a(newValue, oldValue) {
      console.log(`a изменилось с ${oldValue} на ${newValue}`);
    }
  }
});

✅Вычисляемые свойства: sum автоматически пересчитывается, когда a или b изменяются. ✅Наблюдатели (watchers): Реагируют на изменения данных и могут выполнять побочные эффекты. Преимущества 1️⃣Простота использования: Можно сосредоточиться на логике приложения, а не на обновлении DOM. 2️⃣Высокая производительность: Vue эффективно отслеживает изменения и обновляет только те части DOM, которые изменились. 3️⃣Поддержка сложных приложений: Реактивная система Vue легко масштабируется для больших и сложных приложений. Реактивность позволяет автоматически обновлять интерфейс при изменении данных. Она работает с использованием геттеров и сеттеров для отслеживания изменений и обновления связанных компонентов. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Совет фронтендерам: уважайте свое время В Html Gram собраны готовые и уникальные codepen решения на каждый день. От эффектов при наведении до 3D анимации. Учитесь, практикуйтесь и прокачивайте свое портфолио вместе с @HtmlGram

Что происходит в момент запроса в браузере ? Спросят с вероятностью 3% Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. Рассмотрим основные этапы, происходящие при выполнении HTTP-запроса в браузере: 1️⃣Ввод URL и начало запроса ✅Пользователь вводит URL в адресную строку браузера. ✅Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы. 2️⃣DNS-разрешение ✅Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера. 3️⃣Установление TCP-соединения После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие: ✅Браузер отправляет SYN-пакет серверу. ✅Сервер отвечает SYN-ACK пакетом. ✅Браузер отправляет ACK-пакет, подтверждая установление соединения. 4️⃣HTTPS и SSL/TLS ✅Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS: ✅Браузер и сервер обмениваются сертификатами и выполняют шифрование данных. 5️⃣Отправка HTTP-запроса ✅Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com
     

6️⃣Обработка запроса на сервере ✅Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц. 7️⃣Получение и обработка HTTP-ответа ✅Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>
     

8️⃣Парсинг и рендеринг страницы ✅Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы. ✅В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки. 9️⃣Выполнение JavaScript ✅После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы. ✅JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки. 🔟Финальная отрисовка ✅После загрузки всех ресурсов и выполнения JavaScript браузер завершает отрисовку страницы. Пользователь видит конечный результат в своем браузере. Когда пользователь вводит URL в браузере и нажимает Enter, происходит следующее: 1️⃣Браузер проверяет кэш и выполняет DNS-запрос для получения IP-адреса. 2️⃣Устанавливается TCP-соединение и, если используется HTTPS, SSL/TLS-соединение. 3️⃣Отправляется HTTP-запрос к серверу. 4️⃣Сервер обрабатывает запрос и возвращает HTTP-ответ. 5️⃣Браузер парсит HTML, загружает и обрабатывает ресурсы (CSS, JavaScript, изображения), строит DOM и CSSOM. 6️⃣Выполняется JavaScript, что может изменять DOM и CSSOM. 7️⃣Страница рендерится и отображается пользователю. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Зачем нужен redux ? Спросят с вероятностью 7% Redux нужен для управления состоянием в JavaScript-приложениях, особенно когда они становятся крупными и сложными. Вот несколько причин, почему он полезен: 1️⃣Централизованное управление состоянием Redux хранит всё состояние приложения в одном месте, называемом хранилищем (store). Это облегчает управление состоянием и делает его предсказуемым. 2️⃣Предсказуемость состояния Благодаря строгим правилам (например, редюсеры должны быть чистыми функциями), состояние в Redux меняется предсказуемо. Это упрощает отладку и тестирование приложения. 3️⃣Удобная отладка Существуют инструменты, такие как Redux DevTools, которые позволяют видеть, как состояние изменяется с каждым действием. Это делает отладку проще и более наглядной. 4️⃣Управление сложным состоянием В больших приложениях состояние может быть очень сложным и распределённым по многим компонентам. Redux помогает управлять этим состоянием, избегая "пробрасывания" пропсов через многие уровни компонентов. 5️⃣Упрощение синхронных и асинхронных операций Redux хорошо сочетается с middleware, такими как Redux Thunk или Redux Saga, для обработки асинхронных операций, например, запросов к API. Это позволяет управлять побочными эффектами централизованно. Пример: 1️⃣Централизованное хранилище: Все состояния приложения хранятся в одном месте, что упрощает управление ими.

      import { createStore } from 'redux';
   const store = createStore(reducer);
   

2️⃣Предсказуемость: Каждый редюсер — чистая функция, которая принимает текущее состояние и действие и возвращает новое состояние.

      function reducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { count: state.count + 1 };
       case 'DECREMENT':
         return { count: state.count - 1 };
       default:
         return state;
     }
   }
   

3️⃣Отладка: Использование Redux DevTools позволяет видеть историю изменений состояния и отладку приложения.

      // Подключение Redux DevTools
   const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
   

4️⃣Асинхронные операции: С помощью middleware, таких как Redux Thunk, можно обрабатывать асинхронные действия.

      import thunk from 'redux-thunk';
   import { applyMiddleware, createStore } from 'redux';

   const store = createStore(reducer, applyMiddleware(thunk));

   // Асинхронное действие
   const fetchData = () => {
     return async (dispatch) => {
       const response = await fetch('https://api.example.com/data');
       const data = await response.json();
       dispatch({ type: 'DATA_LOADED', payload: data });
     };
   };
   

Redux нужен для централизованного, предсказуемого управления состоянием в больших и сложных JavaScript-приложениях. Он облегчает отладку, управление сложным состоянием и асинхронные операции. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Что такое redux ? Спросят с вероятностью 7% Redux — это библиотека для управления состоянием приложениях, часто используемая с React. Она помогает управлять состоянием приложения предсказуемым образом, облегчая процесс разработки сложных приложений. Основные концепции: 1️⃣Хранилище (Store): Хранилище — это объект, который содержит всё состояние приложения. В Redux может быть только одно хранилище. Оно создается с помощью функции createStore.

      import { createStore } from 'redux';
   const store = createStore(reducer);
   

2️⃣Действия (Actions): Действия — это объекты, которые описывают изменения состояния. Каждое действие имеет тип (свойство type), который указывает, какое изменение должно произойти, и дополнительные данные (payload), если это необходимо.

      const incrementAction = {
     type: 'INCREMENT',
     payload: 1
   };
   

3️⃣Редюсеры (Reducers): Редюсеры — это функции, которые определяют, как состояние приложения изменяется в ответ на действия. Они принимают текущее состояние и действие, а возвращают новое состояние.

      const initialState = { count: 0 };

   function counterReducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { ...state, count: state.count + action.payload };
       case 'DECREMENT':
         return { ...state, count: state.count - action.payload };
       default:
         return state;
     }
   }
   

4️⃣Диспетчеризация (Dispatch): Для изменения состояния приложения необходимо отправить действие в хранилище с помощью метода dispatch.

store.dispatch(incrementAction);

5️⃣Подписка (Subscription): Приложение может подписываться на изменения состояния в хранилище, чтобы обновлять интерфейс пользователя при изменении состояния.

      store.subscribe(() => {
     console.log(store.getState());
   });
   

Пример с React: 1️⃣Установка Redux и React-Redux:

npm install redux react-redux

2️⃣Создание хранилища и редюсера:

      // store.js
   import { createStore } from 'redux';

   const initialState = { count: 0 };

   function counterReducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { ...state, count: state.count + 1 };
       case 'DECREMENT':
         return { ...state, count: state.count - 1 };
       default:
         return state;
     }
   }

   const store = createStore(counterReducer);
   export default store;
   

3️⃣Подключение хранилища к React приложению:

      // index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import App from './App';
   import store from './store';

   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById('root')
   );
   

4️⃣Использование состояния и действий в компонентах:

      // App.js
   import React from 'react';
   import { useSelector, useDispatch } from 'react-redux';

   function App() {
     const count = useSelector(state => state.count);
     const dispatch = useDispatch();

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
       </div>
     );
   }

   export default App;
   

Redux — это библиотека для управления состоянием приложениях. Она использует хранилище для состояния, действия для описания изменений, редюсеры для обработки этих изменений и диспетчеризацию для применения действий. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Назови компоненты жизненного цикл ? Спросят с вероятностью 7% Жизненный цикл компонента состоит из нескольких этапов, которые можно разделить на три основные фазы: монтирование, обновление и размонтирование. Каждый из этих этапов включает в себя определённые методы цикла. 1️⃣Монтирование (Mounting): ✅constructor(): Вызывается перед монтированием компонента. Обычно используется для инициализации состояния и привязки методов. ✅staticgetDerivedStateFromProps(props, state): Вызывается перед рендером компонента как при монтировании, так и при обновлении. Используется для синхронизации состояния с пропсами. ✅render(): Обязательный метод, который возвращает JSX-разметку компонента. ✅componentDidMount(): Вызывается сразу после монтирования компонента. Здесь можно выполнять запросы к API или подписываться на события. 2️⃣Обновление (Updating): ✅staticgetDerivedStateFromProps(props, state): Как и при монтировании, вызывается перед рендером компонента для синхронизации состояния с пропсами. ✅shouldComponentUpdate(nextProps, nextState): Определяет, нужно ли компоненту перерисовываться. Можно использовать для оптимизации производительности. ✅render(): Ререндер компонента на основе новых пропсов или состояния. ✅getSnapshotBeforeUpdate(prevProps, prevState): Вызывается прямо перед тем, как изменённый DOM будет отображен. Полезно для сохранения информации о DOM, которая может измениться после обновления. ✅componentDidUpdate(prevProps, prevState, snapshot): Вызывается сразу после обновления компонента. Можно использовать для выполнения действий после обновления, таких как запросы к API на основе новых пропсов или состояния. 3️⃣Размонтирование (Unmounting): ✅componentWillUnmount(): Вызывается перед размонтированием и удалением компонента. Используется для очистки ресурсов, таких как таймеры, подписки или запросы. Пример:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // Синхронизация состояния с пропсами
    if (nextProps.count !== prevState.count) {
      return { count: nextProps.count };
    }
    return null;
  }

  componentDidMount() {
    // Выполнение действий после монтирования
    console.log('Component mounted');
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Оптимизация перерисовки
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Сохранение информации о DOM
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Выполнение действий после обновления
    console.log('Component updated');
  }

  componentWillUnmount() {
    // Очистка ресурсов перед удалением компонента
    console.log('Component will unmount');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

Жизненный цикл компонента включает три фазы: монтирование, обновление и размонтирование. В каждой фазе есть свои методы, которые выполняют определенные действия для управления состоянием и поведением компонента. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 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 разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Cамый простой способ изучить Java — залезть в голову профи Один из лучших айтишников России учит базе кодинга в Telegram. Даже гуманитарий поймёт, как создавать приложения, сайты, игры и чат-боты. Достаточно подписаться на «Секреты Java», где каждый день появляются гайды, готовые примеры кода и лучших практик. И всё это бесплатно — вместо сотен тысяч рублей за курсы. Стартовать в прибыльной профессии с нуля вы сможете гораздо проще! Теперь обучиться Java может каждый: @java_secrets

Что такое стрелочная функция ? Спросят с вероятностью 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 разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

У топовых айтишников есть секрет, они работают не 8 часов, а головой! Понимают, что без английского в айти делать нечего. Поэтому в начале карьеры изучают технический английский, а потом смело прибавляют +40% к рыночной зарплате. Знают где в телеграме брать современные идеи и материалы для работы. Например, для web-разработчиков – это Сайтодел. Становись Senior-разработчиком. Всё просто, два клика: → Английский для программистов → Сайтодел 🎁 Бесплатно: Поиск разработчика для сайта и первый созвон по обучению английскому. Не упускай такую возможность!

Как работают 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% Самовызывающаяся функция (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 разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Что делает метод 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 разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Какие структуры данных есть в 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 разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Мидл-специалист отличается от джуниор-разработчика не только опытом и уровнем владения технологиями, но и софт-скилами. На курсе Практикума вы сможете прокачать все необходимые навыки и построить новую карьеру. На курсе мы поможем вам: — освоить новые навыки и извлекать больше пользы из своих софт-скилов; — углубить знания в алгоритмах, DevOps, бэкенд‑разработке и смежных сферах; — сделать с нуля 2 проекта — до работающих приложений. Если вы не уверены, подойдёт ли вам профессия, — пройдите бесплатную часть и тест в конце. Если понравится, платите за остальную часть как удобно: в рассрочку или целиком. → Начать курс бесплатно