Часть 3–100 Advanced JavaScript Вопросы для собеседования с ответами и примерами кода

Введение:

Повысьте свои знания JavaScript с помощью набора из 10 дополнительных сложных вопросов для собеседования. Изучите сложные концепции, такие как лексическая область видимости, шаблоны проектирования, асинхронное программирование и многое другое. Получите ценную информацию и освойте эти темы с подробными ответами и практическими примерами кода. Приготовьтесь преуспеть в интервью по JavaScript и продемонстрировать свое владение этим динамичным языком. (часть 3 серии)

Прочтите 100 вопросов для интервью по продвинутому JavaScript с ответами и примерами кода (часть 2), если вы не читали эту статью!

• В чем разница между поверхностным копированием и глубоким копированием в JavaScript? Приведите примеры для каждого.
• Объясните концепцию неизменности в JavaScript и почему это важно. Приведите пример.
• Что такое функция-генератор в JavaScript? Приведите пример его использования.
• Объясните концепцию всплытия событий в JavaScript и как его остановить. Приведите пример.
• Каковы различия между объявлениями функций и выражениями функций в JavaScript? Приведите примеры для каждого.
• Объясните концепцию параметра rest в функциях JavaScript и приведите пример его использования.
• Какова цель метода Object.setPrototypeOf() в JavaScript? Приведите пример.
• Объясните концепцию событийно-управляемой парадигмы программирования в JavaScript и приведите пример.
• Что такое обещания JavaScript и как они работают? Приведите пример.
• Объясните концепцию шаблона модуля в JavaScript и приведите пример.

21- В чем разница между поверхностным и глубоким копированием в JavaScript? Приведите примеры для каждого.

Отвечать:

1- Неглубокая копия: неглубокая копия создает новый объект, который ссылается на свойства исходного объекта. Изменение свойств нового объекта может повлиять на исходный объект.

const originalObj = { name: 'John', age: 30 };
const shallowCopy = Object.assign({}, originalObj);

shallowCopy.name = 'Jane';
console.log(originalObj.name); // Output: 'John'

2- Глубокая копия: Глубокая копия создает новый объект с собственным уникальным набором свойств, рекурсивно копируя все вложенные объекты и массивы.

const originalObj = { name: 'John', age: 30 };
const deepCopy = JSON.parse(JSON.stringify(originalObj));

deepCopy.name = 'Jane';
console.log(originalObj.name); // Output: 'John'

22- Объясните концепцию неизменности в JavaScript и почему это важно. Приведите пример.

Отвечать:

Неизменяемость относится к невозможности изменения объекта (или его состояния) после его создания. В JavaScript примитивные значения (например, строки, числа) неизменяемы, а объекты и массивы изменяемы. Неизменяемость важна, поскольку помогает избежать непреднамеренных побочных эффектов, упрощает управление состоянием и повышает производительность.

const originalObj = { name: 'John' };
const newObj = { ...originalObj, age: 30 };

console.log(originalObj); // Output: { name: 'John' }
console.log(newObj); // Output: { name: 'John', age: 30 }

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

23- Что такое функция генератора в JavaScript? Приведите пример его использования.

Отвечать:

Генераторная функция — это особый тип функции, выполнение которой можно приостанавливать и возобновлять. Он определяется с использованием синтаксиса function* и использует ключевое слово yield для получения последовательности значений.

function* countUpTo(max) {
  for (let i = 1; i <= max; i++) {
    yield i;
  }
}

const generator = countUpTo(5);

console.log(generator.next().value); // Output: 1
console.log(generator.next().value); // Output: 2
console.log(generator.next().value); // Output: 3

В этом примере функция-генератор countUpTo выдает последовательность чисел до заданного максимального значения. Каждый вызов generate.next() возвращает объект со свойством value, содержащим следующее полученное значение.

24- Объясните концепцию всплытия событий в JavaScript и как его остановить. Приведите пример.

Отвечать:

Всплывание событий — это явление, при котором событие, инициированное для вложенного элемента, также инициируется для его родительских элементов в иерархии DOM. Он следует порядку от самого внутреннего элемента к самому внешнему элементу. Чтобы остановить всплытие событий, можно использовать метод event.stopPropagation().

document.getElementById('inner').addEventListener('click', event => {
  console.log('Inner element clicked');
  event.stopPropagation();
});

document.getElementById('outer').addEventListener('click', event => {
  console.log('Outer element clicked');
});

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

25- В чем разница между объявлениями функций и выражениями функций в JavaScript? Приведите примеры для каждого.

Отвечать:

1- Объявление функции:

function sum(a, b) {
  return a + b;
}

console.log(sum(2, 3)); // Output: 5

2- Функциональное выражение:

const sum = function(a, b) {
  return a + b;
};

console.log(sum(2, 3)); // Output: 5

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

26- Объясните концепцию параметра rest в функциях JavaScript и приведите пример его использования.

Отвечать:

Параметр rest позволяет функции принимать неопределенное количество аргументов в виде массива. Он обозначается тремя точками (...), за которыми следует имя параметра. Параметр rest собирает оставшиеся аргументы, переданные функции.

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // Output: 15

В примере функция sum может принимать любое количество аргументов, а параметр number будет массивом, содержащим все переданные аргументы.

27- Каково назначение метода Object.setPrototypeOf() в JavaScript? Приведите пример.

Отвечать:

Метод Object.setPrototypeOf() используется для установки прототипа (т. е. внутреннего свойства [[Prototype]]) объекта.

const parent = { name: 'John' };
const child = { age: 30 };

Object.setPrototypeOf(child, parent);

console.log(child.name); // Output: 'John'

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

28- Объясните концепцию событийно-ориентированного программирования в JavaScript и приведите пример.

Отвечать:

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

document.getElementById('btn').addEventListener('click', () => {
  console.log('Button clicked');
});

В примере программа ожидает, когда произойдет событие щелчка по элементу кнопки с идентификатором btn. После запуска события (например, при нажатии кнопки) выполняется указанная функция обратного вызова.

29- Что такое обещания JavaScript и как они работают? Приведите пример.

Отвечать:

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

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Sample data';
      resolve(data);
    }, 2000);
  });
}

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

В этом примере функция fetchData возвращает обещание, которое разрешается с данными после имитации асинхронной задержки в 2 секунды. Метод .then() используется для обработки разрешенного значения, а метод .catch() используется для обработки любых возникающих ошибок.

30- Объясните концепцию шаблона модуля в JavaScript и приведите пример.

Отвечать:

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

const counterModule = (function() {
  let count = 0;

  function increment() {
    count++;
  }

  function decrement() {
    count--;
  }

  function getCount() {
    return count;
  }

  return {
    increment,
    decrement,
    getCount
  };
})();

console.log(counterModule.getCount()); // Output: 0
counterModule.increment();
counterModule.increment();
console.log(counterModule.getCount()); // Output: 2

В этом примере шаблон модуля создает модуль счетчика с частной переменной count и общедоступными методами increment, decrement и getCount. Приватная переменная доступна только внутри модуля, а публичные методы обеспечивают контролируемый доступ к приватному состоянию.

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