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

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

Стартуем! ????

1. Что такое цикл событий (event loop) и как он работает?

Цикл событий (event loop) - это механизм, используемый в JavaScript и других языках программирования для обработки событий и выполнения асинхронного кода. Он позволяет программе эффективно обрабатывать события, такие как пользовательские действия, таймеры, сетевые запросы и другие асинхронные операции.

Работа цикла событий в JavaScript обычно выглядит следующим образом:

1. Ожидание событий: Цикл событий начинает свою работу, ожидая возникновения событий. Это могут быть пользовательские действия (например, щелчки мыши или нажатия клавиш), таймеры, сетевые запросы или другие асинхронные операции.

2. Обработка событий: Когда событие происходит, оно помещается в очередь событий (event queue). Цикл событий извлекает событие из очереди и передает его на обработку.

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

4. Обработка асинхронного кода: Если в обработчике события есть асинхронный код, такой как таймеры или сетевые запросы, он не блокирует выполнение других событий. Вместо этого асинхронный код помещается в очередь задач (task queue) для выполнения в будущем.

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

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

Еще можно почитать здесь.

2. Какие типы данных есть в JS?

Часто кандидаты ошибаются, когда отвечают на этот вопрос, почему так происходит не понятно.

Всего в JS 8 типов данных:

• Число (number)

• Строка (string)

• Булевый (логический) тип (boolean)

• BigInt

• Symbol

• null

• undefiend

• Object

3. Что такое NaN? Какого типа это значение? Как можно узнать, равно ли значение переменной NaN?

NaN расшифровывается как "Not A Number", это "false" (ложное) значение. Будьте аккуратны, выражение typeof NaN возвращает тип Number. Чтобы проверить значение переменной на соответствие NaN можно, воспользовавшись встроенным методом isNaN() или используя оператор тройного равенства ===.

let x = NaN;
console.log(isNaN(x)); // true

let y = 5 / "hello";
console.log(Number.isNaN(y)); // true

let z = 10;
console.log(isNaN(z)); // false

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

Начнем с var:

• Переменные, объявленные с помощью var, имеют функциональную область видимости или область видимости внутри целого файла.

• Переменные var могут быть переопределены и переобъявлены в той же области видимости.

• Переменные var поднимаются (hoisted) в начало своей области видимости, что означает, что их можно использовать до их фактического объявления.

  Пример:

console.log(x); // undefined
var x = 5;
console.log(x); // 5

let:

• Переменные, объявленные с помощью let, имеют блочную область видимости, ограниченную фигурными скобками {}.

• Переменные let не могут быть переобъявлены в той же области видимости, но могут быть переопределены.

• Переменные let не поднимаются (не hoisted) и не могут быть использованы до их объявления.

  Пример:

console.log(x); // ReferenceError: x is not defined
let x = 5;
console.log(x); // 5

const:

• Переменные, объявленные с помощью const, также имеют блочную область видимости.

• Переменные const должны быть инициализированы при объявлении и их значение не может быть изменено после этого.

• Переменные const не могут быть переобъявлены или переопределены.

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

  Примеры:

const x = 5;
console.log(x); // 5

x = 10; // TypeError: Assignment to constant variable.

const a = [];
a.push(1); // Так можно

const b = {};
b['a'] = 1; // Так тоже можно

5. Что такое this? Отличие this в function declaration и стрелочных функциях

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

Функции (function declaration):

• В функциях объявления значение this определяется во время выполнения функции, в зависимости от способа вызова функции.

• Если функция вызывается как метод объекта, то this ссылается на сам объект, на котором вызывается метод.

• Если функция вызывается как обычная функция, то this ссылается на глобальный объект (в браузере это объект window).

  Пример:

function sayHello() {
  console.log(this.name);
}

const person = {
  name: 'John',
  sayHello: sayHello
};

person.sayHello(); // Выводит 'John'

const greet = person.sayHello;
greet(); // Выводит undefined (или ошибку, если 'use strict' включен)

Стрелочные функции (arrow functions):

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

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

• Вместо этого, this в стрелочных функциях ссылается на this окружающего контекста.

  Пример:

const person = {
  name: 'John',
  sayHello: function() {
    const greet = () => {
      console.log(this.name);
    };
    greet();
  }
};

person.sayHello(); // Выводит 'John'

