12 популярных вопросов с ответами на JavaScript собеседовании

1. Что такое JavaScript и для чего он используется?

Javascript - это высокоуровневый, динамичный и интерпретируемый язык программирования, широко используемый для многих сред, таких как интерфейс веб-сайтов, backend службы, desktop и мобильные приложения. Но чаще всего JavaScript используется для создания динамических и интерактивных веб-сайтов.

2. Что такое замыкание в JavaScript?

Замыкание — это функция, которая имеет доступ к переменным своей внешней функции. Это важно, потому что это позволяет внутренней функции «запоминать» переменные из своей внешней области, поэтому она может продолжать получать к ним доступ и манипулировать ими даже после того, как внешняя функция была завершена.

function outerFunction(x) {
  return function innerFunction(y) {
    return x + y;
  };
}

const add5 = outerFunction(5);
console.log(add5(3)); // 8

3. Как this работает в JavaScript?

this важное ключевое слово в JavaScript. Его значение определяется тем, как вызывается функция. Его можно задать явно с помощью call(), apply() или bind(). По умолчанию его значение внутри функции устанавливается в глобальный объект (в браузере это объект window), за исключением того, когда функция вызывается как метод объекта. В этом случае this указывает на объект, методом которого он является.

4. Что такое поднятие (hoisting) в JavaScript?

В JavaScript поднятие — это поведение, при котором переменные и объявления функций в памяти автоматически перемещаются в верхнюю часть своей области. Что это значит? Ну, это означает, что эти переменные могут быть использованы до того, как они будут объявлены, и объявления функций также могут быть вызваны до их определения.

5. В чем разница между var, let и const?

• var: Переменные, объявленные с помощью var, имеют функциональную область действия, что означает, что к ним можно получить доступ только в рамках функции, в которой они были объявлены. Внешняя переменная затеняется, когда переменная с тем же именем объявляется во вложенной функции.
• let: Пусть переменные имеют блочную область действия, что означает, что они доступны только в том блоке, в котором они объявлены. Объявление переменной с тем же именем во вложенном блоке приведет к затенению внешней переменной.
• const: переменные, объявленные с помощью const, также как let, имеют область действия блока, но их нельзя переназначить.

Вот пример:

function example() {
  var x = 1;
  let y = 2;
  const z = 3;

  if (true) {
    var x = 4;
    let y = 5;
    const z = 6;
  }

  console.log(x); // 4
  console.log(y); // 2
  console.log(z); // 3
}

example();

6. Какова разница между == и ===?

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

console.log(1 == '1'); // true
console.log(1 === '1'); // false

7. В чем разница между null и undefined?

undefined указывает, что переменная была объявлена, но ей не было присвоено значение. Значение nullпредставляет собой преднамеренное отсутствие какого-либо значения объекта. Другими словами, null — это явно заданное значение, указывающее на отсутствие значения.

8. Что такое событие в JavaScript?

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

const button = document.querySelector('button');

button.addEventListener('click', () => {
  console.log('Button was clicked!');
});

9. В чем разница между синхронным и асинхронным кодом в JavaScript?

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

10. Что такое промисы (Promise) в JavaScript?

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

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched!');
    }, 1000);
  });
};

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

11. Что такое обратный вызов в JavaScript?

Функция обратного вызова передается в качестве аргумента другой функции и выполняется после завершения внешней функции. Разработчики могут использовать обратные вызовы для указания кода, который будет выполняться после завершения асинхронной операции. Пример:

const fetchData = (callback) => {
  setTimeout(() => {
    callback('Data fetched!');
  }, 1000);
};

fetchData(data => {
  console.log(data);
});

12. Что такое AJAX в JavaScript?

AJAX (асинхронный JavaScript и XML) — это метод выполнения асинхронных серверных запросов с веб-страницы без перезагрузки всей страницы. AJAX позволяет разработчикам динамически обновлять веб-страницу новыми данными без необходимости обновления страницы. Это достигается путем отправки HTTP-запроса из браузера на сервер и обновления только тех частей страницы, которые требуют его с ответом. Это улучшает взаимодействие с пользователем, поскольку страница не перезагружается, а обновляются только необходимые данные. Пример:

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data');

xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(xhr.responseText);
  }
};

xhr.send();

Еще больше вопросов с собеседований можно найти здесь.

Введение

Важно освоить основы React. И правда в том, что вы можете продвинуться довольно далеко без тонны дополнительных библиотек. Но есть несколько основополагающих инструментов, которые могут вывести ваш опыт разработки React на новый уровень. Эти библиотеки решают наиболее распространенные задачи в разработке React, такие как запросы данных с API, стилизация, доступность и управление состоянием, и они делают это минимальным и ненавязчивым способом. Это обеспечивает постепенное внедрение в кодовую базу. Мы составили список из пяти таких библиотек, о которых, по нашему мнению, вам следует знать.

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

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

React Query

Проще говоря, React Query делает получение данных в React намного удобнее. Но это не библиотека для получения данных как таковая. Вместо этого это библиотека управления состоянием, которая имеет дело с асинхронным состоянием сервера. Вы предоставляете ей асинхронную функцию, которая затем извлекает данные. useQuery предоставляет вам кучу полезных утилит для обработки асинхронной функции:

• Флаг состояния загрузки
• Кэширование результатов
• Инвалидация и повторный запрос данных

Список небольшой. Но влияние, которое он оказывает на большие кодовые базы, нельзя недооценивать. Как правило, кодовые базы имеют много логики для глобального обмена результатами выборки, их обновления при изменении данных, триггеров для получения данных и многого другого. Большая часть этого просто больше не нужна при использовании React Query. Кэширование означает, что вы можете вызвать хук useQuery по всему приложению, и данные будут совместно использоваться. https://github.com/TanStack/query

Zustand

Каждый React разработчик знает, как сложно шэрить состояние в приложении. При первом столкновении с проблемой вы неизбежно заканчиваете «просверливанием» данных по дереву компонентов (prop drilling). Излишне говорить, что это не делает код чистым и не является устойчивым в долгосрочной перспективе. К счастью, React придумал контекст для решения этой проблемы. Контекст отлично подходит, если все, что вам нужно сделать, это передать несколько значений вниз по дереву компонентов. Но он может стать громоздким для использования в более сложных глобальных сторах. Разработчики должны быть осторожны с последствиями для производительности, и некоторые разработчики не являются большими поклонниками Context API. Zustand предлагает чрезвычайно простой API, который позволяет создавать хранилище со значениями и функциями. Затем вы можете получить доступ к этому хранилищу из любого места в приложении для чтения и записи значений. Реактивность включена. Если вы хотите хранить данные вложенных объектов в своем хранилище, рассмотрите возможность использования Immer вместе с Zustand, чтобы легко изменить вложенное состояние. https://github.com/pmndrs/zustand

Framer Motion

Анимация — один из лучших способов придать вашему React приложению современный вид. Но это непросто. Использование CSS анимации сложно и может привести к большому количеству кода. Напротив, Framer Motion предлагает мощный, но простой API для создания пользовательских анимаций. Он изначально интегрирован в экосистему React с набором хуков и компонентов. Например, этот код - все, что требуется для плавной анимации преобразования из круга в квадрат:

import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}
  />
)

Каждое значение в массиве представляет ключевой кадр для соответствующего свойства. Затем анимация проходит через этот цикл. Конечно, вы можете сделать гораздо больше, чем просто определить ключевые кадры с помощью Framer Motion. Вы также можете анимировать изменения в макете, обрабатывать жесты или анимировать на основе прокрутки. https://github.com/framer/motion

Class Variance Authority (CVA)

TailwindCSS быстро превратился в основной способ стилизации приложений React. Но создание многоразовых элементов пользовательского интерфейса с его помощью может быть сложной задачей. Допустим, вы создаете свою собственную кнопку с помощью Tailwind. Так как вы хотите повторно использовать его во всем своем приложении, вы создаете компонент. Но теперь вам нужно несколько вариантов этого компонента. Основной стиль и дополнительный стиль. Итак, теперь вам нужно собрать классы Tailwind вместе в соответствии со значением пропса. Теперь вам также нужны разные цвета и разные размеры для вашей кнопки. Так что добавьте немного пропса и еще больше условной логики, чтобы выяснить правильную комбинацию классов Tailwind. Это может увеличить кодовую базу и усложнить понимание. CVA, сокращение от Class Variance Authority. Это простая библиотека, которая избавляет от необходимости создавать компонуемые компоненты React с именами классов Tailwind. Возьмем этот пример из их документации:

import React from "react";
import { cva, type VariantProps } from "class-variance-authority";

const button = cva("button", {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof button> {}

export const Button: React.FC<ButtonProps> = ({
  className,
  intent,
  size,
  ...props
}) => <button className={button({ intent, size, className })} {...props} />;

Мы декларативно описываем стили кнопок для каждого значения параметра. Затем CVA выполняет работу по выяснению правильной комбинации стилей. Мы даже можем указать варианты по умолчанию, чтобы сделать определенные свойства необязательными. https://github.com/joe-bell/cva

Radix UI

Если вам нравится создавать полностью кастомизированные пользовательские интерфейсы, но вы не хотите разбираться в тонкостях разработки высококачественных доступных компонентов пользовательского интерфейса с нуля, Radix UI для вас. Библиотека поставляется с различными часто используемыми компонентами пользовательского интерфейса. Например, диалоговые окна, чекбоксы и раскрывающиеся списки. Но с изюминкой. Хотя компоненты содержат всю логику и интерактивность, они не имеют стиля. Это означает, что у вас есть полный контроль над стилизацией компонентов самостоятельно. Это позволяет вам создать действительно настраиваемую систему пользовательского интерфейса, которая не похожа на любой другой веб-сайт. Имея полный контроль над стилем, Radix делает всю остальную работу за вас. Все компоненты полностью доступны - скажем, через навигацию с помощью клавиатуры. Если вам нравится гибкость Radix, но вы не хотите стилизовать все с нуля, вам стоит попробовать shadcn/ui. Это полностью модульная библиотека компонентов, построенная на основе Radix и Tailwind. Вместо того, чтобы устанавливать пакет NPM, вы можете скопировать код непосредственно в свой проект и изменить его по своему вкусу. https://github.com/radix-ui/primitives

Итоги

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