для повторного использования кода в javascript есть

Повторное введение в JavaScript (JS учебник)

Почему повторное введение? Потому что JavaScript известен тем, что является самым неправильно понятым языком программирования в мире. Его часто называют игрушкой, но под слоем обманчивой простоты ожидают мощные языковые возможности. В настоящее время JavaScript используется невероятным количеством высококлассных приложений, показывая, что углублённое знание этой технологии является важным навыком для любого веб или мобильного разработчика.

Было бы полезно начать с истории языка. JavaScript был создан в 1995 Бренданом Айком, инженером в компании Netscape. Первый релиз состоялся вместе с выходом браузера Netscape 2 в начале 1996 года. Сначала язык назывался LiveScript, но затем был переименован в связи с маркетинговыми целями, чтобы сыграть на популярности языка Java компании Sun Microsystem — несмотря на это языки практически не имеют ничего общего друг с другом. Так было положено начало путаницы между этими языками.

Чуть позже Microsoft выпустила очень похожий и практически совместимый язык JScript, который шёл вместе с IE3. Через пару месяцев Netscape отправил язык в Ecma International, Европейскую организацию занимающуюся стандартами, которая выпустила первую версию стандарта ECMAScript в 1997. Стандарт получил значимое обновление в ECMAScript edition 3 в 1999, и остаётся самым стабильным до сегодняшнего дня. Четвёртая версия была отклонена, из-за проблем с усложнениями в языке. Многие вещи из четвёртого издания послужили основой для стандарта ECMAScript 5 (декабрь 2009) и ECMAScript 6 (июнь 2015).

На заметку: Далее по тексту мы будем называть язык ECMAScript как «JavaScript».

В отличие от большинства языков, JavaScript не следует концепции ввода (input) и вывода (output). Он спроектирован таким образом, чтобы запускаться как язык сценариев, встроенный в среду исполнения. Самая популярная среда исполнения это браузер, однако интерпретаторы JavaScript присутствуют и в Adobe Acrobat, Photoshop, Yahoo!’s Widget engine, и даже в серверном окружении, например node.js.

Описание

Начнём с основы любого языка: с типов данных. Программы на JavaScript оперируют значениями, и все эти значения принадлежат к определённому типу. Типы данных в JavaScript:

Да, ещё Undefined и Null, которые немного обособлены. И Массивы, которые являются особым видом объектов. А также Даты и Регулярные выражения, тоже являющиеся объектами. И, если быть технически точным, функции это тоже особый вид объекта. Поэтому схема типов выглядит скорее так:

Также есть несколько встроенных типов Ошибок. Чтобы было проще, рассмотрим подробнее первую схему.

Числа

Числа в JavaScript — это «64-битные значения двойной точности формата IEEE 754», согласно спецификации. Это имеет интересные последствия. В JavaScript нет такой вещи, как целое число, поэтому с арифметикой нужно быть начеку, если вы привыкли к вычислениям в языках C или Java. Взгляните на пример:

На практике целые значения это 32-битные целые (и хранятся таким образом в некоторых браузерных реализациях), что может быть важно для побитовых операций.

Поддерживаются стандартные арифметические операторы, включая сложение, вычитание, остаток от деления и т.д. Есть ещё встроенный объект, который я забыл упомянуть, называемый Math, который содержит более продвинутые математические функции и константы:

Если вы не предоставите основание, то можете получить неожиданные результаты:

Если хотите преобразовать двоичное число в десятичное целое, просто смените основание:

Также можно использовать унарный оператор + для преобразования значения в число:

Специальное значение NaN (сокращение от «Not a Number») возвращается, если строка не является числом:

NaN «заразителен»: любая математическая операция над NaN возвращает NaN :

Проверить значение на NaN можно встроенной функцией isNaN() :

Строки

Чтобы представить единственный символ, используйте строку, содержащую только этот символ.

Чтобы выяснить длину строки (в кодовых единицах), используйте свойство length :

Это уже первый шаг для работы с объектами! Мы уже говорили, что и строки можно использовать как объекты? У них тоже есть методы:

Другие типы

Ещё в JavaScript есть логический (булевый) тип данных, который может принимать два возможных значения true или false (оба являются ключевыми словами). Любое значение может быть преобразовано в логическое значение в соответствии со следующими правилами:

Преобразование значений можно осуществить явно, используя функцию Boolean() :