6. С помощью чего в JS реализуются наследование?

В JavaScript наследование реализуется с помощью прототипов. Прототипное наследование - это механизм, который позволяет объектам наследовать свойства и методы других объектов. Еще появился новый в ECMAScript 2015 с помощью ключевого слова class.

Каждый объект в JavaScript имеет внутреннюю ссылку на прототип (prototype), которая указывает на другой объект. 

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

Прототипное наследование с использованием prototype:

• Создается конструктор (функция-класс), у которого есть свойство prototype.

• Создаются новые объекты с помощью этого конструктора с помощью ключевого слова new.

• Прототип нового объекта устанавливается равным прототипу конструктора.

  Пример:

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof!');
};

const myDog = new Dog('Buddy', 'Labrador');
myDog.sayHello(); // Выводит 'Hello, my name is Buddy'
myDog.bark(); // Выводит 'Woof!'

Наследование с использованием class (введено в ECMAScript 2015):

• Используется ключевое слово class для определения класса.

• Используется ключевое слово extends для указания родительского класса.

• Методы родительского класса могут быть переопределены или расширены в дочернем классе с помощью ключевого слова super.

  Пример

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

  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log('Woof!');
  }
}

const myDog = new Dog('Buddy', 'Labrador');
myDog.sayHello(); // Выводит 'Hello, my name is Buddy'
myDog.bark(); // Выводит 'Woof!'

7. Что такое IIFE (Immediately Invoked Function Expression)?

IIFE (Immediately Invoked Function Expression) - это выражение функции, которое вызывается немедленно после его определения. Оно позволяет создавать локальную область видимости для переменных и функций, чтобы избежать конфликтов имен и сохранить приватность данных.

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

Пример IIFE:

(function() {
  // Код, который будет выполнен немедленно
  var x = 5;
  console.log(x); // Выводит 5
})();

// Переменные и функции, определенные внутри IIFE, не видны в глобальной области видимости
console.log(x); // ReferenceError: x is not definedВ приведенном примере, функция обернута в круглые скобки (function() { ... }), чтобы превратить ее в выражение. Затем, после закрывающей скобки, добавляются еще одни круглые скобки () для вызова функции немедленно.

В приведенном примере, функция обернута в круглые скобки (function() { ... }), чтобы превратить ее в выражение. Затем, после закрывающей скобки, добавляются еще одни круглые скобки () для вызова функции немедленно.

IIFE может принимать аргументы, например:

(function(name) {
  console.log('Hello, ' + name);
})('John'); // Выводит 'Hello, John'

IIFE также может возвращать значение, которое может быть присвоено переменной:

var result = (function() {
  return 5 + 3;
})();

console.log(result); // Выводит 8

Использование IIFE помогает изолировать код и предотвращает его влияние на глобальную область видимости, что способствует более безопасному и организованному коду.

8. В чем разница между == и ===?

В JavaScript операторы сравнения == (двойное равенство) и === (тройное равенство) используются для сравнения значений. Они имеют следующие различия:

== (двойное равенство):

• Оператор == выполняет нестрогое сравнение, сравнивая значения с приведением типов, если это необходимо.

• Если типы операндов различаются, JavaScript пытается привести их к одному типу перед сравнением.

• Например, при сравнении числа и строки, строка будет преобразована в число перед сравнением.

  Пример

console.log(5 == '5'); // true
console.log(true == 1); // true
console.log(null == undefined); // true

=== (тройное равенство):

• Оператор === выполняет строгое сравнение, сравнивая значения без приведения типов.

• Он сравнивает значения и типы операндов, и возвращает true только если они идентичны.

  Пример:

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

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

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

Небольшие примеры:

