Вопросы для собеседования по JavaScript

Типы данных

Какие типы данных существуют?

• Примитивы

• null undefined string boolean number Symbol bigInt
• Примитивы хранятся в небольшом и фиксированном количестве байт, операции над ними выполнять несложно

• Ссылочные

• object array function
• Ссылочные типы хранятся в памяти, c которой напрямую работает JavaScript, так как невозможно предсказать сколько точно памяти потребуется для их работы

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

• При undefined переменной не явно присвоено значение пусто
• При null переменной явно присвоено значение пусто

Какие значения в JS являются ложными?

Значения результатом логическое преобразования которых является значение false.

const falsyValues = ['', 0, null, undefined, NaN, false]

Как узнать что в переменную пришел array?

C помощью метода .isArray

В чем разница между операторами == и ===?

== неявно сравнивает значения после их преобразования или приведения к одному типу coersion, а второй — явно без преобразования.

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

-

Можно ли сравнивать ссылочные типы данных?

Можно, но сравниваться будут ссылки на объект, а не их содержимое.

const data = {}
const anotherData = data

console.log(data === anotherData) // true

Сравнение операторами работать не будет:

const cat = { name: 'Феликс' }
const dog = { name: 'Феликс' }

console.log(cat === dog) // false

Что такое оператор нулевого слияния nulish coalesing?

Оператор ?? возвращает значение выражения справа, если слева содержится null или undefined

Преобразование данных

Как происходит преобразование данных?

Ссылочные типы данных имеют 2 прототипа, которые при преобразовании вызываются по очереди:

• .valueOf Если возвращает не примитив, вызывается .toString
• .toString Преобразует содержимое в строку

Изменение примитивных данных имеет особенности, например содержимое строки в JavaScript изменить нельзя:

let str = 'Hi'; 
str[0] = 'h' // str не изменится

Почему оператор + является самым быстрым способом преобразования строки в число?

Согласно MDN оператор + преобразует строку в число не выполняя никаких операций со значением, которое является числом

Другое

Для чего нужен cтрогий режим в JavaScript?

Что такое конструктор new?

• Cоздает новый экземпляр класса
• Устанавливает контекст this на созданную сущность
• Отправляет аргументы к конструктор
• Функция вызванная через new всегда возвращает объект

Что такое object descriptor ?

Это объект который описывает свойства и методы объекта, состоит из:

• value: any (любая сущность — число, объект, функция)
• writable: boolean (можем ли мы перезаписывать объект)
• configurable: boolean (можем ли изменять объект используя defineProperty)
• enumerable: boolean (можем ли итерировать объект при помощи for...in или Object.keys())
• get: boolean (включить геттер)
• set: boolean (включить сеттер)

Что такое геттеры и сеттеры?

-

Как в JS можно создать объект?

• Литерал объекта {}
• При помощи конструктора и глобального объекта new Object
• При помощи метода глобального объекта Object.create()
• Object.fromEntries(entries)

Как в JS можно скопировать объект?

• Поверхностно (shallow)
• Копирует данные из объекта только с первого уровня вложенности
• Быстро работает
• Сохраняет ссылки родительский объект
• Способы
• [...object]
• Для копирования содержимого объекта в новый массив
• Object.assign
• Для слияния двух объектов в один
• Глубоко (deep)
• Работает медленнее
• Полное копирование данных объекта с каждого уровня вложенности
• Способы
• structuredClone (Node JS >17)
• Встроено в Web API
• lodash.clonedeep
• JSON.stringify
• Копируемые данные должны быть сериализуемы (не undefined, функция, symbol)

Что такое прототип объекта?

Что такое прототипное наследование?

Разница prototype vs proto vs [[Prototype]]?

Что

Как можно заблокировать поле объекта для перезаписи?

Области видимости (scope)

ES6

ES modules?

Web API

What is WEB API?
> fetch setTimeout querySelector

Eventloop

Механизм общения между окнами, фреймами и воркер
> `window.postMessage`

How to make async requests in JS?
> `xmlhttprequest` `AJAX` `fetch` `axios`

Can we canceling a fetch request?
> `new AbortController()`

How we work with acync requests results?
> `promises` `async/await` `callbacks`

What is callback hell?

What is Promise?
> Constructor that recieve function that pass into here self 2 arguments `resolve` `reject`
> Has 2 properties `state` и `result`
> States: `pending` `fulfilled` `rejected`
> Для обработки результата этих состояний используются методы `.then`, `.catch`, `.finally`.
`.finaly` сработает когда промис завершится независимо от успеха/ошибки, просто пропускай цепочку промисов дальше. Хорошо подходит для остановки идикатора загрузки.

Методы работы с множеством промисов?
> `Promise.all` - принимает много промисов, возвращает новый когда все завершатся. Если один из промисов вернется с ошибкой, `Promise.all` вернется с этой ошибкой.
> `Promise.allSettled` - возвращает ошибочные и успешные результаты
> `Promise.race` - берет результат первого выполненного промиса
> `Promise.any` - тоже что all, но вернет ошибку только если все промисы вернут ошибку

Что такое async/await и как оно работают?
> `async/await` это просто «синтаксический сахар» для получения результата промиса, более наглядный, чем promise.then.
> Любую функцию можно сделать асинхронной поставив перед ней `async`, такая фун-я всегда возвращает промис.

What is Response in promise?
What metadata exist in Response?
> `headers` `status` `statusText` `type` `url`

In which types we can transform Responce?
> `.arrayBuffer()` `response.blob()` `response.error()` `response.formData()` `response.formData()` `response.json()` `response.text()`

Is response Promise reject on HTTP errors?
> It only rejects when encountering a network error. So we must use then() to check for HTTP errors with response.ok status and/or response.status properties.

Асинхронность

Что делают атрибуты async/defer в js-файлах?

async

• Выполняется асинхронно
• Не блокирует рендеринг страницы
• Запускается когда загрузка окончена

defer

• Выполняются последовательно
• Запускается когда DOM готов (DOMContentLoaded)

Оптимизация

Проблемы:

• Сетевые
• Рендеринг страницы
• Большие списки