Стрелочные функции, замыкания, промисы и async/await, методы работы с массивами и объектами, шаблонные литералы, особенности Map и Set, оператор расширения и клонирование объектов.
1. Какие типы данных есть в JavaScript?
Number – число. Тип Number в JavaScript может хранить как целые числа, так и числа с плавающей точкой.
BigInt – используется для представления целых чисел произвольной длины, превышающих 2^53 – 1. BigInt создается с помощью добавления n в конец целочисленного литерала или путем вызова функции BigInt(), которая создает BigInt из строк, чисел и т.д.:
String – строка (последовательность символов), например, "JavaScript – главный язык интернета".Строки записываются с использованием кавычек, можно использовать одинарные или двойные кавычки.
Boolean – логический (булев) тип, который может принимать значения true (истина) или false (ложь).
Object – объект. Это значение в памяти, на которое возможно сослаться с помощью идентификатора. Объект может расцениваться как набор свойств. Значения свойств могут иметь любой тип, включая другие объекты, что позволяет строить сложные, разветвленные иерархии данных.
null – специальное значение, которое представляет «ничего», «пусто», или «неизвестное значение».
undefined – это значение присваивается переменной, если она была объявлена, но не получила значения.
Symbol – это уникальный и неизменяемый тип данных, который можно использовать в качестве идентификатора для свойств объекта.
Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»
(function () { let link = document .getElementById ("fab6fc00-1e7a-4687-be72-67869018961e-https://proglib.io/w/48b12bb2-13"); if (! link) return; let href = link .getAttribute ("href"); if (! href) return; let prefix = link .dataset .prefix; let action = link .dataset .action; link .addEventListener ("click", function (e) { let data = new FormData (); data .append ("url", href); apiFetch (action, { method: "POST", body: data }) .then (function (res) {}) .catch (function (err) { console .error (err); }); }) })();
2. В чем состоит различие между == и ===?
В JavaScript операторы == и === используются для сравнения двух значений, но они работают по-разному:
== проверяет на абстрактное равенство, то есть он преобразует типы данных перед сравнением – например, если вы сравниваете строку с числом, JavaScript преобразует строку в число перед сравнением. Если строка не может быть преобразована в число, она преобразуется в NaN, что возвращает false. Если оба операнда имеют разные типы данных, но они могут быть преобразованы в один и тот же тип данных и имеют одно и то же значение, оператор == вернет true:
=== проверяет на строгое равенство, то есть он не выполняет преобразование типов данных. Если два значения имеют разные типы данных, оператор === вернет false, даже если они имеют одно и то же значение. Если оба операнда имеют одинаковый тип данных и одинаковое значение, оператор === вернет true:
3. Какие способы объявления переменных есть в JavaScript?
В JavaScript есть четыре способа объявления переменных:
myVariable = 5; – неявное объявление переменной. Оно создает глобальную переменную myVariable и присваивает ей значение 5, что может привести к ошибкам в строгом режиме:
var myVariable = 5; – явное объявление переменной с использованием ключевого слова var. Область видимости переменной myVariable может быть функциональной или глобальной, если она объявлена вне функции. Недостаток var состоит в том, что ее область видимости не ограничивается блоком, в котором используется переменная:
let myVariable = 5; – явное объявление переменной с использованием ключевого слова let. Область видимости такой переменной ограничивается блоком, в котором она объявлена – на уровне функции она не видна:
const myVariable = 5; – это явное объявление переменной с использованием ключевого слова const. Переменная myVariable объявляется в области видимости блока, как и let. Однако, в отличие от let, переменная myVariable является неизменяемой – ее значение не может быть изменено после объявления, за одним исключением: если значение является объектом или массивом, его свойства или элементы могут быть изменены, но сама переменная все равно остается неизменяемой:
4. В чем разница между null и undefined?
В JavaScript и null, и undefined представляют отсутствие значения, но они используются в разных контекстах и имеют разные семантические значения.
undefined – присваивается переменной, когда она объявлена, но ей не присвоено конкретное значение:
null – специальное значение, которое представляет «ничего», «пусто» или «неизвестное значение». Присваивается переменной вручную, чтобы указать, что она не должна иметь значения. Например, если нужно очистить значение переменной, можно установить его в null:
5. Чем стрелочные функции отличаются от обычных?
Стрелочные функции позволяют использовать упрощенный синтаксис при создании небольших функций-обработчиков. У них есть некоторые ограничения по сравнению с обычными функциями:
Стрелочные функции не могут использовать объект arguments. В обычных функциях этот объект содержит все переданные при вызове аргументы:
У стрелочных функций другой синтаксис записи. Они записываются короче, используя стрелку => и не требуя ключевого слова function:
У стрелочных функций нет собственного контекста this. Вместо этого контекст берется из внешней области видимости:
Стрелочные функции нельзя использовать как конструкторы с ключевым словом new. То есть, из них нельзя создавать объекты при помощи оператора new:
6. Что такое замыкание?
Замыкание (closure) в JavaScript – это комбинация функции и лексического окружения, в котором эта функция была определена. Такая функция имеет доступ к переменным внешней функции, даже после того, как внешняя функция завершила выполнение:
7. Что такое шаблонные строки (литералы)?
Шаблонные строки (template literals) в JavaScript – это новый способ работы со строками, введенный в ECMAScript 6 (ES6). Они обозначаются обратными кавычками ` вместо одинарных или двойных кавычек. Шаблонные строки позволяют создавать многострочные строки без необходимости использования специальных символов или конкатенации строк:
Шаблонные строки также поддерживают интерполяцию строк, что позволяет вставлять выражения прямо в строку. Эти выражения заключаются в фигурные скобки ${expression} и вычисляются при создании строки:
8. Что такое Map и Set в JavaScript?
Map и Set – это два типа коллекций, которые были введены в ECMAScript 6 (ES6). Они предоставляют более гибкие и мощные способы работы с наборами данных по сравнению с обычными объектами и массивами.
Map – это коллекция, которая состоит из пар ключ-значение, подобно объектам. Основное отличие Map от объектов заключается в том, что Map запоминает порядок добавления пар и позволяет использовать в качестве ключей данные любых типов:
При желании в Map в качестве ключей можно использовать функции:
Set – это множество, в котором каждое значение может появляться только один раз. Дубликатов в Set нет:
9. Как проверить наличие свойства в объекте?
В JavaScript есть два основных способа проверить наличие свойства в объекте – метод hasOwnProperty и оператор in.
Метод hasOwnProperty() возвращает true, если указанное свойство является прямым свойством объекта, и false в противном случае. Этот метод не проверяет свойства в цепочке прототипов объекта. Оператор in возвращает true, если указанное свойство существует в объекте, независимо от того, является ли оно собственным свойством или унаследовано:
10. Как получить доступ к свойствам объекта?
В JavaScript есть два основных способа доступа к свойствам объекта: статический (с использованием точечной нотации) и динамический (с использованием квадратных скобок).
Точечная нотация позволяет напрямую получить доступ к свойству объекта, используя имя свойства. Скобочная нотация позволяет динамически получить доступ к свойству объекта с использованием квадратных скобок:
Скобочная нотация использует интерполяцию и особенно полезна, если имя свойства неизвестно заранее или когда оно хранится в переменной:
11. Какие основные методы работы с массивами есть в JavaScript?
Oсновные методы для работы с массивами – forEach, filter, map и reduce.
Метод forEach выполняет функцию для каждого элемента в массиве. Он не возвращает ничего, но позволяет выполнять действия с каждым элементом массива. Применяется, когда нужно выполнить некоторые операции над каждым элементом, но не нужно создавать новый массив:
Метод filter создает новый массив, включающий только те элементы исходного массива, для которых функция обратного вызова возвращает true. Используется, когда нужно отфильтровать массив, чтобы включить только определенные элементы:
Метод map создает новый массив, который состоит из результатов применения функции к каждому элементу исходного массива. Применяется, когда нужно преобразовать каждый элемент массива:
Метод reduce выполняет функцию для каждого элемента массива, накапливая результат в одном значении. Используется, когда нужно объединить все элементы массива в одно значение, например, вычислить сумму всех чисел в массиве:
Статья по теме
☕📚 Методы массивов в JavaScript для новичков: советы, рекомендации и примеры
12. Какие способы создания объектов есть в JavaScript?
Объекты JavaScript создаются с помощью функции-конструктора, литеральной нотации объекта, класса и метода Object.create().
Функция-конструктор – это специальная функция, которую можно использовать для создания объектов с определенными свойствами и методами. Функция-конструктор используется с ключевым словом new:
Литеральная нотация объекта позволяет создать объект, указав его свойства и значения внутри фигурных скобок {}:
Классы позволяют создавать объекты с помощью синтаксиса, похожего на классы в других языках программирования:
Метод Object.create() позволяет создать новый объект, используя существующий объект в качестве прототипа для нового объекта. Этот метод принимает два аргумента: прототип и объект свойств. Объект свойств определяет свойства нового объекта и их атрибуты configurable, enumerable, writable и value:
13. Что такое Promise (промис)?
Промис (Promise) — специальный объект JavaScript, который используется для написания и обработки асинхронного кода. Он имеет три состояния:
- pending – начальное состояние, означает, что асинхронная операция еще не завершена.
- fulfilled – операция успешно завершена.
- rejected – операция завершена с ошибкой.
Промисы создаются с помощью конструктора new Promise(). Этот конструктор принимает в качестве аргумента функцию, которая выполняет асинхронную операцию. Функция принимает два аргумента resolve и reject, которые используются для изменения состояния промиса. Если асинхронная операция завершена успешно, вызывается resolve, если произошла ошибка, вызывается reject:
Промисы позволяют обрабатывать результаты асинхронных операций, используя методы .then() и .catch(). Метод .then() принимает два аргумента: функцию обратного вызова, которая будет вызвана при успешном выполнении промиса, и функцию обратного вызова, которая будет вызвана при ошибке. Метод .catch() используется для обработки ошибок, которые могут произойти при выполнении промиса:
Промисы можно связывать в цепочки, что позволяет выполнять несколько асинхронных операций последовательно. Для этого результат каждого промиса передается в следующий промис в цепочке. Это делается с помощью метода .then():
14. Что такое async/await и как они используются?
Async/await – это синтаксис JavaScript, который облегчает работу с промисами. Ключевое слово async перед функцией означает, что функция всегда возвращает промис. Ключевое слово await используется внутри асинхронных функций и заставляет JavaScript ожидать, пока промис не будет выполнен, прежде чем продолжить выполнение кода:
Надо отметить, что await нельзя использовать вне асинхронной функции. Например, этот код приведет к ошибке:
Чтобы решить эту проблему, можно обернуть вызов в другую асинхронную функцию:
15. Как проверить, является ли объект массивом?
Для такой проверки можно использовать встроенный метод Array.isArray(). Этот метод принимает объект в качестве аргумента и возвращает true, если объект является массивом, и false в противном случае:
16. Что делает оператор расширения?
Оператор расширения ... разворачивает итерируемые элементы в отдельные элементы, что удобно для передачи аргументов, объединения массивов/объектов и добавления новых свойств в объекты. Используется:
В функциях, где ожидаемое количество аргументов для вызова равно нулю или более:
В литералах массива:
В литералах объекта, где количество пар ключ-значение должно быть равно нулю или более:
Для преобразования строки в массив символов:
Для преобразования числа в массив цифр и наоборот:
Для копирования объектов:
17. Как выполняется клонирование объекта?
Если объект не содержит вложенных объектов, как в приведенном ниже примере, для клонирования можно использовать оператор расширения ... или метод Object.assign():
Если объект содержит вложенные объекты, нужно выполнить глубокое копирование. Относительно медленный вариант – с использованием JSON:
Другой вариант – с использованием метода cloneDeep из библиотеки lodash:
18. Как изменить контекст функции?
Изменить контекст функции можно с помощью методов bind(),call() и apply().
Метод bind() возвращает новую функцию с привязанным контекстом:
Метод call() принимает последовательность аргументов, а apply() принимает массив аргументов в качестве второго параметра:
19. Что такое тернарный оператор и как он работает?
Тернарный оператор – это сокращенная форма записи if-else. Он называется тернарным, потому что является единственным оператором в JavaScript, который принимает три аргумента. Синтаксис тернарного оператора:
Условие – любое условие, которое возвращает true или false.
Выражение для истинного условия – что нужно вернуть, если условие истинно.
Выражение для ложного условия – что нужно вернуть, если условие ложно.
Например:
20. Что такое деструктуризация?
Деструктуризация в JavaScript позволяет извлечь данные из массива или свойства объекта и присвоить их отдельным переменным. Деструктуризация удобна тем, что позволяет не писать лишний код для доступа к данным внутри объектов/массивов по индексам или ключам.
Деструктуризация массива:
Деструктуризация объекта:
Продолжение следует.
***