function outerFunction() {
  var outerVariable = 'Hello';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // Вывод: Hello

function createCounter() {
  var count = 0;

  return {
    increment: function() {
      count++;
      console.log(count);
    },
    decrement: function() {
      count--;
      console.log(count);
    }
  };
}

var counter = createCounter();
counter.increment(); // Вывод: 1
counter.increment(); // Вывод: 2
counter.decrement(); // Вывод: 1

10. Что такое Promise, и какие бывают состояния

Promise - это объект в JavaScript, который представляет результат асинхронной операции. Промис позволяет обрабатывать результат операции, когда он станет доступным, вместо того, чтобы блокировать выполнение кода и ожидать завершения операции.

Промис может находиться в одном из трех состояний:

Pending: Исходное состояние промиса. Он находится в ожидании выполнения или отклонения операции.

Fulfilled: Промис переходит в это состояние, когда операция успешно завершается. В этом случае промис возвращает результат операции.

Rejected: Промис переходит в это состояние, когда операция завершается с ошибкой. В этом случае промис возвращает причину ошибки.

Пример использования промиса:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Some data';
      // Имитация успешного выполнения операции
      resolve(data);
      // Имитация ошибки
      // reject('Error occurred');
    }, 2000);
  });
}

fetchData()
  .then(result => {
    console.log('Результат:', result);
  })
  .catch(error => {
    console.log('Ошибка:', error);
  });

11. В чем разница и схожесть между null и undefined?

Null и undefined - это два различных значения в JavaScript, которые указывают на отсутствие значения.

Различия:

• null - это явное значение, которое указывает на отсутствие или намеренное присвоение пустого значения. undefined - это значение, которое указывает на отсутствие присвоенного значения.

• null - это объектный тип данных, который представляет отсутствие объекта. undefined - это примитивный тип данных.

• null может быть присвоен явно, чтобы указать на отсутствие значения. undefined - это значение, которое присваивается переменной по умолчанию, когда она объявлена, но не инициализирована.

Сходства:

• Осутствие значения: Оба значения, null и undefined, указывают на отсутствие значения.

• Истинность: Оба значения рассматриваются как ложные (falsy) в логическом контексте. Это означает, что они преобразуются в false, когда используются в условных выражениях.

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

• Тип данных: Оба значения являются уникальными значениями и не имеют своих собственных типов данных.

В целом, null используется, когда явно указывается отсутствие значения, в то время как undefined указывает на отсутствие присвоенного значения.

12. Почему результатом сравнения двух похожих объектов является false?

Результатом сравнения двух похожих объектов в JavaScript может быть false, потому что сравнение объектов происходит по ссылке, а не по содержимому.

Когда мы сравниваем два объекта, JavaScript проверяет, указывают ли оба операнда на один и тот же объект в памяти. Если это так, то результатом будет true. Однако, если операнды указывают на разные объекты, даже если они имеют одинаковую структуру и значения свойств, результатом будет false.

Пример:

const obj1 = { name: 'John', age: 25 };
const obj2 = { name: 'John', age: 25 };

console.log(obj1 === obj2); // Вывод: false

В этом примере obj1 и obj2 содержат одинаковые свойства и значения, но они являются разными объектами в памяти. Поэтому результатом сравнения obj1 === obj2 будет false.

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

13. Для чего используется директива «use strict»?

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

В основном используется для:

• Предотвращение ошибок

• Устранение неявных глобальных переменных

• Запрет использования некоторых устаревших функций и конструкций

• Улучшение безопасности

Примеры:

"use strict";
x = 10; // Ошибка: переменная "x" не была объявлена, если бы не было use strict создалась бы глобальная переменная

"use strict";

function sum(a, a, c) { // Ошибка: Повторное объявление параметра функции запрещено в строгом режиме
  return a + a + c;
}

console.log(sum(1, 2, 3));

"use strict";

delete Object.prototype; // Ошибка: Удаление свойства объекта запрещено в строгом режиме

14. В чем разница между методами call, apply, bind?

Методы call, apply и bind являются частью языка JavaScript и используются для управления контекстом выполнения функций. Вот их основные различия:

call: Этот метод вызывает функцию с указанным контекстом и аргументами, переданными в виде отдельных аргументов. Синтаксис метода call выглядит следующим образом: function.call(context, arg1, arg2, ...). При использовании call аргументы передаются в виде списка, разделенного запятыми.

apply: Этот метод вызывает функцию с указанным контекстом и аргументами, переданными в виде массива. Синтаксис метода apply выглядит следующим образом: function.apply(context, [arg1, arg2, ...]). При использовании apply аргументы передаются в виде массива.

bind: Этот метод создает новую функцию, привязанную к указанному контексту. Он не вызывает функцию немедленно, а возвращает новую функцию, которую можно вызвать позже. Синтаксис метода bind выглядит следующим образом: function.bind(context). При использовании bind контекст функции фиксируется, и при вызове новой функции этот контекст будет сохраняться.

