JavaScript Flashcards
Что такое Websokets?
Websokets - это протокол связи поверх TCP-соединения, предназначенный для обмена сообщениями между браузером и веб-сервером.
В отличие от HTTP, котором общение идёт в формате запрос-ответ - при использовании websokets возможно установить соединение и затем получать полезные данные в виде ответов от сервера. Отправлять данные от себя так же возможно в любой момент.
Отладка в браузере, debugger
Можно запустить с помощью добавления строчки debugger или вручную выбрав файл в Chrome.
В отладке можно определить точки остановки, пошагово выполнять код и видеть все текущие переменные.
Паттерны JS (декоратор)
Способ добавить объекту новый функционал не изменяя его.
В качестве аргумента принимает декорируемый объект.
Возвращает новый объект, который содержит в себе старый объект + дополнительный функционал.
Паттерны JS (модуль)
Модуль - отдельный файл, из которого возможно выполнить экспорт.
Коротко:
экспорт
- до объявления
- отдельно от объявления
- с другим именем
- по умолчанию
- по умолчанию с другим именем
импорт
- нескольких объектов в одном с деструктуризацией
- с изменением имени
- всего в одном объекте
- по умолчанию
export
1. экспорт до объявления (конкретной переменной, функции или класса):export const bullet = 'a'
2. экспорт отдельно от объявления (нескольких значений в объекте):const a = 1const b = 2export {a, b}
3. возможно эскортировать под другим именемexport {a as alpha, b as beta}
4. экспорт по умолчанию (может быть только один)export default class User {…}
import
1. импорт нескольких объектов (возможно с заменой имени)import {a, b as beta} from file.js
2. импорт всего в одном объектеimport * as abc from file.js
3. импорт по умолчаниюimport abc from file.js
Модули нужны для повышения читаемости, облегчения поддержки кода, возможности повторного использования кода и сохранения чистоты глобального пространства имён.
Generators.
Что такое генераторы?
Генераторы могут по мере необходимости возвращать множество значений одно за другим.
Их особенность является в том, что выполняясь они могут остановить своё исполнение, вернуть промежуточное значение, а затем продолжить выполняться.
- Функции-генераторы объявляются с помощью
function*. - Оператор
yieldиспользуется для приостановки выполнения функции-генератора и возврата значения вызывающему коду. Выполнение функции можно возобновить с помощью методаnext(). - Генератор возвращает объект итератор, который можно использовать для обхода значений, генерируемых функцией.
Определение генератора:
function* simpleGenerator() {
yield 1;
yield 2;
yield 3;
}
Использование генератора:
const generator = simpleGenerator(); // итератор
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }
“use strict”
Строгий режим
Активируется если первой строкой написать “use strict” (можно в файле, можно только в функции).
Заставляет работать код только в современном режиме, убирает обратную совместимость с очень старым кодом.
Объясните делегирование событий.
Когда стоит его использовать?
Какие плюсы от этого?
Это обработка события для множества элементов одним из родителей элементов (общим предком).
Ставится один обработчик на общего предка. А в нём определяем нужный элемент через event.target.
Экономит память, удобство изменения, меньше кода (не надо каждый раз ставить и снимать обработчик для каждого элемента).
Что такое IIFE (ифи)?
Immediately Invoked Function Expression - немедленно вызываемая функция.
(function () {
console.log('Hello World');
})();
Такое выражение выполняется немедленно после создания.
До появления ES6 модулей - использовалось что бы не загрязнить глобальное пространство имён. Переменные объявленные внутри - не видимы за его пределами.
Объясните, почему это не является IIFE: function foo(){ }();. Что необходимо изменить, чтобы это стало IIFE?
Не хватает скобок вокруг функции, что бы скобки в конце считались указанием к исполнению функции: (function foo(){ })().
В каких случаях обычно используются анонимные функции?
Для выполнения какого-то кода в коллбэках, где не нужно создавать отдельную именную функцию под это действие.
В чём различие между переменными, значение которых: null, undefined? Как бы вы проверили их на каждое из этих значений?
undefined - переменная, которая была объявлена, но у неё нет значения или результат выполнения функции, которая ничего не возвращает.
null - значение, которое явно обозначает отсутствие значения.
Проверить можно с помощью typeof или строгим равенством ===.
Можете ли вы описать основное различие между циклом .forEach() и циклом .map()? И в каких случаях каждый из них используется?
map
- коллбек выполняется для каждого элемента массива
- результат выполнения становится элементом массива
- возвращает новый массив
forEach
- коллбек выполняется для каждого элемента массива
- результат выполнения никуда не запишется
- возвращает undefined
В чем разница между host-объектами и нативными объектами?
host-объекты - это объекты, которые предоставляются средой выполнения. То есть в нашем случае браузером: window, document, location, history итд.
нативные объекты - это объекты, которые являются частью языка Java Script: String, Array, Math, Object, Function итд.
В чем разница между:function Person(){}var person = Person()var person = new Person()
function Person(){} - создание функции с именем Person.var person = Person() - вызов функции Person и помещение результата в переменную person.var person = new Person() - создание нового объекта, используя функцию-конструктор Person.
Подробно расскажите об Ajax.
Asynchronous Javascript And Xml - технология обращения к серверу без перезагрузки страницы. Использовать XML не обязательно, под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.
Плюсы:
- Повышение интерактивности - новые данные с сервера можно добавить динамически без перезагрузки страницы
- Скрипты и стили надо скачать всего 1 раз для страницы
Минусы:
- Сложность реализации закладки для страницы
- Не работает без JS
- Динамический контент не виден некоторым роботам.
Вы когда-нибудь использовали шаблонизацию на JavaScript? Если да, то какие библиотеки вы использовали?
Стандартный <template> и JSX.
Содержимое шаблона доступно по его свойству content в качестве DocumentFragment – особый тип DOM-узла.
Например:const tmpl = document.querySelector('#text-template').content;let elem = document.createElement('div');
// Клонируем содержимое шаблона для того, чтобы переиспользовать его несколько разelem.append(tmpl.content.cloneNode(true));
Расскажите, что такое поднятие (hoisting).
Hoisting - поднятие переменной. Это поведение переменных, объявленых с помощью var.
Переменные объявленные с var - поднимаются в верхнюю часть текущей области, что позволяет к ним обращаться. Поднимается только объявление. Присвоение остаётся на своём месте. Это значит что до присвоения значения этой переменной - она будет равняться undefined.
В случае попытки провернуть такое с let или const - будет ошибка reference error.
С функциями это работает так, что функции можно объявить в конце и пользоваться ими где угодно.
Объясните, что такое всплытие событий (event bubbling).
Это одна из фаз прохода события.
После срабатывания события на целевом элементе - событие “проходит” по всем родительским элементам. На этом механизме основано делегирование событий.
В чём разница между “атрибутом” (attribute) и “свойством” (property)?
Атрибуты - в разметке HTML.
Свойства - у объектов DOM.
Большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.
Нестандартные атрибуты надо записывать в dataset-*.
Почему не следует расширять нативные JavaScript-объекты?
В том случае если используется несколько библиотек, которые будут использовать расширение нативных объектов - может произойти пересечение названий методов.
Единственное оправданное расширение нативного объекта - создание полифила для устаревшего браузера.
В чём разница между == и ===?
=== - строгое равенство. Сравнивает значение и тип
== - не строгое равенство. Сравнивает только значение. Могут быть неявные преобразования
Объясните Same Origin policy в контексте JavaScript.
Политика одного источника.
- Ограничивает доступ из js к localStorage и cookies, которые были получены с другого домена.
- Запрещает ajax запросы на другие домены, если на этих доменах не настроен CORS соответсвующим образом.
- Скрипт с одного домена не может манипулировать элементами DOM другого домена. Например, iframe с example.com не может изменять содержимое iframe с another-domain.com.
Сделайте так, чтобы этот код работал:duplicate([1,2,3,4,5])
результат:[1,2,3,4,5,1,2,3,4,5]
function duplicate(arr) {
return arr.concat(arr)
}Почему тернарный оператор так называется?
“Тернарный” означает три.
Троичное выражение принимает три операнда: условие, выражение then и выражение else.
условие ? выражение1 : выражение2
Напишите цикл, который перебирает числа до 100, возвращая “fizz” на числа кратные 3, “buzz” на числа кратные 5 и “fizzbuzz” на числа кратные 3 и 5
for (let i = 0; i <= 100; i++) {
if (i % 3 === 0 && i % 5 === 0) {
return "fizzbuzz"
} else if (i % 3 === 0) {
return "fizz"
} else if (i % 5 === 0) {
return "buzz"
}
}Что такое промисы (Promises)?
Что может вернуть?
В каком стоянии может быть?
Как создаётся промис?
Как завершить промис?
Через какую очередь идёт обработка промиса?
Промисы это один из приёмов работы с асинхронным кодом в JS.
Промис это объект, который может вернуть одно значение в будущем: результат выполнения или причину отмены.
Промис может быть в одном из трёх состояний - ожидает выполнения, выполнен или отклонён.
Промис создаётся через конструктор new Promise(function(resolve, reject) { … }).
Функция внутри - зовётся исполнитель (executor), после создания он автоматически сразу запускается.
resolve и reject - коллбеки, которые предоставляет JS, принимают 1 аргумент, остальные игнорируются.
В промисе обязательно должен быть выполнен resolve или reject.
resolve - выполняется при успешном завершение, в аргумент передаётся результат. Выполнение resolve не прерывает выполнение функции-исполнителя.
reject - выполняется в случае ошибки, в аргумент можно передать что угодно, но лучше передавать объект ошибки.
Обработка промисов всегда асинхронная, т.к. все действия промисов проходят через «очередь микрозадач».
Как обработать результат выполнения промиса (цепочка промисов)?
Цепочка промисов - благодаря тому что промис вернёт новый промис, то методы можно вызывать по цепочке. Таким образом можно строить цепочки из асинхронных действий.
then, catch и finally - методы объекта Promise.
then(f (result) {...} [, f (err) {...}]) - аргументы это функции. Первая выполняется при статусе промиса “выполнено успешно”, вторая при статусе промиса “выполнено с ошибкой”. Сами функции получают в качестве аргумента значение свойства result (аргумент resolve или reject). Второй аргумент не является обязательным.
catch(f (err) {...}) - это сокращённый вариант then(null, f (err) {...})
finally(f () {…}) - будет выполнен в любом случае и не имеет аргументов. Пропускает результат или ошибку через себя к последующим обработчикам. Не должен ничего возвращать, поэтому у finally игнорируется возвращаемое значение.
Как обработать ошибку в промисе?
Если промис завершается с ошибкой (reject) или во время выполнения получается ошибка, то управление переходит в ближайший обработчик ошибок catch. Это работает как невидимый try…catch внутри промиса и обработчиках.
Если внутри catch произошла ошибка - она перейдёт к следующему catch. Если его нет, то будет проброс исключения.
Ошибку, которая вылетела в глобальное окружение можно поймать используя событие unhandledrejection и addEventListener по этому событию.
Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?
- Помогает избежать “callback hell”, который может быть нечитаемым.
- Упрощает написание последовательного удобочитаемого асинхронного кода с помощью then().
- Упрощает написание параллельного асинхронного кода с помощью Promise.all().
Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript?
Плюсы:
- Исправляют проблемы JS
- Синтаксический сахар (более короткий код)
- Добавление статической типизации
Минусы:
- Нужна компиляция кода в JS
- Могут быть трудности с отладкой, если карты кода плохо сопоставляются с исходным кодом
- Если язык редкий, то могут быть сложности с набором команды
- Меньшее сообщество, что значит меньше учебных материалов и инструментов
- Может не быть поддержки в IDE
Какие инструменты и методы вы используете при отладке кода?
React и Redux:
- React Devtools
- Redux Devtools
JavaScript:
- Chrome Devtools
- Отладка при помощи console.log
Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?
Циклы for..in и for..of, метод .forEach().
Для объектов можно сначала получить все ключи, значения или пары в массив через .keys(), .values() или .entries().
Объясните разницу между синхронными и асинхронными функциями.
Синхронные функции являются блокирующими. Когда интерпретатор натыкается на такую функцию - он блокирует дальнейшее выполнение операций прежде чем данная функция будет выполнена.
Асинхронные функции не блокируют процесс выполнения скрипта.
Что такое цикл событий (event loop)?
Event loop - не является частью движка JS и предоставляется средой, например браузером.
Это бесконечный цикл, который запускается после выполнения основного кода, его алгоритм работы:
- Проверяется стек вызова и выполняются все задачи из него.
- Проверяется очередь задач, берётся маркозадача из очереди, помещается в стек вызова и выполняется.
- Выполняются все микрозадачи.
- Повторяем.
Очередь вызовов (task queue) - очередь в которую попадают макрозадачи на исполнение из Web API.
Разница между микро и макро задачами в event loop?
Макрозадачи (tasks):
- выполнение внешнего скрипта после его загрузки
- генерация событий пользовательского ввода и загрузки ресурсов (например движения мыши) и исполнение их обработчиков
- setTimeout
Микрозадачи (jobs)
- промисы
- queueMicrotask(func).
Выполнение всех микрозадач за один раз - гарантирует им общее окружение.
Расскажите о queueMicrotask
queueMicrotask(func)
Это метод, который используется для создания микрозадачи. Все микрозадачи исполняются после того как стек вызова очищается и до того как берётся новая задача из очереди событий.
В чём различие между переменными, созданными при помощи let, var и const?
var подвержена всплытию (hoisting) и имеет функциональную область видимости (ну или глобальная, если вне функции).
const и let - блочная область видимости.
const нельзя изменить, let возможно изменить.
Дайте определение функции высшего порядка.
Какие есть типы функций по способности принимать другие функции?
Функция высшего порядка - любая функция, которая принимает одну или несколько функций в качестве аргументов и/или возвращает функцию в качестве результата.
Функции первого порядка - не принимают другие функции в качестве аргументов и не возвращают функции в качестве результатов.
Что такое деструктуризация?
Можете ли вы привести пример деструктуризации объекта или массива?
Это выражение, которое предоставляет удобный способ извлекать переменные из массивов и объектов и помещать их в отдельные переменные.
const rgb = [255, 200, 0] const [red, green ,blue] = rgb;
const student = {
firstname: 'Glad',
lastname: 'Chinda',
country: 'Nigeria'
}
const { firstname, lastname, country } = student;
Шаблонные строки (или шаблонные литералы - Template Literals) в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?
Создаются с помощью обратных кавычек. Позволяют использовать переменные внутри и перенос строки.
В чём преимущества использования spread оператора и чем он отличается от rest оператора?
Spread - распаковывает массив или объект.
Rest - собирает “остальные” аргументы в массив.
Каким образом можно обмениваться кодом между файлами?
Использовать export + import.
Объясните разницу между <script>, <script async> и <script defer>.
Предназначены для оптимизации загрузки скриптов.
script - загружается и выполняется немедленно, блокируя парсинг HTML
async - загружается асинхронно, выполняется сразу
defer - загружается асинхронно, выполняется после парсинга HTML
Типы данных в JavaScript?
Восемь основных типов.
string
number
bigInt
boolean
simbol
null
undefined
object
Разница между function declaration и function expression?
function declarationfunction sum(a, b) {...}
function expresionconst sum = function(a, b) {...}
function declaration может всплывать, а значит этой функцией можно воспользоваться до её объявления.
Типы таймеров в JavaScript?
setTimeout(func, время) - вызывает функцию один раз через “время”
setInterval(func, время) - вызывает функцию периодически через “время”
обе функции возвращают ID таймера для его удаления через clearInterval(id)
Что такое область видимости (Scope)?
Область видимости это место, откуда мы имеем доступ к переменным или функциям.
Есть три типа областей - глобальная, функциональная или локальная и блочная (внутри {}).
Как превратить любой тип данных в булевый?
Перечислите ложные значения в JS.
Boolean(значение)!!значениеif (значение)
Ложные значения: 0, null, undefined, NaN, false
Методы строк в JavaScript?
str.length - число, длина строки
str.charAt(1) и str[1] - строка, буква в этом индексе (на несуществующий индекс .charAt() вернёт пустую строчку, а скобки [] - undefined)
str.toUpperCase и str.toLowerCase - перевод в большие или маленькие буквы
str.indexOf(’a’) и str.lastIndexOf(’a’) - число, индекс указанного текста
str.slice(0, 3) и str.substring(0, 3) - строка, срез с указанных индексов, но substring не может в отрицательные значения, но может поменять местами аргументы, если начальный индекс больше конечного
str.substr(0, 6) - строка, вырезает “от (0) индекса” и “сколько (6) вырезать”
str.replace(’a’, ‘b’) - строка, заменяет выбранную часть на указанную часть
str.trim(’ asd ’) - строку, срезает пробелы по краям
Методы массивов в JavaScript?
arr.length: число, длина массива.arr.push(elem): число (новая длинна массива), elem добавляется в конец.arr.unshift(elem): число (новая длинна массива), elem добавляется в начало.arr.pop(): значение элемента, удаляет последний elem.arr.shift(): значение элемента, удаляет первый elem.arr.concat(arr2): массив, соединяет два массива.arr.splice(start, deleteCount, ...items): массив, изменяет содержимое массива, удаляя или заменяя существующие элементы и/или добавляя новые элементы.arr.join(separator): строка, превращает массив в строку с разделителем separator.arr.includes(searchElement): булево, проверяет наличие searchElement в массиве.arr.sort([compareFunction]): ссылку на тот же массив, сортирует массив. Можно добавить свой способ сортировки через compareFunction.arr.forEach(callback): ничего, позволяет выполнить функцию callback для каждого элемента.arr.map(callback): массив, возвращает новый массив, содержащий результат вызова callback для каждого элемента массива.
Что такое чистая функция?
Чистая функция - функция, исполнения которой с одинаковыми атрибутами каждый раз приводит к одному и тому же результату и не имеет побочных эффектов.
Побочные эффекты - любые взаимодействия с внешней средой. Файловые операции, отправка или приём данных по сети, вывод в консоль или изменения внешних переменных.
Почему в JS функции называют объектами первого класса?
Потому что они могут быть:
1. Присвоены переменным.
2. Переданы как аргументы другим функциям.
3. Возвращены из других функций.
4. Созданы во время выполнения программы (функции могут быть созданы динамически).
Как определить наличие свойства в объекте?
obj.hasOwnProperty(’свойство’) - вернёт bolean
‘свойство’ in obj - вернёт bolean
Что такое псевдомассив arguments?
Коллекция аргументов, которые передаются в функцию.
Псевдомассив из-за того что он подобен массиву, но им не является. У него есть длина, но других методов массивов у него нет.
Почему результат сравнения 2х объектов это false?
Из-за того что в переменной хранится ссылка на объект и у двух объектов, которые одинаковые по содержанию - будет разная ссылка.
Что такое прототипное наследование?
Как создать объект без прототипа?
Все объекты JS имеют свойство prototype, которое является ссылкой на другой объект. Когда к свойству объекта происходит обращение, то если свойства нет у текущего объекта, то оно будет искаться у его прототипа, затем прототип прототипа и так далее. До тех пор пока не найдётся свойство или не достигается конец цепочки.
Для создания объекта без прототипа надо Object.create(null)
Что такое NaN? Как определить, что значение равно NaN?
Not a number.
Получается когда математическая функция сработала не верно, например выполнение parseIns(строка) или Math.sqrt(-1) (нет корня отрицательного числа).
Проверить возможно только через функцию isNaN(значнеие), так как NaN === NaN будет false.
Что такое объектная обертка (Wrapper Objects)?
Примитив во время исполнения кода временно преобразуется в объект. Поэтому ему и доступны все методы этого типа примитивов.
Как в JavaScript создать объект?
Объектный литерал - const obj = {…}
Функция конструктор - function Persone(name) {…}
Имя функции конструктора обязательно с большой буквы, а вызывается она через new Person(’Max’)
Метод Object.create(прототип)
Для чего используется ключевое слово new?
Для создания объекта через функцию конструктор или класс - надо использовать new.
Для чего используется оператор двойного отрицания (!!)?
Для приведения значения к логическому типу (boolean).
Для чего используется оператор остатка (%)?
Для получения остатка от деления. Практическое применение - определение кратности.
Как проверить, является ли значение массивом?
Array.isArray(переменная) - возвращает bolean
Как работает boxing/unboxing в JavaScript?
Так называются механизмы, которые происходят во время вызова методов на примитивах. Примитыв сначала преобразуется в объект. У объекта есть метод, он выполняется. Затем объект уничтожается и остаётся снова приметив.
Что такое мемоизация? Реализуйте базовую логику функции для мемоизации?
Мемоизация это приём создания функции, которая может запомнить результат своего выполнения и при повторном выполнении с такими же аргументами вернуть значение без вычисления результата.
const memoize = (fn) => {
const cache = {}
return (params) => {
if (cache[params]) {
return cache[params]
} else {
cache[params] = fn(params)
return cache[params]
}
}
}
Разница между оператором in и методом .hasOwnProperty()?
obj.hasOwnProperty(’prop’) - проверит только свои собственные свойства
‘prop’ in obj - проверит в том числе в прототипах
Разница между глубокой (deep) и поверхностной (shallow) копиями объекта? Как сделать каждую из них?
Поверхностное копирование - копирование только верхнего уровня объекта.
- const car2 = {…car1}
- const car2 = Object.assign({}, car1);
Варианты создания глубокой копии:
- const car2 = JSON.parse(JSON.stringify(car1))
- const car2 = structuredClone(car1);
Что такое цепочка вызовов функций (chaining)? Как реализовать такой подход?
Это когда у результата выполнения функции есть такие же методы, как и у самой функции.
Для кастомной реализации возможно вернуть в качестве ответа “this”.
const counter = {
count: 0,
plusOne() {
this.count++
return this
},
minusOne() {
this.count--
return this
}
}
Что такое необъявленная переменная?
Не возможно использовать в “use strict” - будет ошибка.
Создаётся, если присвоить значение идентификатору, который не был объявлен с использованием ключевых слов var, let или const. Они объявляются в глобальной области видимости. Считается плохой практикой.
Как передаются параметры в функцию: по ссылке или по значению?
Параметры, которые передаются в функцию - передаются по значению. Однако стоит учитывать что при передаче объекта в переменной конечно же передаётся ссылка.
Как работает метод Object.create()?
Что указывается вторым аргументом?
Object.create(obj, [descriptors]) – создаёт пустой объект со свойством [[Prototype]], указанным как obj.
В качестве второго аргумента может быть дескриптор.
Разница между методами .slice() и .splice()?
arr.slice(от, до) - вернёт новый массив (подмассив от индекса и до индекса), старый массив не изменит
arr.splice(от, [сколько], [что вставить]) - вернёт удалённый подмассив, изменит старый массив, на место удаления добавит новые данные
Как работают методы .find(), .findIndex() и .indexOf()?
arr.find(коллбек) - вернёт первый подходящий элемент
arr.findIndex(коллбек) - вернёт индекс первого подходящего
arr.indexOf(значение) - вернёт индекс найденного значения
Разница между методами .push(), .pop(), .shift() и .unshift()?
Методы массива.push - добавляет в конец, возвращает новую длинуunshift - добавляет в начало, возвращает новую длину
pop - удаляет в конце, возвращает элементshift - удаляет в начале, возвращает элемент
