└── readme.md
/readme.md:
--------------------------------------------------------------------------------
1 | # Шпаргалка по Javascript
2 |
3 | Здесь собраны часто встречающиеся вопросы на собеседовании по Javascript.
4 |
5 | ---
6 |
7 | ## **База**
8 |
9 | Назови типы данных в Js
10 | Null, undefined, number, string, bolean, object, bigint, symbol
11 |
12 |
13 |
14 | Чем отличается let var и const
15 |
16 |
Переменная, объявленная через var, видна везде в функции.
17 |
Переменная, объявленная через const или let, видна только в рамках блока {...}, в котором объявлена.
18 |
Объявление const задаёт константу, то есть переменную, которую нельзя менять:
19 |
20 |
21 | ```jsx
22 | const apple = 5;
23 | apple = 10; // ошибка
24 | ```
25 |
26 |
28 |
29 | Чем отличается == от ===
30 |
31 |
== и === это операторы который проверяют равны ли операнды и возвращает bolean true или false
32 |
== проверяет равны ли операнды даже если они разных типов
33 |
=== строгое равенство которое проверяет равны ли не только операнды но и их типы
34 |
36 |
37 | Чем отличается setTimeout от setInterval
38 |
39 |
setTimeout позволяет вызвать функцию **один раз** через определённый интервал времени.
40 |
setInterval позволяет вызывать функцию **регулярно**, повторяя вызов через определённый интервал времени.
41 |
42 |
44 |
45 |
46 | Что такое use strict
47 |
48 |
[use strict](https://learn.javascript.ru/strict-mode) - это установка, которая заставляет код обрабатываться в *строгом режиме*. Без этой установки код обрабатывается в *неограниченном режиме*. Это установку нужно писать в начале файла.
49 |
Строгий режим ограничивает функционал javascript в пользу багоустойчивого кода.
50 |
Например:
51 |
Нельзя присваивать значение в неопределённую переменную
52 |
53 |
54 | ```jsx
55 | (function() {
56 | "use strict";
57 | x = 5; // ReferenceError: x is not defined
58 | })();
59 |
60 | x = 5; // Создает глобальную переменную x
61 | ```
62 |
63 |
64 |
65 |
Нельзя дублировать свойства обьекта
66 |
67 |
68 |
69 | ```jsx
70 | (function() {
71 | "use strict";
72 | var x = {
73 | a: 1,
74 | a: 2
75 | }; // SyntaxError: Duplicate data property in object literal
76 | })(); // not allowed in strict mode
77 |
78 | var x = {
79 | a: 1,
80 | a: 2
81 | }; // x равно {a: 2}
82 | ```
83 |
84 |
85 |
87 |
88 |
89 | Что такое Callback
90 |
91 |
Коллбэк — это функция, которая должна быть выполнена после того, как другая функция завершила выполнение
92 |
94 |
95 | ## **Объекты**
96 |
97 | Перечисли методы объекта
98 |
99 |
100 | - Object.create()
101 | - Object.keys()
102 | - Object.values()
103 | - Object.entries()
104 | - Object.assign()
105 | - Object.freeze()
106 | - Object.seal()
107 | - Object.getPrototypeOf()
108 |
109 |
111 |
112 | Что такое глубокое и неглубокое копирования
113 |
114 |
При копировании объектов или массивов JavaScript копирует данные только на один уровень вглубь. Этот тип копирования называется поверхностным (shallow). Если необходимо полностью скопировать сложную структуру данных, например, массив с объектами, то нужно делать глубокое (deep) или полное копирование данных.
115 |
116 |
117 |
118 | ```jsx
119 | const itemsInCart = [
120 | { product: 'Носки', quantity: 3 },
121 | { product: 'Штаны', quantity: 1 },
122 | { product: 'Кепка', quantity: 1 },
123 | ]
124 |
125 | const clonedCart = [...itemsInCart]
126 | ```
127 |
128 |
129 |
130 |
131 |
132 | ```jsx
133 | const deep = JSON.parse(JSON.stringify(itemsInCart))
134 | console.log(itemsInCart[1] === deep[1])
135 | // false
136 | ```
137 |
138 |
139 |
140 |
У этого метода есть ограничение — копируемые данные должны быть сериализуемы.
141 |
142 |
143 |
144 | Вот примеры несериализуемых данных: примитив undefined, функция, [symbol](https://doka.guide/js/symbol/) - при вызове JSON.stringify получаем undefined
145 |
146 |
147 |
148 | Что бы работать с сериализуемыми данными можно использовать библиотеку *Lodash* или *structuredClone* Источник - https://habr.com/ru/companies/otus/articles/719460/
149 |
150 |
151 |
152 |
154 |
155 |
156 | Как удалить значение объекта
157 |
158 |
159 |
С помощью оператора delete
160 |
161 |
163 |
164 |
165 |
166 | Что такое деструктуризация?
167 |
168 |
[Деструктуризация](https://learn.javascript.ru/destructuring) - это особый синтаксис, позволяющий извлекать значения из объектов
169 |
171 |
172 |
173 | Деструктуризируй объект
174 |
175 |
176 | ```jsx
177 | const objToDestr = {
178 | name: 'John',
179 | age: 20,
180 | address: {
181 | country: 'Ukraine',
182 | city: 'Kyiv'
183 | },
184 | }
185 |
186 | let {name, address: {country}} = objToDestr
187 | console.log(name, country)
188 | ```
189 |
190 |
191 |
192 |
193 |
194 | Что такое new Map
195 |
196 |
[Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) – это коллекция ключ/значение, как и `Object`. Но основное отличие в том, что `Map` позволяет использовать ключи любого типа.
197 |
199 |
200 |
201 | Что такое weakMap
202 |
203 | weakMap - это тоже самое что и Map только более оптимизированно.
204 |
205 |
206 |
207 |
208 | Расскажи что такое this
209 |
210 |
211 |
Для доступа к информации внутри объекта метод может использовать ключевое слово this
212 |
This — это ключевое слово, используемое в JavaScript, которое имеет особое значение, зависящее от контекста в котором оно применяется
213 |
214 | ```jsx
215 | let user = {
216 | name: "John",
217 | age: 30,
218 |
219 | sayHi() {
220 | // "this" - это "текущий объект".
221 | alert(this.name);
222 | }
223 |
224 | };
225 | ```
226 |
228 |
229 |
230 | Как работают методы apply(), call() и bind()
231 |
232 |
233 | Функции в JavaScript никак не привязаны к своему контексту this, с одной стороны, здорово – это позволяет быть максимально гибкими, одалживать методы и так далее.
234 |
235 | Но с другой стороны – в некоторых случаях контекст может быть потерян. Способы явно указать this - методы bind, call и apply.
236 |
237 | - Синтаксис метода call: func.call(context, arg1, arg2, ...)
238 |
239 | При этом вызывается функция func, первый аргумент call становится её this, а остальные передаются «как есть». Вызов func.call(context, a, b...) – то же, что обычный вызов func(a, b...), но с явно указанным this(=context).
240 |
241 | - Если нам неизвестно, с каким количеством аргументов понадобится вызвать функцию, можно использовать более мощный метод: apply. Вызов функции при помощи func.apply работает аналогично func.call, но принимает массив аргументов вместо списка.
242 |
243 | func.call(context, arg1, arg2) идентичен вызову func.apply(context, [arg1, arg2]);
244 |
245 | - Синтаксис встроенного bind: var wrapper = func.bind(context, [arg1, arg2...])
246 |
247 | Методы bind и call/apply близки по синтаксису, но есть важнейшее отличие. Методы call/apply вызывают функцию с заданным контекстом и аргументами. А bind не вызывает функцию. Он только возвращает «обёртку», которую мы можем вызвать позже, и которая передаст вызов в исходную функцию, с привязанным контекстом.
248 |
249 |
250 | *Источник: [javascript.ru - call и apply](https://learn.javascript.ru/call-apply#metod-apply) [javascript.ru - bind](https://learn.javascript.ru/bind#bind)*
251 |
252 |
253 |
254 |
255 | ## **Массивы**
256 |
257 |
258 | Какие методы массивов ты знаешь
259 |
260 | Шпаргалка по методам массива:
261 |
262 | - Для добавления/удаления элементов:
263 | - `push (...items)` – добавляет элементы в конец,
264 | - `pop()` – извлекает элемент с конца,
265 | - `shift()` – извлекает элемент с начала,
266 | - `unshift(...items)` – добавляет элементы в начало.
267 | - `splice(pos, deleteCount, ...items)` – начиная с индекса `pos` удаляет `deleteCount` элементов и вставляет `items`.
268 | - `slice(start, end)` – создаёт новый массив, копируя в него элементы с индекса `start` до `end` (не включая `end`).
269 | - `concat(...items)` – возвращает новый массив: копирует все члены текущего массива и добавляет к нему `items`. Если какой-то из `items` является массивом, тогда берутся его элементы.
270 | - Для поиска среди элементов:
271 | - `indexOf/lastIndexOf(item, pos)` – ищет `item`, начиная с позиции `pos`, и возвращает его индекс или `1`, если ничего не найдено.
272 | - `includes(value)` – возвращает `true`, если в массиве имеется элемент `value`, в противном случае `false`.
273 | - `find/filter(func)` – фильтрует элементы через функцию и отдаёт первое/все значения, при прохождении которых через функцию возвращается `true`.
274 | - `findIndex` похож на `find`, но возвращает индекс вместо значения.
275 | - Для перебора элементов:
276 | - `forEach(func)` – вызывает `func` для каждого элемента. Ничего не возвращает.
277 | - Для преобразования массива:
278 | - `map(func)` – создаёт новый массив из результатов вызова `func` для каждого элемента.
279 | - `sort(func)` – сортирует массив «на месте», а потом возвращает его.
280 | - `reverse()` – «на месте» меняет порядок следования элементов на противоположный и возвращает изменённый массив.
281 | - `split/join` – преобразует строку в массив и обратно.
282 | - `reduce/reduceRight(func, initial)` – вычисляет одно значение на основе всего массива, вызывая `func` для каждого элемента и передавая промежуточный результат между вызовами.
283 | - Дополнительно:
284 | - `Array.isArray(arr)` проверяет, является ли `arr` массивом.
285 |
286 |
287 |
288 |
289 | Чем отличается map от forEach
290 |
291 |
292 | 1. map сохраняет значение через return, forEach всегда возвращает undefined
293 | 2. Второе различие между этими методами: map() можно привязывать к другим методам - reduce(), sort(), filter() и т.д. А вот forEach(), как вы можете догадаться, возвращается undefined.
294 | 2. map более производительный
295 | 3. map относится к функциональному программированию, а forEach к процедурному
296 |
297 |
298 |
299 |
300 |
301 | Расскажи про reduce
302 |
303 |
304 | Reduce используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата.
305 |
306 | ```jsx
307 | let arr = [1, 2, 3, 4, 5]
308 |
309 | var result = arr.reduce(function(sum, current) {
310 | return sum + current;
311 | }, 0);
312 |
313 | alert( result ); // 15
314 |
315 | //sum результат добавления двух чисел в начале
316 | //берет значение 2 аргумента или 1 элемента массива
317 | //current текущее значение массива которая в цикле меняеться 1,2,3...
318 | // цикл будет выполняться следующим образом
319 | // 0 + 1
320 | // 1 + 2
321 | // 3 + 3
322 | //...
323 |
324 | ```
325 |
326 |
327 |
328 |
329 |
330 | Что такое new Set
331 |
332 |
333 | Set – это коллекция как и `Array`. Но основное отличие в том, что в Set каждое значение может появляться только один раз.
334 |
335 |
336 |
337 |
338 |
339 | Что такое weakSet
340 |
341 |
342 | weakSet - это тоже самое что и Set только более оптимизировано.
343 |
344 |
345 |
346 |
347 | ## **Продвинутый**
348 |
349 |
350 | Расскажи про Promise
351 |
352 |
353 | [Promise](https://learn.javascript.ru/promise) — специальный объект JavaScript, который используется для написания и обработки асинхронного кода например запросов с сервера
354 |
355 | Способ использования, в общих чертах, такой:
356 |
357 | 1. Код, которому надо сделать что-то асинхронно, создаёт объект `promise` и возвращает его.
358 | 2. Внешний код, получив `promise`, навешивает на него обработчики.
359 | 3. По завершении процесса асинхронный код переводит `promise` в состояние `fulfilled` (с результатом) или `rejected` (с ошибкой). При этом автоматически вызываются соответствующие обработчики во внешнем коде.
360 |
361 | Синтаксис создания `Promise`:
362 |
363 | ```jsx
364 | let promise = new Promise(function(resolve, reject) {
365 | // Эта функция будет вызвана автоматически
366 |
367 | // В ней можно делать любые асинхронные операции,
368 | // А когда они завершатся — нужно вызвать одно из:
369 | // resolve(результат) при успешном выполнении
370 | // reject(ошибка) при ошибке
371 | })
372 | ```
373 |
374 |
375 |
376 |
377 |
378 | Чем отличаются стрелочные функции от обычной функции
379 |
380 |
381 | [Стрелочные функции](https://learn.javascript.ru/arrow-functions):
382 |
383 | - Сокращают написание функции
384 | - Не имеют `this`.
385 | - Не имеют `arguments`.
386 | - Не могут быть вызваны с `new`.
387 |
388 |
389 |
390 |
391 |
392 | Что такое Event Loop и как он устроен
393 |
394 | Event Loop - это бесконечный цикл событий, благодаря которому мы можем реализовать многопоточность в javascript.
395 |
396 |
397 |
398 | Многопоточность - это способность выполнять несколько параллельных задач - потоков
399 |
400 |
402 |
403 |
404 | Что такое рекурсия? И какое главное правило рекурсии?
405 |
406 |
407 | Рекурсия в javascript это когда функция вызывает саму себя. Главное правило рекурсии это написать выход из нее.
408 |
409 |
410 |
411 |
412 |
413 | Что такое замыкание
414 |
415 |
416 | [Замыкание](https://learn.javascript.ru/closure) – это функция, которая запоминает свои внешние переменные и может получить к ним доступ. В некоторых языках это невозможно, или функция должна быть написана специальным образом, чтобы получилось замыкание. Но, как было описано выше, в JavaScript, все функции изначально являются замыканиями
417 |
418 |
419 |
420 |
421 |
422 | Зачем нужны тесты
423 |
424 |
425 | Тесты нужны для:
426 |
427 | 1) Уменьшение количество багов
428 |
429 | 2) Уменьшение времени работы над таской. Чем больше тестов, тем более багоустойчив код. Тем меньше таска переходит от разработчика ⇒ тестировщику ⇒ менеджеру
430 |
431 | 3) хорошие тесты - это еще и документация, и они помогают быстрее адаптироваться новым членам команды
432 |
433 |
434 |
435 |
436 |
437 | Что такое TDD
438 |
439 |
440 | TDD - это аббревиату́ра которая означает Test-driven development.
441 |
442 | TDD - разработка на основе тестов.
443 |
444 |
445 |
446 |
447 |
448 | Что такое BABEl
449 |
450 |
451 | Babel - это транспайлер, который переписывает код современного стандарта Javascript (ES2015) на более поздний. Благодаря этому мы можем поддерживать браузеры которые не поддерживают новый функционал JS
452 |
453 |
454 |
455 |
456 |
457 | Расскажи что такое ООП и методы этой парадигмы
458 |
459 |
460 | Объектно-ориентированное программирование (в дальнейшем ООП) — парадигма программирования, в которой основными концепциями являются понятия объектов и классов.
461 |
462 | **Абстрагирование** — это способ выделить набор значимых характеристик объекта, исключая из рассмотрения не значимые Соответственно, абстракция — это набор всех таких характеристик.
463 |
464 | **Инкапсуляция** — это свойство системы, позволяющее объединить данные и методы, работающие с ними в классе, и скрыть детали реализации от пользователя.
465 |
466 | **Наследование** — это свойство системы, позволяющее описать новый класс на основе уже существующего с частично или полностью заимствующейся функциональностью. Класс, от которого производится наследование, называется базовым, родительским или суперклассом. Новый класс — потомком, наследником или производным классом
467 |
468 | **Полиморфизм** — это свойство системы использовать объекты с одинаковым интерфейсом без информации о типе и внутренней структуре объекта.
469 |
470 | [Источник](https://devcolibri.com/%D1%87%D1%82%D0%BE-%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-%D0%BE%D0%BE%D0%BF-%D0%B8-%D1%81-%D1%87%D0%B5%D0%BC-%D0%B5%D0%B3%D0%BE-%D0%B5%D0%B4%D1%8F%D1%82/)
471 |
472 |
473 |
474 |
475 |
476 | Чем отличается Функционально программирование от ООП
477 |
478 |
479 | В объектно-ориентированном программировании (ООП) вы создаете «объекты» (отсюда и название), которые представляют собой структуры, содержащие данные и методы. В функциональном программировании все является функцией. Функциональное программирование пытается разделить данные и поведение, а ООП объединяет эти концепции.
480 |
481 |
482 |
483 |
484 |
485 | Что такое WebSocket
486 |
487 |
488 | WebSocket – это современный способ иметь постоянное соединение между браузером и сервером.
489 | Преимущества
490 | - Нет ограничений, связанных с кросс-доменными запросами.
491 | - Имеют хорошую поддержку браузерами.
492 | - Могут отправлять/получать как строки, так и бинарные данные.
493 |
494 |
495 |
496 |
497 | ### Другое
498 |
499 |
500 | 0.1 + 0.2 в javascript что будет
501 |
502 |
503 | Внутри JavaScript число представлено в виде 64-битного формата [IEEE-754](https://ru.wikipedia.org/wiki/IEEE_754-1985). Для хранения числа используется 64 бита: 52 из них используется для хранения цифр, 11 для хранения положения десятичной точки и один бит отведён на хранение знака.
504 |
505 | Если число слишком большое, оно переполнит 64-битное хранилище, JavaScript вернёт бесконечность:
506 |
507 | `alert( 1e500 ); // Infinity`
508 |
509 | [Так что если 52 бит не хватает на цифры, то при записи происходит такой баг](https://learn.javascript.ru/number#:~:text=%D0%92%20JavaScript%20%D0%BD%D0%B5%D1%82%20%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D0%B8%20%D0%B4%D0%BB%D1%8F,%D1%82%D1%80%D0%B5%D1%82%D1%8C%D1%8E%20%D0%B2%20%D0%B4%D0%B5%D1%81%D1%8F%D1%82%D0%B8%D1%87%D0%BD%D0%BE%D0%B9%20%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B5%20%D1%81%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F.)
510 |
511 | Для точных вычислений использую библиотеку [decimal.js](https://github.com/MikeMcl/decimal.js#readme)
512 |
513 |
514 |
515 |
516 |
517 | Операции с разными типами в например true + true = ?
518 |
519 |
520 | ```jsx
521 | null + undefined = Nan
522 | null + {} = 'null[object Object]'
523 | null + [] = 'null'
524 | null + true = 1
525 | null - true = -1
526 | null + false = 0
527 | null - false = 0
528 | null + '' = 'null'
529 |
530 | true + true = 2
531 | true - true = 0
532 | true + false = 1
533 | true - false = 1
534 | true + undefined = Nan
535 | true + [] = 'true'
536 | true + {} = 'true[object Object]'
537 | true + '' = 'true'
538 |
539 | false - false = 0
540 | false + false = 0
541 | false + undefined = NaN
542 | false + [] = 'false'
543 | false + {} = 'false[object Object]'
544 | false + '' = 'false'
545 | ```
546 |
547 |
548 |
549 |
550 | obj[0] + obj[’0’]
551 |
552 |
553 | ```jsx
554 | let obj = {
555 | ”0”: 1,
556 | 0: 2
557 | }
558 | obj[’0’] // 2
559 | obj[0] // 2
560 |
561 | console.log(obj[0] + obj[’0’]) //Будет ровно 4
562 | ```
563 |
564 |
565 |
566 |
567 |
568 | Расскажи про requestAnimationFrame
569 |
570 | requestAnimationFrame - это метод браузерного API, который используется для анимации веб-страницы. Основное преимущество этого метода в том, что он автоматически регулирует частоту кадров анимации, что позволяет получить более плавную анимацию и снизить нагрузку на процессор и потребление ресурсов.
571 |
572 |
573 |
--------------------------------------------------------------------------------