Примеры:

const obj = {
  name: 'John',
  greet: function(message) {
    console.log(`${message}, ${this.name}!`);
  }
};

const otherObj = {
  name: 'Jane'
};

// Использование метода call
obj.greet.call(otherObj, 'Hello'); // Вывод: Hello, Jane!

// Использование метода apply
obj.greet.apply(otherObj, ['Hi']); // Вывод: Hi, Jane!

// Использование метода bind
const boundGreet = obj.greet.bind(otherObj);
boundGreet('Hey'); // Вывод: Hey, Jane!

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

const numbers = [1, 2];

// Использование метода call с массивом аргументов
const result1 = sum.call(null, ...numbers);
console.log(result1); // Вывод: 3

// Использование метода apply с массивом аргументов
const result2 = sum.apply(null, numbers);
console.log(result2); // Вывод: 3

// Использование метода bind для создания каррированной функции
const addFive = sum.bind(null, 5);
const result3 = addFive(3);
console.log(result3); // Вывод: 8

15. Что такое функции высшего порядка?

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

Функция обратного вызова (Callback): Функция, которая передается в качестве аргумента в другую функцию и вызывается внутри нее. Это позволяет передавать логику выполнения внутрь другой функции.

Пример:

function calculate(num1, num2, operation) {
  return operation(num1, num2);
}

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

function multiply(a, b) {
  return a * b;
}

const result1 = calculate(5, 3, add); // Вызов функции calculate с функцией add
console.log(result1); // Вывод: 8

const result2 = calculate(5, 3, multiply); // Вызов функции calculate с функцией multiply
console.log(result2); // Вывод: 15

Функция обертка (Wrapper): Функция, которая принимает другую функцию и возвращает новую функцию, добавляя дополнительную логику или изменяя поведение оригинальной функции.

Пример:

function withLogging(func) {
  return function(...args) {
    console.log('Calling function:', func.name);
    const result = func(...args);
    console.log('Result:', result);
    return result;
  };
}

function multiply(a, b) {
  return a * b;
}

const wrappedMultiply = withLogging(multiply);
const result = wrappedMultiply(5, 3);
console.log(result); // Вывод: 15

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

В JavaScript объекты обычно наследуют свойства и методы от своих прототипов. Однако, существует несколько способов создания объекта без прототипа:

Использование Object.create(null): Метод Object.create(null) создает новый объект с указанным прототипом null, что означает, что объект не будет наследовать свойства и методы от какого-либо прототипа.

Пример:

const obj = Object.create(null);
console.log(obj.toString); // Вывод: undefined

Использование литерала объекта и null в качестве прототипа: Можно создать объект, используя литерал объекта и установив его прототип в null.

Пример:

const obj = Object.setPrototypeOf({}, null);
console.log(obj.toString); // Вывод: undefined

Использование функции-конструктора без прототипа: Можно создать функцию-конструктор, которая не имеет прототипа, и создать объект с помощью этой функции.

Пример:

function NoPrototype() {
  // Пустая функция-конструктор без прототипа
}

const obj = new NoPrototype();
console.log(obj.toString); // Вывод: undefined

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

17. Что такое async/await?

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

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

Примеры:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Ошибка:', error);
  }
}

fetchData();

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedFunction() {
  console.log('Начало выполнения');
  await delay(2000);
  console.log('Задержка окончена');
}

delayedFunction();

const axios = require('axios');

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    const data = response.data;
    console.log(data);
  } catch (error) {
    console.log('Ошибка:', error);
  }
}

fetchData();

18. В чем разница между spread-оператором и rest-оператором?

Spread-оператор и rest-оператор - это два разных оператора, которые используются в JavaScript для работы с массивами и объектами.

Spread-оператор (...):

• Распространяет элементы массива или свойства объекта.

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

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

  Пример:

const numbers = [1, 2, 3];
const newArray = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]

const person = { name: 'John', age: 30 };
const newPerson = { ...person, city: 'New York' }; // { name: 'John', age: 30, city: 'New York' }

Rest-оператор (...):

• Собирает оставшиеся аргументы функции в массив.

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

  Пример:

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

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

function printNames(first, last, ...middle) {
  console.log('First name:', first);
  console.log('Last name:', last);
  console.log('Middle names:', middle);
}