Переменные

let позволяет объявлять переменные, которые доступны только в блоке, в котором они объявлены:

const позволяет создавать переменные, чьи значения не предполагают изменений. Переменная доступна из блока, в котором она объявлена.

Пример кода с переменной, объявленной с помощью var :

Операторы

Оператор + (en-US) так же выполняет конкатенацию (объединение) строк:

При сложении строкового и числового значений происходит автоматическое преобразование в строку. Поначалу такое может запутать:

Для приведения значения к строке просто прибавьте к нему пустую строку.

Если преобразование нежелательно, то используют оператор строгого равенства:

Отдельного внимания стоят побитовые операторы (en-US), с которыми вы можете ознакомиться в соответствующем разделе.

Управляющие структуры

Цикл for похож на такой же в языках C и Java: он позволяет задавать данные для контроля за выполнением цикла:

Логические операторы && и || используют «короткий цикл вычисления», это значит, что вычисление каждого последующего оператора зависит от предыдущего. Например, полезно проверить существует ли объект или нет, прежде чем пытаться получить доступ к его свойствам:

Таким способом удобно задавать значения по умолчанию:

Оператор switch используется при необходимости множественного сравнения:

Объекты

Объекты в JavaScript представляют собой коллекции пар имя-значение (ключ-значение). Они похожи на:

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

Существует два основных способа создать объект:

Обе эти записи делают одно и то же. Вторая запись называется литералом объекта и более удобная. Такой способ является основой формата JSON, и при написании кода лучше использовать именно его.

С помощью литерала объекта можно создавать не только пустые объекты, но и объекты с данными:

Доступ к свойствам объекта можно получить следующими способами:

Эти два метода равнозначны. Первый метод используется, если мы точно знаем к какому методу нам нужно обратиться. Второй метод принимает в качестве имени свойства строку, и позволяет вычислять имя в процессе вычислений. Следует отметить, что последний метод мешает некоторым движкам и минимизаторам оптимизировать код. Если появится необходимость назначить в качестве имён свойств объекта зарезервированные слова, то данный метод тоже может пригодиться:

На заметку: Стандарт EcmaScript 5 позволяет использовать зарезервированные слова в качестве имён свойств объекта без «оборачивания» их в кавычки. Подробнее в спецификации ES5.

Больше информации об объектах и прототипах: Object.prototype (en-US).

Для получения информации по прототипам объектов и цепям прототипов объектов смотрите Inheritance and the prototype chain.

Массивы

Массивы в JavaScript всего лишь частный случай объектов. Работают они практически одинаково (если именем свойства является число, то доступ к нему можно получить только через вызов в скобках []), только у массивов есть одно удивительное свойство ‘ length ‘ (длина). Оно возвращает число, равное самому большому индексу массива + 1.

Создать массив можно по старинке:

Но гораздо удобнее использовать литерал массива:

Запомните, свойство array.length не обязательно будет показывать количество элементов в массиве. Посмотрите пример:

Запомните — длина массива это его самый большой индекс плюс один.

Если попытаться получить доступ к несуществующему элементу массива, то получите undefined :

Для перебора элементов массива используйте такой способ:

И самый новый способ перебора свойств массива был добавлен в ECMAScript 5 — это метод forEach():

Для добавления данных в массив используйте метод push() :

У массивов есть ещё множество полезных методов. С их полным списком вы можете ознакомиться по ссылке.

Функции

Наряду с объектами функции также являются ключевыми компонентами языка JavaScript. Базовые функции очень просты:

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

Можно передать больше аргументов, чем ожидает функция:

Или создадим функцию для вычисления среднего значения:

Это довольно полезно, но при этом кажется излишне подробным. Для уменьшения количества кода взглянем на замену использования массива аргументов синтаксисом остаточных параметров. В этом случае мы можем передавать в функцию любое количество аргументов, сохраняя код минималистичным. Оператор остаточных параметров используется в списке параметров функции в формате: . variable и включает в себя целый список аргументов, с которыми функция будет вызвана. Мы будем также использовать замену цикла for циклом for. of для получения значений, которые будет содержать наша переменная.

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

