Зачем нужен атрибут key в React?

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

 const numbers = [1, 2, 3, 4, 5];
 const listItems = numbers.map((number) =>
   <li key={number.toString()}>
     {number}
   </li>
 );

Лучший способ выбрать ключ — это использовать строку, которая будет явно отличать элемент списка от его соседей. Чаще всего вы будете использовать ID из ваших данных как ключи.

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

👉 @frontendInterview

👉 @frontendInterview

PureComponent

React.PureComponent похож на React.Component. Отличие заключается в том, что React.Component не реализует shouldComponentUpdate(), а React.PureComponent реализует его поверхностным сравнением пропсов и состояния.

Если метод render() вашего React-компонента всегда рендерит одинаковый результат при одних и тех же пропсах и состояниях, для повышения производительности в некоторых случаях вы можете использовать React.PureComponent.

👉 @frontendInterview

👉 @frontendInterview

Структуры данных и проектирование программ

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

👉 @frontendInterview

V A P O R C O D E

Создайте функцию, которая будет преобразовывать строку в стиле V A P O R W A V E. Для этого нужно все буквы преобразовать в заглавные и добавить по два пробела между ними

Пример:

 "Lets go to the movies" 
 //  "L  E  T  S  G  O  T  O  T  H  E  M  O  V  I  E  S"

👉 @frontendInterview

Что такое модули (Modules)?

Модули позволяют объединять (использовать) код из разных файлов и избавляют нас от необходимости держать весь код в одном большом файле. До появления модулей в JS существовало две популярные системы модулей для поддержки кода:

1. CommonJS — Nodejs
2. AMD (AsyncronousModuleDefinition) — Browsers

Синтаксис модулей очень простой: мы используем import для импорта функциональности или значений из другого файла или файлов и export для экспорта.

Экспорт функциональности в другой файл (именной экспорт):
// ES5 CommonJS - helpers.js
exports.isNull = function(val){
return val === null
}
// ES6 модули
export function isNull(val){
return val === null;
}

Импорт функциональности в другой файл:
// ES5 CommonJS - index.js
const helpers = require('./helpers.js')

// ES6 модули
import * as helpers from './helpers.js' // helpers - это объект

👉 @frontendInterview

👉 @frontendInterview

Как создать объект, не имеющий прототипа?

Это можно сделать с помощью Object.create:

 const o1 = {}
 console.log(o1.toString) // [object Object]

const o2 = Object.create(null)
// в качестве первого параметра методу Object-create передается объект-прототип
// нам не нужен объект-прототип, поэтому передаем null
console.log(o2.toString) // o2.toString is not a function

👉 @frontendInterview

​Как бы Вы реализовали метод Array.prototype.filter?

function filter(arr, filterCallback) {
// проверяем передаваемые параметры
if (!Array.isArray(arr) || !arr.length || typeof filterCallback !== 'function') {
return []
} else {
let result = []
for (let i = 0, len = arr.length; i < len; i++) {
// определяем соответствие возвращаемого результата заданному условию
if (filterCallback(arr[i], i, arr)) {
// помещаем значение, прошедшее фильтр, в result
result.push(arr[i])
}
}
return result
}
}

👉 @frontendInterview

Когда написал 10 строчек кода без помощи гугла

👉 @frontendInterview

👉 @frontendInterview

Learn Vue JS + Google Maps API for Beginners (2020)

Google Maps API - надежный инструмент, который часто выбирают при создании приложений, работающих с местоположением пользователя. В книге автор учит создавать программы с использованием Vue.js, приводя в пример некоторые приложения. Книга основана на популярном курсе с Udemy.

👉 @frontendInterview

Twice as old

Ваша функция должна принимать два аргумента:
1. Возраст отца
2. Возраст сына

Посчитайте, сколько лет назад отец был в два раза старше сына.

Пример:
twiceAsOld(36,7) => 22

👉 @frontendInterview