printNames('John', 'Doe', 'Smith', 'Johnson', 'Williams');
// First name: John
// Last name: Doe
// Middle names: ['Smith', 'Johnson', 'Williams']

19. Как определить наличие свойства в объекте?

В JavaScript есть несколько способов определить наличие свойства в объекте.

Оператор in: Можно использовать оператор in, чтобы проверить наличие свойства в объекте или его прототипе.

const obj = { name: 'John', age: 30 };

console.log('name' in obj); // true
console.log('city' in obj); // false

Метод hasOwnProperty(): Метод hasOwnProperty() проверяет, содержит ли объект указанное свойство и не учитывает свойства в прототипе объекта.

const obj = { name: 'John', age: 30 };

console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('city')); // false

Сравнение со значением undefined: Можно сравнить значение свойства с undefined, чтобы определить его наличие.

const obj = { name: 'John', age: 30 };

console.log(obj.name !== undefined); // true
console.log(obj.city !== undefined); // false

Использование Object.keys(): Можно использовать метод Object.keys() для получения массива всех свойств объекта и затем проверить наличие свойства в этом массиве.

const obj = { name: 'John', age: 30 };

console.log(Object.keys(obj).includes('name')); // true
console.log(Object.keys(obj).includes('city')); // false

20. Чем отличается Map от WeakMap?

Map и WeakMap - это две разные структуры данных в JavaScript, которые предоставляют ассоциативное отображение ключей на значения.

Вот основные отличия между Map и WeakMap:

1. Сильные ссылки и сборка мусора: В Map используются сильные ссылки на ключи, что означает, что если объект, используемый в качестве ключа, больше не используется, он не будет удален из памяти, пока есть ссылка на него. В WeakMap используются слабые ссылки на ключи, что означает, что если объект, используемый в качестве ключа, больше не имеет других ссылок, кроме ссылки из WeakMap, он может быть удален сборщиком мусора.

2. Ключи: В Map ключами могут быть любые значения, включая примитивы и объекты. В WeakMap ключами могут быть только объекты.

3. Итерация: Map поддерживает итерацию с помощью методов keys(), values() и entries(), которые возвращают итераторы для перебора ключей, значений и пар ключ-значение соответственно. WeakMap не поддерживает эти методы, поскольку слабые ссылки могут быть непредсказуемыми и не гарантируют порядок итерации.

4. Размер: Map имеет свойство size, которое возвращает количество элементов в Map. WeakMap не имеет свойства size, поскольку слабые ссылки не позволяют точно определить количество элементов.

5. Методы: Map предоставляет различные методы для работы с элементами, такие как set(), get(), has(), delete() и другие. WeakMap предоставляет только методы get(), set(), has() и delete().

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

Еще можно почитать здесь и здесь.

21. Чем отличается Set от WeakSet?

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

Еще можно почитать здесь и здесь.

22. Как работает сборщик мусора в JS?

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

Сборщик мусора в JS использует алгоритм под названием "Mark and Sweep" (Пометка и Очистка). Вот как это работает:

1. Пометка (Mark): Сборщик мусора начинает с корневых объектов, таких как глобальный объект (window в браузере) и все объекты, на которые есть ссылки из корневых объектов. Он помечает эти объекты как активные.

2. Распространение (Propagation): Сборщик мусора рекурсивно проходит через все активные объекты и помечает объекты, на которые они ссылаются, как активные. Этот процесс продолжается до тех пор, пока все достижимые объекты не будут помечены.

3. Очистка (Sweep): После завершения пометки и распространения, сборщик мусора проходит по всей памяти и освобождает память, занятую не помеченными объектами. Он удаляет эти объекты и восстанавливает память для будущего использования.

Еще можно почитать здесь и здесь.

---

Также есть вопросы, которые не относятся напрямую к JavaScript, но я всегда задаю их, чтобы проверить кандидата на common knowledge.

1. Расскажите как работает браузер?

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

1. Ввод URL: Пользователь вводит URL (Uniform Resource Locator) в адресную строку браузера. URL указывает на веб-страницы, которую пользователь хочет посетить.

2. DNS-запрос: Браузер отправляет DNS-запрос (Domain Name System) на DNS-сервер, чтобы получить IP-адрес сервера, на котором хранится веб-страница. DNS-сервер преобразует доменное имя (например, www.example.com) в соответствующий IP-адрес.