Важно отметить, что где бы ни был размещён rest parameter operator в объявлении функции, он будет содержать все аргументы после его объявления, не раньше. например: function avg(firstValue, . args) будет хранить первое переданное значение в переменной firstValue и оставшиеся в args. Это ещё одно полезное свойство языка, однако оно ведёт нас к новой проблеме. avg() функция принимает список аргументов, разделённый запятыми. Но что если вы хотите найти среднее значение в массиве? Вы можете переписать функцию следующим образом:

На тот случай, если вы хотите использовать первый вариант функции, а не переписывать её заново, то в JavaScript есть возможность вызывать функцию с произвольным массивом аргументов. Для этого используется метод apply():

Вторым аргументом метода apply() передаётся массив, который будет передан функции в качестве аргументов. О первом аргументе мы поговорим позже. Наличие у функций методов также говорит о том, что на самом деле они являются объектами.

Этот же результат можно получить, используя spread operator в вызове функции.

For instance: avg(. numbers)

В JavaScript можно создавать анонимные функции:

В JavaScript есть возможность рекурсивного вызова функции. Это может оказаться полезным при работе с иерархическими (древовидными) структурами данных (например такие, которые встречаются при работе с DOM).

Тут мы сталкиваемся с проблемой: как вызвать функцию рекурсивно, если у неё нет имени? Для этого в JavaScript есть именованные функциональные выражения IIFEs (Immediately Invoked Function Expressions). Вот пример использования именованной самовызывающейся функции:

Имя функции в примере доступно только внутри самой функции. Это улучшает оптимизацию и читаемость кода.

Собственные объекты

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

А вот кое-что новенькое: ключевое слово ‘ this ‘. Когда ‘ this ‘ используется внутри функции, оно ссылается на текущий объект. Значение ключевого слова зависит от способа вызова функции. Если вызвать функцию с обращением к объекту через точку или квадратные скобки, то ‘ this ‘ получится равным данному объекту. В ином случае ‘ this ‘ будет ссылаться на глобальный объект. Это часто приводит к ошибкам. Например:

Используя особенность ключевого слова ‘ this ‘, можно улучшить код функции makePerson :

В примере мы использовали новое ключевое слово: ‘ new ‘. Оно тесно связано с ‘this’. Данное ключевое слово создаёт новый пустой объект, а потом вызывает указанную функцию, а this получает ссылку на этот новый объект. Функции, которые предназначены для вызова с ‘ new ‘ называются конструкторами. Существует соглашение, согласно которому все функции-конструкторы записываются с заглавной буквы.

Каждый раз, когда с помощью конструктора создаётся новый объект, мы заново создаём и две новые функции. Гораздо удобнее создать эти функции отдельно и дать доступ к ним конструктору:

Уже лучше: мы создали функции-методы только один раз, а при новом вызове функции-конструктора просто ссылаемся на них. Можно сделать ещё лучше? Конечно:

Это очень мощный инструмент. JavaScript позволяет изменять прототипы в любое время, это значит, что можно добавлять новые методы к существующим объектам во время выполнения программы:

Данный метод будет работать даже на литералах строки!

Помните, мы вызывали avg.apply() с первым аргументом равным null? Теперь мы можем сделать так: первым аргументом, переданным методу apply() будет объект, который примет значение ‘ this ‘. Вот к примеру упрощённая реализация ‘ new ‘:

практически полностью эквивалентен этому:

Вложенные функции

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

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

Замыкания (Closures)

Мы подошли к одному из самых мощных и непонятных инструментов JavaScript. Давайте разберёмся.

Функция makeAdder создаёт новую функцию, которая прибавляет полученное значение к значению, которые было получено при создании функции.

И вот что произошло: когда JavaScript выполняет функцию, создаётся объект ‘scope’, который содержит в себе все локальные переменные, объявленные внутри этой функции. Он инициализируется любым значением, переданным функции в качестве параметра. ‘Scope’ подобен глобальному объекту, который содержит все глобальные переменные и функции, кроме нескольких важных отличий: при каждом вызове функции создаётся новый объект ‘scope’ и, в отличие от глобального, к объекту ‘scope’ нельзя получить прямой доступ из вашего кода. И нет способа пройтись по свойствам данного объекта.

Все объекты scope соединяются в цепочку областей видимости, которая похожа на цепочку прототипов в объектной системе JavaScript.

Замыкание это связка из функции и объекта scope, созданного при её вызове. Подробнее о замыканиях здесь.

Источник

Коллбэк в JavaScript… Что за зверь?

