Прокачивай свой технический английский без больших усилий, уделяя 5 минут в день!

На этом канале регулярно публикуют самые популярные слова и выражения из мира IT.

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

Подписывайся на @enforit и качай свой инглиш, пока компилируется проект👌

Прокачивай навыки JavaScript решая практические тесты!

На нашем втором канале JavaScript тесты каждый день выходят викторины на знание особенностей языка.

Подпишись, чтобы не потерять 👇

#javascript #тесты

У стрелочных функций нет «this»

Стрелочные функции особенные: у них нет своего «собственного» this. 
Если мы используем this внутри стрелочной функции, то его значение берётся из внешней «нормальной» функции.

Например, на картинке выше arrow() использует значение this из внешнего метода user.sayHi().

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

#this #стрелочные_функции

Set

Объект Set – это особый вид коллекции: «множество» значений (без ключей), где каждое значение может появляться только один раз.

Его основные методы это:

 - new Set(iterable) – создаёт Set, и если в качестве аргумента был предоставлен итерируемый объект (обычно это массив), то копирует его значения в новый Set.
 - set.add(value) – добавляет значение (если оно уже есть, то ничего не делает), возвращает тот же объект set.
 - set.delete(value) – удаляет значение, возвращает true, если value было в множестве на момент вызова, иначе false.
 - set.has(value) – возвращает true, если значение присутствует в множестве, иначе false.
 - set.clear() – удаляет все имеющиеся значения.
 - set.size – возвращает количество элементов в множестве.

Основная «изюминка» – это то, что при повторных вызовах set.add() с одним и тем же значением ничего не происходит, за счёт этого как раз и получается, что каждое значение появляется один раз.

#set #словари

Symbol.iterator

Symbol.iterator - специальный встроенный Symbol , который позволяет сделать объект итерируемым.

Например, у нас есть объект range, который представляет собой диапазон чисел. Чтобы сделать range итерируемым (и позволить for..of работать с ним), нам нужно добавить в объект метод с именем Symbol.iterator.

- Когда цикл for..of запускается, он вызывает этот метод один раз (или выдаёт ошибку, если метод не найден). Этот метод должен вернуть итератор – объект с методом next.
- Дальше for..of работает только с этим возвращённым объектом.
- Когда for..of хочет получить следующее значение, он вызывает метод next() этого объекта.
- Результат вызова next() должен иметь вид {done: Boolean, value: any}, где done=true означает, что итерация закончена, в противном случае value содержит очередное значение.

#перебираемые_объекты #symbol_iterator

Fetch

JavaScript может отправлять сетевые запросы на сервер и подгружать новую информацию по мере необходимости.

Например, мы можем использовать сетевой запрос, чтобы:

 - Отправить заказ
 - Загрузить информацию о пользователе
 - Запросить последние обновления с сервера
 - …и т.п.

Метод fetch() — современный и очень мощный, поэтому начнём с него. Он не поддерживается старыми (можно использовать полифил), но поддерживается всеми современными браузерами.

Базовый синтаксис:

 - url – URL для отправки запроса.
 - options – дополнительные параметры: метод, заголовки и так далее.

Без options это простой GET-запрос, скачивающий содержимое по адресу url.

#fetch #сетевые_запросы

Прокрутка

Встроенное свойство «length» содержит количество параметров функции в её объявлении.

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

Например:

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

Вот картинке выше функция для отображения текущей прокрутки.

#прокрутка #интерфейсные_события

Глобальный catch

Давайте представим, что произошла фатальная ошибка (программная или что-то ещё ужасное) снаружи try..catch, и скрипт упал.

Существует ли способ отреагировать на такие ситуации? 
Можно залогировать ошибку, показать что-то пользователю (обычно они не видят сообщение об ошибке) и т.д.

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

Синтаксис на картинке выше.

 - message
Сообщение об ошибке.
 - url
URL скрипта, в котором произошла ошибка.
 - line, col
Номера строки и столбца, в которых произошла ошибка.
 - error
Объект ошибки.

Роль глобального обработчика window.onerror обычно заключается не в восстановлении выполнения скрипта – это скорее всего невозможно в случае программной ошибки, а в отправке сообщения об ошибке разработчикам.

#глобальный_catch #обработка_ошибок

Что будет выведено в консоль?
#middle #arrays

FormData

FormData - это объект, представляющий данные HTML формы.

Если передать в конструктор элемент HTML-формы form, то создаваемый объект автоматически прочитает из неё поля.

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

Он будет соответствующим образом закодирован и отправлен с заголовком Content-Type: form/multipart.

То есть, для сервера это выглядит как обычная отправка формы.

P.S. на картинке выше пример отправки данных простой HTML формы с помощью fetch.

