Частые вопросы на собеседовании JS

JavaScript как клонировать обьект?

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

let user = {
  name: "Иван",
  age: 30
};

let clone = {}; // новый пустой объект

// скопируем все свойства user в него
for (let key in user) {
  clone[key] = user[key];
}

// теперь в переменной clone находится абсолютно независимый клон объекта
clone.name = "Пётр"; // изменим в нём данные

alert( user.name ); // в оригинальном объекте значение свойства `name` осталось прежним – Иван.

Или через Object.assign

let user = {
  name: "Иван",
  age: 30
};

let clone = Object.assign({}, user);

Если объект содержит внутри еще объекты то нужно использовать глубокое клонирование. Мы можем реализовать глубокое клонирование, используя рекурсию. Или, чтобы не изобретать велосипед, использовать готовую реализацию — метод _.cloneDeep(obj) из JavaScript-библиотеки lodash.


Что такое spread?

Этот опреатор появился в ES6

  1. Синтаксис оператора spread это просто три точки: …
  2. Оператор spread позволяет расширять выражения в тех местах, где предусмотрено использование нескольких аргументов.
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr); // [1, 2, 3, 4, 5, 6]

// пример с поиском максимального значения
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max); // 8

// пример копирования массива 
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);

// преобразования строки в массив 
var str = "hello";
var chars = [...str];
console.log(chars);


Что такое event loop js и как он работает?

https://developer.mozilla.org/ru/docs/Web/JavaScript/EventLoop

Что такое js замыкание и как он работает?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Closures


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

https://developer.mozilla.org/ru/docs/Learn/JavaScript/Asynchronous

Делегирование в браузере

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

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

Эта техника называется делегированием и очень активно применяется в современном JavaScript.

На примере меню
Делегирование событий позволяет удобно организовывать деревья и вложенные меню.

Давайте для начала обсудим одноуровневое меню:

<ul id="menu">
  <li><a href="/php">PHP</a></li>
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/flash">Flash</a></li>
</ul>

Клики по пунктам меню будем обрабатывать при помощи JavaScript. Пунктов меню в примере всего несколько, но может быть и много. Конечно, можно назначить каждому пункту свой персональный onclick-обработчик, но что если пунктов 50, 100, или больше? Неужели нужно создавать столько обработчиков? Конечно же, нет!


Расскажите про событийную модель js

Существуют четыре варианта “навешивания” обработчиков на определенное событие

1 псевдопротокол javascript:

<a href="javascript:alert('got click!')">link</a>

2 inline-метод

<a href="someurl.html" onclick="alert('got click!')">link</a>

3 установка element.onclick в js

var handler = function(){ alert('clicked'); };
document.getElementById('myhref').onclick = handler;

4 addEventListener/attachEvent

// addEventListener:

elem.addEventListener('click', handler, false);
//attachEvent:

elem.attachEvent('onclick', handler);

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

Событийная модель, в которой браузер выстраивает очередь обработчиков от целевого элемента, инициировавшего событие до корневого элемента document, называется bubbling-моделью (bubble, англ., – пузырь).

Событие как бы “всплывает” по иерархии документа от элемента, вызвавшего его и до корня. При прохождении каждого родительского элемента браузер проверяет, не установлен ли у этого родителя обработчик события такого же типа, и если установлен, вызывает его.

Событийная модель, в которой браузер выстравивает очередь обработчиков от корневого элемента document до целевого элемента (инициировавшего событие), называется capturing-моделью (capturing, англ., – захват). При прохождении каждого элемента вниз по иерархии браузер проверяет наличие обработчика события такого же типа, и если обработчик есть, вызывает его.


Фаза погружения в js

https://learn.javascript.ru/bubbling-and-capturing

Что такое html доступность?

https://developer.mozilla.org/ru/docs/Learn/Accessibility/What_is_accessibility


Что такое Идемпотентность?

https://developer.mozilla.org/ru/docs/Glossary/Idempotent


Html entities?

https://www.w3schools.com/html/html_entities.asp

Как работает position: sticky?

Ранее существовало четыре типа позиционирования: staticrelativeabsolute и fixed.

Основное различие между static и relativeabsolute и fixed в том, какое место они занимают в потоке документа (DOM). Элементы с позицией static и relative сохраняют своё естественное положение в потоке документа, в то время как absolute и fixed «вырываются» из потока документа и становятся плавающими.

Новое значение sticky похоже на все предыдущие значения сразу.

.some-component {
  position: sticky;
  top: 0px;
}


Способы изоляции стилей в CSS?

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

Но это ещё не всё. Существуют блоки, которые довольно сложны по своей html-структуре. Например шапка сайта может содержать в себе flex-сетку со множеством вложенных функциональных блоков (меню, логотипы, ссылки, иконки и т.д.). Скорее всего такой блок будет оформлен в виде отдельного html/php-файла, который просто подключается на странице. Но, если html-разметку мы можем разделить по файлам и верстать индивидуально, то с css-стилями такой «финт не прокатит», поскольку, опять же css имеет глобальную область видимости.

  1. CSS каскадность
  2. Уникальность именования классов
  3. Утилитарные классы


Микро и макро таски в js

https://learn.javascript.ru/event-loop


Что такое prototype, proto и чем отличаются?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/proto


Зачем нужны модули в js

https://learn.javascript.ru/modules-intro