Если вы не очень хорошо представляете себе — что такое «коллбэки», и как ими пользоваться в JavaScript, сейчас у вас есть шанс их понять и научиться с ними работать.

Перейдём сразу к делу. Коллбэк — это функция, которая должна быть выполнена после того, как другая функция завершит работу. Отсюда и название, которое, в английском написании, может быть представлено как «call back», хотя обычно это — «callback». Среди вариантов перевода этого слова — «обратный вызов». В русскоязычных публикациях, допускающих использование жаргона программистов, весьма распространена калька с оригинального названия: «коллбэк». Если же обойтись без жаргона, то о чём мы говорим, называется «функция обратного вызова».

Углубившись, для объяснения сущности функций обратного вызова, в особенности JavaScript, можно сказать, что функции в JS — это объекты. Поэтому функции могут принимать другие функции в качестве аргументов и возвращать их в качестве результатов. Функции, которые работают подобным образом, называют функциями высшего порядка. Коллбэками же обычно называют функции, передаваемые другим функциям в качестве аргументов.

Зачем нужны функции обратного вызова?

Коллбэки нужны по одной очень важной причине: JavaScript — это язык, в котором огромную роль играют события. Это означает, что вместо того, чтобы ожидать, скажем, результата выполнения некоей функции, остановив при этом все остальные операции, JavaScript-программа работает, наблюдая за событиями и реагируя на них.

Взглянем на простой пример:

Как можно ожидать, функция first() выполняется первой, а функция second() — второй. Запуск этого кода приводит к тому, что в консоль будет выведено следующее:

Вот что получилось теперь:

Для наших целей особенности работы setTimeout() сейчас неважны. Главное — обратите внимание на то, что вызов console.log(1) будет выполнен с задержкой.

Вот что произойдёт при запуске этого кода:

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

Создаём функцию обратного вызова

Создадим собственную функцию обратного вызова.

Для начала — откройте консоль разработчика Chrome ( Ctrl + Shift + J в Windows, или Cmd + Option + J в Mac) и введите следующее:

Вызовем обновлённую функцию следующими образом:

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

После вызова функции doHomework() всё будет выглядеть точно так же, как в предыдущем примере. Различия заключаются лишь в том, как мы работаем с функцией обратного вызова.

Функции обратного вызова в реальных проектах

Для программного взаимодействия с популярной социальной сетью Twitter используется специальное API. Выполняя обращения к этому API, мы вынуждены ждать ответа, и только после его получения можем выполнять с тем, что придёт от Twitter, какие-то действия. Вот материал, где рассмотрена работа с Twitter API в среде Node.js с использованием NPM-пакета twitter.

Рассмотрим фрагмент кода из этого материала. Полагаем, он является отличной демонстрацией практического применения функций обратного вызова.

Итоги

Надеемся, наш рассказ о функциях обратного вызова в JavaScript оказался полезен тем, кто не очень хорошо в них разбирался. На самом деле, то, о чём мы здесь говорили — это лишь вершина айсберга. Однако теперь, поняв основы, вы можете расширять и углублять свои знания в этой области.

Уважаемые читатели! Если вы из тех, кто, до чтения этого материала, плохо представлял себе, что такое функции обратного вызова в JS, скажите — стало понятнее? А если коллбэки для вас — обычное дело, просим поделиться опытом с новичками.

Источник

100 теоретических вопросов по JavaScript

Доброго времени суток, друзья!

Представляю вашему вниманию список из первых 100 вопросов по основам JavaScript из этого репозитория с краткими ответами и ссылками на «Современный учебник по JavaScript» Ильи Кантора (JSR) и MDN. Также в конце имеются ссылки на статьи для пытливых умов.

Данный список, а также 300+ практических вопросов доступны в моем приложении, которое можно посмотреть и установить здесь (PWA Store) и здесь (Netlify). В приложении реализован механизм запоминания изученного вопроса, а также обеспечена работа в офлайн-режиме.

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

Как создать объект?

Конструктор объекта.

Простейший способ создать объект — использовать контруктор объекта. Однако, данный способ использовать не рекомендуется.

Метод Object.create()

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

Литерал объекта

Синтаксис объектного литерала эквивалентен методу Object.create(null).

Функция-конструктор

Создаем функцию-конструктор и применяем оператор «new» для создания экземпляра этой функции — объекта.

Функция-конструктор и прототип

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