#formData #сетевые_запросы

WebSocket

Протокол WebSocket, описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером через постоянное соединение. Данные передаются по нему в обоих направлениях в виде «пакетов», без разрыва соединения и дополнительных HTTP-запросов.

WebSocket особенно хорош для сервисов, которые нуждаются в постоянном обмене данными, например онлайн игры, торговые площадки, работающие в реальном времени, и т.д.

В JavaScript WebSocket генерирует 4 события, с помощью которых и строится всё взаимодействие:
- open – соединение установлено;
- message – получены данные;
- error – ошибка;
- close – соединение закрыто.

#WebSocket #сетевые_запросы

Server Sent Events

Спецификация Server-Sent Events описывает встроенный класс EventSource, который позволяет поддерживать соединение с сервером и получать от него события.
Как и в случае с WebSocket, соединение постоянно.

Работа с потоком данных:
- Текст сообщения указывается после data:, пробел после двоеточия необязателен;
- Сообщения разделяются двойным переносом строки \n\n;
- Чтобы разделить сообщение на несколько строк, мы можем отправить несколько data: подряд (третье сообщение).

Про сравнение SSE с WS.
Протокол SSE одновременно похож на WebSocket, но также сильно отличается. Например, данные отправляются лишь с сервера на клиент и могут иметь только текстовой формат. Однако это не делает SSE ненужным, напротив, у него своя ниша.
Основное преимущество в простоте использования, что делает SSE более привлекательным для проектов, где вся мощь WS абсолютно не требуется.

#sse #сетевые_запросы

Long Polling (длинные опросы)

Длинные опросы – это самый простой способ поддерживать постоянное соединение с сервером, не используя при этом никаких специфических протоколов (типа WebSocket или Server Sent Events).
Его очень легко реализовать, и он хорошо подходит для многих задач.

Как это происходит:
- Запрос отправляется на сервер;
- Сервер не закрывает соединение, пока у него не возникнет сообщение для отсылки;
- Когда появляется сообщение – сервер отвечает на запрос, посылая его;
- Браузер немедленно делает новый запрос.

P.S. на картинке примерный код клиентской функции subscribe, которая реализует длинные опросы.

#LongPolling #сетевые_запросы

XMLHttpRequest

XMLHttpRequest – это встроенный в браузер объект, который даёт возможность делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на наличие слова «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML. Мы можем загружать/скачивать файлы, отслеживать прогресс и многое другое.

Алгоритм работы:
1) Создать XMLHttpRequest;
2) Инициализировать его;
3) Послать запрос;
4) Слушать события на xhr, чтобы получить ответ.

P.S. На сегодняшний день не обязательно использовать XMLHttpRequest, так как существует другой, более современный метод fetch.

#xhr #сетевые_запросы

Опциональная цепочка '?.'

Опциональная цепочка ?. — это безопасный способ доступа к свойствам вложенных объектов, даже если какое-либо из промежуточных свойств не существует.

Опциональная цепочка ?. останавливает вычисление и возвращает undefined, если часть перед ?. имеет значение undefined или null.

P.S. Эта возможность была добавлена в язык недавно. В старых браузерах может понадобиться полифил.

#опциональная_цепочка #основы

Копирование объектов

Одним из фундаментальных отличий объектов от примитивных типов данных является то, что они хранятся и копируются «по ссылке».

Примитивные типы: строки, числа, логические значения – присваиваются и копируются «по значению».

Переменная хранит не сам объект, а его «адрес в памяти», другими словами «ссылку» на него.

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

#object #основы

Наследование классов

Наследование extends пришло в JS с ES6 синтаксисом.

Ключевое слово extends работает, используя прототипы. Оно устанавливает Rabbit.prototype.[[Prototype]] в Animal.prototype. Так что если метод не найден в Rabbit.prototype, JavaScript берёт его из Animal.prototype.

#наследование #классы

Решайте практические тесты из собеседований на нашем втором канале @tests_js

Экспорт и импорт

С помощью ключевых слов import и export мы можем соответственно импортировать и экспортировать переменные, функции, классы и другие сущности языка.

На картинке показан пример экспорта и импорта простых функций из файла say.js в main.js.

#export #import #модули

Динамические импорты

Инструкции экспорта и импорта, которые мы рассматривали в предыдущем посте, называются «статическими». Синтаксис у них весьма простой и строгий.

Во-первых, мы не можем динамически задавать никакие из параметров import.
Путь к модулю должен быть строковым примитивом и не может быть вызовом функции. Вот так работать не будет:

Во-вторых, мы не можем делать импорт в зависимости от условий или в процессе выполнения.

Все эти проблемы решает выражение import(module).

Выражение import()

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

#динамический_импорт #модули