Что такое cors csrf?

https://developer.mozilla.org/ru/docs/Web/HTTP/CORS

https://developer.mozilla.org/ru/docs/Glossary/CSRF


SOLID в JS

Command query separation (CQS)

Command-query Separation (CQS) — принцип программирования, изобретённый Бертраном Мейером, создателем языка Eiffel. Согласно этому принципу, каждая функция является либо командой, которая выполняет действие (action), либо запросом (query), который извлекает данные, но не тем и другим одновременно. Команда всегда связана с выполнением побочных эффектов, а чистые функции возможны только для запросов.

// Возвращает true или false как результат своего выполнения
save(user);

Согласно принципу CQS, функция save() является командой. Единственное, что она может — возвращать (опять же согласно принципу) успешность своего выполнения, то есть true или false (либо undefined, как в случае с console.log()). Возврат этой функцией любых осмысленных данных рассматривается как нарушение CQS. Однако, стоит сказать, что существуют ситуации, в которых невозможно соблюсти этот принцип.


Что такое чистая функция?

Функция должна удовлетворять двум условиям, чтобы считаться «чистой»:

— Каждый раз функция возвращает одинаковый результат, когда она вызывается с тем же набором аргументов

— Нет побочных эффектов

Еще можно переформулировать как
1) Не зависит от других
2) Не влияет на других


Что такое стрелочная функция?

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

(argument1, argument2, ... argumentN) => {
  // тело функции
}

Пример

const words = ['hello', 'WORLD', 'Whatever'];
const downcasedWords = words.map(word => word.toLowerCase());


Что такое лямбда функция?

Лямбда функция это сокращенный вариант безымянной (анонимной) функции.

const SQUARE = x => x ** 2


Как определяеться контекст?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/this

Что такое промисы?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise


Что такое боксинг?

http://htmlbook.ru/css/box-sizing


Отличие for…of от for…in в javascript

Оба оператора, и for...in и for...of производят обход объектов. Разница лишь в том, как они это делают.

Оператор for...of выполняет обход по элементам коллекций (иначе говоря, итерируемых объектов, например, ArrayMapSetStringarguments, DOM коллекций и т.д.), вызывая на каждом шаге итерации значение, а не ключ.

Оператор for...of для массивов работает аналогично forEach, но имеет преимущества: возможность использовать continue и break для контроля итераций, что невозможно в forEach.

let arr = [10, 20, 30];

for (let value of arr) {
  value += 1;
  console.log(value);
}
// 11 21 31

for…in

Цикл for...in проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу, вызывая на каждом шаге ключ. Цикл for...in проходит по свойствам в произвольном порядке, поэтому его не следует использовать для Array.

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log(obj[prop]);
}

// 1 2 3


Функции первого рода

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

Функция высшего порядка должна возвращать функцию и/или принимать одну функцию в параметр.


Что такое dom content load?

https://developer.mozilla.org/ru/docs/Web/API/Window/DOMContentLoaded_event

Чери-пик сквош и тд?

Команда git cherry-pick commit применяет изменения, внесенные именованным коммитом в текущую ветку.

Git squash — это прием, который помогает взять серию коммитов и уплотнить ее. Например, предположим: у вас есть серия из N коммитов и вы можете путем сжатия преобразовать ее в один-единственный коммит. Сжатие через git squash в основном применяется, чтобы превратить большое число малозначимых коммитов в небольшое число значимых. Так становится легче отслеживать историю Git. 


Декларативный и императивный подход

Декларативное программирование – это когда в коде описано что должно получиться, а императивное – когда написано как это сделать. Т.е. в первом случае мы совершенно не интересуемся, каким именно образом машина сделает работу, какие инструкции в каком порядке выполнятся и так далее, мы просто объясняем ей, что хотим увидеть в результате. Примеры декларативных языков – html, css, sql, конфиг nginx.\

Программируя императивно, мы описываем конкретные шаги, действия и точный порядок, в котором их нужно исполнять. Напрямую руководим процессом, непосредственно отдаём приказания. Примеров масса, большинство популярных языков императивны, в том числе и javascript. Ты пишешь: вот, сделай-ка переменную myVar, потом запиши туда число 5, повторяй это до тех пор, пока что-то не случится… и так далее. Возвращаясь к примеру с баней, ты теперь – начальник бригады, именно говоришь какое бревно куда класть.


Что такое гидратация (hydrate)?

Существует такой показатель производительности веб страницы, как First Contentful Paint (FCP) — в приближённом переводе будет звучать как ‘первая значимая отрисовка’ — время, когда браузер начал отображать любой текст, изображения (включая фоновые). Это первые элементы, которые пользователь увидит на странице. Создав отчёт с помощью Lighthouse в Chrome, в закладке performance, вы сразу же увидите этот показатель.

Время, потраченное на генерацию содержимого на сервере и будет являться First Contentful Paint временем.

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

В этот момент нет необходимости заново рендерить весь DOM на клиенте, но необходимо добавить недостающие события, методы, а в некоторых случаях и элементы, которые не рендерились на сервере.

Именно этот процесс и называется гидратацией или регидратацией (hydration / re-hydration).

Анонимные функции

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

var luke = function() {
    // используй силу
}

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

Есть еще одна интересная особенность: в определенной записи такие функции могут вызывать сами себя.

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

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

Оставить комментарий

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

Scroll Up