3. Установка соединения: Браузер устанавливает TCP-соединение с сервером, используя полученный IP-адрес. Это позволяет браузеру отправлять и получать данные от сервера.

4. Запрос страницы: Браузер отправляет HTTP-запрос (Hypertext Transfer Protocol) на сервер, запрашивая веб-страницу. Запрос может содержать различные параметры, такие как метод запроса (GET, POST и т. д.), заголовки и тело запроса.

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

6. Рендеринг страницы: Браузер получает ответ от сервера и начинает обрабатывать его. Он анализирует HTML-код страницы, строит DOM (Document Object Model) - внутреннее представление страницы, и создает дерево элементов.

7. Загрузка ресурсов: Браузер загружает все связанные ресурсы, такие как изображения, стили CSS, скрипты JavaScript и другие файлы, указанные в HTML-коде страницы.

8. Отображение страницы: Браузер использует полученные ресурсы и информацию о стилях для отображения страницы на экране. Он располагает элементы в соответствии с их CSS-свойствами, применяет шрифты, цвета и другие стили, и отображает содержимое страницы.

2. Что такое DOM

DOM (Document Object Model) - это программное представление веб-страницы или XML-документа в виде древовидной структуры. DOM представляет каждый элемент документа (такие как теги, текстовые блоки, атрибуты) в виде объектов, которые можно манипулировать с помощью языков программирования, таких как JavaScript.

В JS DOM представлен объектом Document. DOM предоставляет стандартизированый способ доступа и изменения содержимого, структуры и стилей веб-страницы. Он позволяет программистам создавать динамические и интерактивные веб-приложения, изменять содержимое страницы, добавлять или удалять элементы, изменять атрибуты и стили, а также реагировать на события, такие как щелчки мыши или нажатия клавиш.

3. Из чего состоит HTTP запрос

На этот вопрос можно ответить так:

• Метод запроса (Request Method): Определяет тип операции, которую клиент хочет выполнить на сервере. Некоторые распространенные методы запроса включают GET, POST, PUT, DELETE и HEAD.

• Заголовки (Headers): Представляют собой метаданные, которые передаются вместе с запросом и содержат дополнительную информацию о запросе, такую как тип содержимого, аутентификация, кеширование и другие параметры.

• Тело запроса (Request Body): Используется только в некоторых методах запроса, таких как POST или PUT. Оно содержит данные, которые клиент отправляет на сервер, например, форму для отправки или JSON-объект.

4. Что такое специфичность в CSS

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

Приоритет такой: инлайн стили, селектор ид, селектор класса, селектор тега.

Если два правила имеют одинаковую специфичность, то последнее правило в таблице стилей будет применено.

5. Разница между cookie, sessionStorage и localStorage

Веб-браузеры предоставляют несколько способов хранения данных на стороне клиента, таких как cookie, sessionStorage и localStorage.

Cookie:

• Cookie - это небольшие текстовые файлы, которые хранятся на компьютере пользователя.

• Cookie создаются сервером и отправляются в браузер, где они хранятся и отправляются обратно на сервер при каждом запросе.

• Cookie имеют ограничение по размеру (обычно до 4 КБ) и количество (обычно до 20).

• Cookie могут иметь срок годности, после которого они автоматически удаляются.

• Cookie могут быть доступны как на сервере, так и на клиенте.

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

sessionStorage:

• sessionStorage - это механизм хранения данных, доступный только в рамках одной вкладки браузера.

• Данные, сохраненные в sessionStorage, остаются доступными только во время сеанса работы с текущей вкладкой браузера. При закрытии вкладки данные удаляются.

• sessionStorage имеет ограничение по размеру (обычно до 5 МБ).

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

localStorage:

• localStorage - это механизм хранения данных, доступный в рамках одного домена.

• Данные, сохраненные в localStorage, остаются доступными даже после закрытия браузера и перезапуска компьютера.

• localStorage имеет ограничение по размеру (обычно до 5 МБ).

• localStorage может использоваться для хранения постоянных данных, таких как настройки пользователя или кэшированные данные.

---

Конечно, это не все вопросы, которые могут быть заданы на реальном собеседовании, но они покрывают около 70% технической части. Желаю удачи!