Это похоже на создание экземпляра с помощью Object.create() с прототипом функции и привязку данной функции к
экземпляру с параметрами в качестве аргументов.

Класс

Для создания объектов могут использоваться классы.

Шаблон проектирования синглтон (singleton)

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

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

В чем разница между Call, Apply и Bind?

Разницу между данными методами можно объяснить с помощью следующих примеров.
Метод call() вызывает функцию с указанным значением this и аргументами через запятую.

Метод apply() вызывает функцию с указанным значением this и аргументами в виде массива.

Метод bind() возвращает новую функцию с указанным значением this и позволяет передать ей массив или любое количество аргументов через запятую.

Таким образом, методы call() и apply() вызывают функцию после ее привязки к объекту. Разница между ними состоит в способе передачи аргументов. Эту разницу легко запомнить при помощи первых букв методов: call — это запятая (comma, c), apply — массив (array, a). Метод bind() возвращает новую функцию, привязанную к указаному объекту.
JSR — Call/Apply
JSR — Bind
MDN — Call
MDN — Apply
MDN — Bind

Что такое JSON и какие у него есть методы?

Стрингификация: преобразует объект в строку в формате JSON для передачи по сети.

Что делает метод Array.slice()?

Метод slice() возвращает выбранные элементы массива в виде нового массива. Он возвращает элементы, начиная с индекса, указанного в первом аргументе, и заканчивая, но не включая, индексом, указанном во втором необязательном аргументе. Если второй аргумент отсутствует, то будут извлечены все элементы, начиная с индекса, указанного в первом аргументе.

Обратите внимание, что данный метод не изменяет исходный массив, а лишь возвращает его подмножество в виде нового массива.
JSR
MDN

Что делаем метод Array.splice()?

Метод splice() используется для добавления или удаления элементов в или из массива. Первый аргумент определяет начальную позицию для добавления или удаления элементов, второй опциональный аргумент — количество удаляемых элементов. Каждый последующий аргумент добавляется в массив:

Обратите внимание, что метод splice() модифицирует исходный массив и возвращает массив извлеченных элементов.
JSR
MDN

В чем разница между slice() и splice()?

Как сравниваются объекты (objects) и карты (maps)?

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

Что такое лямбда- или стрелочные функции?

Почему функции называют объектами первого класса?

В JavaScript функции являются объектами первого класса. Это означает, что функции могут использоваться как обычные переменные.
Например, функция может передаваться в качестве аргумента другой функции, возвращаться как значение из другой функции и присваиваться переменной. В следующем примере функция присваиваивается обработчику:

Что такое функция первого порядка?

Функция первого порядка — это функция, которая не принимает другую функцию в качестве аргумента и не возвращает функцию как значение:

Что такое функция высшего порядка?

Функция высшего порядка — это функция, которая принимает другую функцию в качестве аргумента или возращает другую функцию как значение:

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

Унарная функция (функция-монада) — это функция, принимающая только один аргумент:

Что такое каррирование (currying)?

Каррирование — это процесс преобразования функции с несколькими параметрами в несколько функций с одним параметром. Данный процесс назван в четь математика Хаскелла Карри. Каррирование превращает одну n-арную функцию в несколько унарных функций (уменьшает арность функции):

Каррирование применяется в целях обеспечения возможности повторного использования кода и создания композиции из функций.
JSR

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

Чистая функция — это функция, возвращаемое значение которой зависит только от передаваемых аргументов, без побочных эффектов. Проще говоря, если вы вызывается функцию n раз с n аргументами, и функция всегда возвращает одно и тоже значение, значит, она является чистой:

В приведенном примере impureAddNumber не является чистой функцией, поскольку метод push() возвращает новую длину массива, которая не зависит от передаваемого аргумента. Вторая функция является чистой, поскольку метод concat() объединяет два массива без побочных эффектов и возвращает новый массив. Чистые функции важны для юнит-тестирования и не нуждаются во внедрении зависимостей. Отсутствие побочных эффектов повышает надежность приложения за счет более слабых связей между его элементами. Одним из воплощений данного принципа является концепция неизменности (иммутабельности), представленная в ES6, и заключающаяся в предпочтении const перед let.
JSR
MDN

Для чего используется ключевое слово «let»?

Ключевое слово «let» служит для объявления локальной переменной, имеющей блочную область видимости. Область видимости такой переменной органичена блоком, оператором или выражением, в котором она используется. Переменные, объявленные с помощью ключевого слова «var», имеют глобальную область видимости или область видимости функции, в которой они определены:

В чем разница между let и var?

JSR
MDN — let
MDN — var

Почему в качестве ключевого слова было выбрано слово «let»?

Как переопределить переменную в блоке switch?

Если вы попытаетесь переопределить переменную, объявленную с помощью ключевого слова «let» в блоке switch, то получите ошибку:

Для решения данной задачи необходимо создать новый блок внутри case — новую лексическую область видимости:

Что такое временная мертвая зона?

При попытке доступа к переменным, объявленным с помощью ключевого слова «let» или «const» (но не «var»), до их определения (т.е. до присваивания им значения внутри текущей области видимости) будет выброшено исключение ReferenceError (ошибка ссылки). Другими словами, временной метрвой зоной называется время между созданием контекста (области видимости) переменной и ее определением:

Что такое немедленно вызываемое функциональное выражение (IIFE, Immediately Invoked Function Expression)?

IIFE — это функция, которая вызывается сразу после определения. Синтаксис такой функции может выглядеть так (один из вариантов, наиболее распространенный):

Главная причина использования IIFE заключается в обеспечении приватности переменных, поскольку доступ к переменным, объявленным внутри IIFE, нельзя получить из внешнего окружения:

В чем заключаются преимущества использования модулей?

Что такое запоминание или мемоизация?

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

Что такое поднятие переменных (hoisting)?

Поднятие — это процесс перемещения переменных и функциональных выражений в начало их области видимости перед выполнением кода. Запомните: поднимаются только сами переменные и выражения, а не их инициализация (т.е. поднимается объявление переменной, а не присваивание ей значения):

Для компилятора данный код выглядит так:

Что такое класс?

Классы, представленные в ES6, являются синтаксическим сахаром (оберткой, абстракцией или надстройкой) для протипного наследования (для прототипа функции-конструктора). Пример функции-конструктора:

Тот же пример с использованием класса:

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

Что такое модуль?

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

Что такое область видимости?

Что такое сервис-воркер (service worker)?

Как взаимодействовать с объектной моделью документа (Document Object Model, DOM) с помощью сервис-воркеров?

Как повторно использовать информацию при перезапуске сервис-воркера?

Что такое индексированная база данных (IndexedDB)?

Что такое веб-хранилище (Web Storage)?

Что такое postMessage?

Что такое куки (cookie)?

Куки — это небольшой фрагмент данных, который сохраняется на компьютере пользователя для последующего использования браузером. Куки сохраняются в виде пар ключ/значение:

JSR
MDN

Зачем нужны куки?

Какими возможностями обладают куки?

По умолчанию, куки удаляются при закрытии браузера, однако это можно изменить, установив время жизни (expires) (в формате UTC):

По умолчанию, куки принадлежат текущей странице, однако это также можно изменить, установив путь (path):

Как удалить куки?

Удалить куки можно, установив прошедшее время в качестве времени жизни. В этом случае не нужно определять значение куки:

Обратите внимание, что в данном случае необходимо определить путь для удаления правильного куки. Некоторые браузеры не позволяют удалить куки без указания этого параметра.
JSR
MDN

В чем разница между куки, локальным и сессионным хранилищами?

В чем главное отличие между локальным и сессионным хранилищами?

Как получить доступ к веб-хранилищу?

Объект window предоставляет объекты WindowLocalStorage и WindowSessionStorage, которые имеют свойства localStorage и sessionStorage, соответственно. Эти свойства создают экземпляр объекта Storage, с помощью которого можно записывать, извлекать и удалять данные для определенного домена и типа хранилища (сессионное или локальное):

Какие методы предоставляет сессионное хранилище?

Сессионное хранилище предоставляет методы для чтения, записи и удаления данных:

Какое событие возникает при работе с веб-хранилищем?

При изменении хранилища в контексте другого документа возникает событие storage:

Пример обработки данного события:

Данное событие, в частности, позволяет реализовать своего рода чат.
JSR
MDN

Для чего используется веб-хранилище?

Как определить поддержку веб-хранилища браузером?

Перед использованием веб-хранилища рекомендуется проверить поддержку данного интерфейса браузерами:

По данным CanIUse поддержка веб хранилища на сегодняшний день составляет 98%.
JSR
MDN

Как определить поддержку сервис-воркеров браузером?

Перед использованием сервис-воркеров рекомендуется проверить поддержку данного интерфейса браузерами:

По данным CanIUse поддержка сервис-воркеров на сегодняшний день составляет 94,5%.
MDN

Приведите пример веб-воркера

Для использования веб-воркера необходимости сделать следующее.
Создать файл для воркера, например, counter.js:

Метод postMessage() используется для отправки сообщения странице.
Создаем объект воркера:

После этого обрабатываем получение сообщений от воркера:

Воркер будет продолжать обрабатывать событие message даже после того, как внешний скрипт выполнит свою работу, поэтому нужно принудительно его остановить:

Если присвоить воркеру значение undefined, код можно будет использовать повторно:

Назовите ограничения веб-воркеров по работе с DOM

Что такое промис (обещание, promise)?

Промис — это объект, который либо выполняется с некоторым значением, либо отклоняется с ошибкой. Разрешение промиса происходит либо после истечения определенного времени, либо после возникновения определенного события. Промис может иметь одно из трех состояний: находится в режиме ожидания (pending), выполнен (fulfilled), отклонен (rejected).
Синтаксис промиса:

Пример использования промиса:

Алгоритм выполнения промиса:

JSR
MDN

Зачем нужны промисы?

Назовите три возможных состояния промиса

Что такое функция обратного вызова (колбек)?

Колбек — это функция, которая передается другой функции в качестве аргумента. Данная функция (внутренняя) вызывается внутри родительской (внешней) для выполнения определенной операции. Рассмотрим простой пример:

В приведенном примере функция outer запрашивает имя пользователя и записывает его в переменную name. Затем данная функция передает name функции callback, которая выводит приветствие с именем пользователя.
JSR
MDN

Зачем нужны колбеки?

Колбеки нужны, поскольку JavaScript — язык, управляемый событиями. Это означает, что вместо ожидания ответа на запрос или обработки определенного события, JS продолжает реагировать на другие события. Рассмотрим пример, в котором одна функция обращается к интерфейсу, а другая — выводит сообщение в консоль:

Как видите, JS не ожидает завершения первой функции, а продолжает выполнение кода. Поэтому колбеки используются для имитации асинхронности, предотвращая блокировку основного потока выполнения программы.
JSR
MDN

Что такое ад колбеков?

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

Такой подход к написанию кода считается плохой практикой, кроме случаев каррирования (включая debounce и throttle) или частичного применения функций.
JSR
MDN

Что такое события, отправленные сервером (server-sent events, SSE)?

Как получать сообщения (уведомления или события), отправленные сервером?

Для этого используется объект «EventSource»:

Как проверить поддержку SSE браузером?

По данным CanIUse на сегодняшний день SSE поддерживается 95% браузеров.
JSR
MDN

Какие события возникают при работе с SSE?

Назовите основные правила работы с промисами

Что такое колбек в колбеке?

Вы можете вкладывать колбеки друг в друга с целью последовательного выполнения определенных операций:

Что такое цепочка из промисов?

Последовательное выполнение нескольких асинхронных задач с помощью промисов называется цепочкой промисов. Рассмотрим пример:

Что такое Promise.all()?

Promise.all() — это промис, принимающий массив других промисов в качестве аргумента и возвращающий результаты выполненных промисов или ошибку при отклонении одного из них. Синтаксис:

Помните, что порядок получения результатов зависит от порядка промисов в массиве.
MDN
JSR

Что такое Promise.race()?

Метод Promise.race() возвращает результат первого выполненного или отклоненного промиса из переданных ему в виде массива промисов:

Что такое строгий режим?

Зачем нужен строгий режим?

Как включить строгий режим?

Строгий режим включается с помощью инструкции ‘use strict’ (или «use strict») в начале кода или функции. Обычно, данная инструкция указывается в самом начале скрипта, т.е. в глобальном пространстве имен:

Если ‘use strict’ указывается в функции, то действие строгого режима распространяется только на эту функцию:

Для чего используется двойное отрицание?

Двойное отрицание (!!) преобразует значение в логическое. Если значение является ложным, то возвращается false, иначе — true:

Помните: «!!» — это не отдельный оператор, а два оператора «!».
MDN
JSR

Для чего используется оператор «delete»?

Данный оператор служит для удаления свойств объектов и значений этих свойств:

Помните, что поскольку массив — это тоже объект, применение delete к элементу массива, удалит его значение и запишет в него undefined, т.е. индекс элемента массива сохранится и длина массива не изменится
JSR
MDN

Для чего используется оператор «typeof»?

Данный оператор используется для определения типа переменной или выражения:

Что такое undefined?

undefined — это неопределенное (не отсутствующее) стандартное значение (значение по умолчанию) переменной, которой не было присвоено значения, а также необъявленной переменной. Это один из примитивных типов данных:

Данное значение может присваиваться переменным явно:

Что такое null?

null — значение, представляющее собой отсутствие значения, установленное явно. Это один из примитивных типов данных. С помощью null можно удалить значение переменной:

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

Что такое eval?

Функция eval() вычисляет переданную ей строку. Строка может быть выражением, переменной, одним или несколькими операторами:

Использовать не рекомендуется по причинам безопасности.
JSR
MDN

В чем разница между window и document?

Как получить доступ к истории браузера?

Информацию об истории перемещений между страницами в браузере содержит свойство history объекта window. Для перехода к предыдущей или следующей странице следует использовать методы back(), next() или go():

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

Что делает isNaN()?

Функция isNaN() преобразует значение в число и проверяет, является ли оно NaN.

Более надежной версией данной функции является метод Number.isNaN(), представленный в ES6.
JSR
MDN

В чем разница между необъявленными и неопределенными переменными?

Что такое глобальные переменные?

В браузере глобальные функции и переменные, объявленные с помощью ключевого слова «var», или без использованию ключевого слова (в нестрогом режиме), становятся свойствами глобального объекта window (не работает в модулях). Такие переменные доступны из любого места программы. Использовать глобальные переменные не рекомендуется. При необходимости создания глобальной переменной лучше сделать это явно:

Какие проблемы влечет за собой создание глобальных переменных?

Что такое NaN?

Глобальное свойство NaN является значением, представляющим собой не число (Not-a-Number). Точнее, NaN указывает на то, что значение является неправильным, но все-таки числом. Поэтому typeof NaN возвращает number.

Что делает isFinite()?

Также существует метод Number.isFinite(), который в отличие от isFinite() не преобразует аргумент в число перед проверкой.
MDN
JSR

Что такое поток событий (event flow)?

Что такое всплытие события?

Что такое погружение или захват события?

Как отправить форму на обработку?

Это можно сделать разными способами:

Любая кнопка в форме по умолчанию имеет тип submit, т.е. служит для отправки формы.
MDN
JSR

Как получить информацию об операционной системе?

Данную информацию содержит глобальный объект navigator. Некоторую часть этой информации можно получить через его свойство platform:

В чем разница между событиями «DOMContentLoaded» и «load»?

В чем разница между нативными, хостовыми (принадлежащими среде выполнения кода) и пользовательскими объектами?

Нативные объекты (native objects) являются частью языка и определяются в спецификации ECMAScript. Такими объектами являются, например, Number, String, Function, Object, Math, RegExp, Date и т.д. Хостовые объекты (host objects) предоставляются браузером или другой средой выполнения, например, Node.js. Такими объектами являются, например, window, document (DOM), XMLHttpRequest, Web API (стек вызовов — call stack, очередь задач — task queue) и др. Пользовательскими объектами (user objects) являются любые объекты, создаваемые в коде, например, объект, содержащий информацию о пользователе:

Какие средства используются для откладки кода?

В чем заключаются преимущества и недостатки промисов по сравнению с колбеками?

В чем разница между атрибутом и свойством элемента?

Когда браузер загружает страницу, он разбирает HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов. Т.е. атрибут элемента указывается в разметке, а его свойство в DOM. Например, для тега «body» с атрибутом у DOM-объекта будет свойство body.id=«page».

Что такое политика общего происхождения (same-origin policy)?

Что делает void 0?

Оператор void вычисляет переданное выражение и возвращает undefined. Обычно, когда мы кликаем по ссылке, браузер загружает новую сраницу или перезагружает текущую. С помощью выражения «void(0)» можно этого избежать:

Перезагрузку страницы также можно предотвратить с помощью заглушки:

JavaScript — это компилируемый или интерпретируемый язык программирования?

Чувствителен ли JavaScript к регистру?

Связаны ли Java и JavaScript?

Что такое событие (event)?

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

Источник