JavaScript заметки
8.56K subscribers
2.75K photos
4 videos
1.27K links
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.

Можно почитать пока компилируется проект :)

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
confirm

В браузерной обёртке над нативным JS есть ряд функций, среди которых confirm.

Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.

Результат – true, если нажата кнопка OK. В других случаях – false.

#confirm #функции
👍1
Создание объектов через "new"

Обычный синтаксис {...} позволяет создать только один объект.
Но зачастую нам нужно создать множество однотипных объектов.
Это можно сделать при помощи функции-конструктора и оператора "new".

Функции-конструкторы являются обычными функциями. Но есть два соглашения:
- Имя функции-конструктора должно начинаться с большой буквы.
- Функция-конструктор должна вызываться при помощи оператора "new".

Когда функция вызывается как new User(...), происходит следующее:
- Создаётся новый пустой объект, и он присваивается this.
- Выполняется код функции. Обычно он модифицирует this, добавляет туда новые свойства.
- Возвращается значение this.

#объекты #new
👍2
Оператор объединения с null '??'

Оператор объединения с null представляет собой два вопросительных знака ??.

Результат выражения a ?? b будет следующим:

 - a, если значение a определено,
 - b, если значение a не определено.

То есть оператор ?? возвращает первый аргумент, если он не null/undefined, иначе второй.

Как правило, оператор ?? нужен для того, чтобы задать значение по умолчанию для потенциально неопределённой переменной.

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

#Оператор_объединения #undefined
👍4
setTimeout

Мы можем вызвать функцию не в данный момент, а позже, через заданный интервал времени. Это называется «планирование вызова».

setTimeout позволяет вызвать функцию один раз через определённый интервал времени.

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

Параметры:
 - func|code
Функция или строка кода для выполнения. Обычно это функция. По историческим причинам можно передать и строку кода, но это не рекомендуется.
 - delay
Задержка перед запуском в миллисекундах (1000 мс = 1 с). Значение по умолчанию – 0.
 - arg1, arg2
Аргументы, передаваемые в функцию (не поддерживается в IE9-)

#setTimeout #планирование
👍1
Прерывание цикла «break»

Обычно цикл завершается при вычислении условия в false.

Но мы можем выйти из цикла в любой момент с помощью специальной директивы break.

Например, на картинке выше код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем – выдаёт.

Директива break в строке (*) полностью прекращает выполнение цикла и передаёт управление на строку за его телом, то есть на alert.

Вообще, сочетание «бесконечный цикл + break» – отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале или конце цикла, а посередине.

#break #циклы
👍1
Значение «undefined»

Специальное значение undefined стоит особняком. Оно формирует тип из самого себя так же, как и null.

Оно означает, что «значение не было присвоено».

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

Технически мы можем присвоить значение undefined любой переменной, но так делать не рекомендуется. 
Обычно null используется для присвоения переменной «пустого» или «неизвестного» значения, а undefined – для проверок, была ли переменная назначена.

#undefined #типы_данных
👍1
Генераторы

Обычные функции возвращают только одно-единственное значение (или ничего).

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

Для объявления генератора используется специальная синтаксическая конструкция: function*, которая называется «функция-генератор».
При вызове функции-генератор возвращается специальный объект, так называемый «генератор», для управления её выполнением.

Основным методом генератора является next(). При вызове он запускает выполнение кода до ближайшей инструкции yield <значение>. 
По достижении yield выполнение функции приостанавливается, а соответствующее значение – возвращается во внешний код.

#генераторы #итерация
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Прокачивай свой технический английский без больших усилий, уделяя 5 минут в день!

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

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

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

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

Но если return всё же есть, то применяется простое правило:

При вызове return с объектом, будет возвращён объект, а не this.
При вызове return с примитивным значением, примитивное значение будет отброшено.
Другими словами, return с объектом возвращает объект, в любом другом случае конструктор вернёт this.

На картинке выше return возвращает объект вместо this.

#return #объекты
👍1
Сборка мусора

Управление памятью в JavaScript выполняется автоматически и незаметно.
Мы создаём примитивы, объекты, функции… Всё это занимает память.

Основной концепцией управления памятью в JavaScript является принцип достижимости.
Если упростить, то «достижимые» значения – это те, которые доступны или используются. Они гарантированно находятся в памяти.

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

Глобальная переменная user ссылается на объект {name: "John"}.
В свойстве "name" объекта John хранится примитив.
Если перезаписать значение user, то ссылка потеряется: user = null;

Теперь объект John становится недостижимым. К нему нет доступа, на него нет ссылок. Сборщик мусора удалит эти данные и освободит память.

#сборка_мусора #основы
👍1
Операторы сравнения

Многие операторы сравнения известны нам из математики.

В JavaScript они записываются так:

 - Больше/меньше: a > b, a < b.
 - Больше/меньше или равно: a >= b, a <= b.
 - Равно: a == b. Обратите внимание, для сравнения используется двойной знак равенства ==. Один знак равенства a = b означал бы присваивание.
 - Не равно. В математике обозначается символом ≠, но в JavaScript записывается как a != b.

Результат сравнения имеет логический тип
Все операторы сравнения возвращают значение логического типа:

 - true – означает «да», «верно», «истина».
 - false – означает «нет», «неверно», «ложь».

#операторы_сравнения #основы
👍1
Forwarded from JavaScript тесты
Что выведет код?
Больше тестов Вы найдёте на нашем втором канале @tests_js
Подписывайся, чтобы не потерять 🔥
Потеря «this»

При передаче методов объекта в качестве колбэков, например для setTimeout, возникает известная проблема – потеря this.
Как только метод передаётся отдельно от объекта – this теряется.

На картинке выше, При запуске этого кода мы видим, что вызов this.firstName возвращает не «Вася», а undefined!

Это произошло потому, что setTimeout получил функцию sayHi отдельно от объекта user (именно здесь функция и потеряла контекст).

Метод setTimeout в браузере имеет особенность: он устанавливает this=window для вызова функции. 
Таким образом, для this.firstName он пытается получить window.firstName, которого не существует.
В других подобных случаях this обычно просто становится undefined.

#потеря_this #функции
👍1
Логические операторы

В JavaScript есть три логических оператора.

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

Давайте рассмотрим их:

 - || (ИЛИ)
Оператор логического ИЛИ возвращает истину когда хотя бы один из операндов является истинным.

 - && (И)
Оператор логического И возвращает истину если все операнды являются истинной.

 - ! (НЕ)
Оператор принимает один аргумент и выполняет следующие действия:
1)Сначала приводит аргумент к логическому типу true/false.
2)Затем возвращает противоположное значение.

Приоритет НЕ ! является наивысшим из всех логических операторов, поэтому он всегда выполняется первым, перед && или ||.

#логические_операторы #основы
👍3
Решайте практические тесты из собеседований на нашем втором канале @tests_js
Тип данных Symbol

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

«Символ» представляет собой уникальный идентификатор.
Создаются новые символы с помощью функции Symbol():
При создании символу можно дать описание (также называемое имя), в основном использующееся для отладки кода.

Символы гарантированно уникальны. Даже если мы создадим множество символов с одинаковым описанием, это всё равно будут разные символы. 
Описание – это просто метка, которая ни на что не влияет.

Символы особенные они не преобразуются автоматически в строку.
Cтроки и символы – принципиально разные типы данных и не должны неконтролируемо преобразовываться друг в друга.

#Symbol #типы_данных
👍2
Функции

Зачастую нам надо повторять одно и то же действие во многих частях программы.

Чтобы не повторять один и тот же код во многих местах, придуманы функции. 
Функции являются основными «строительными блоками» программы.

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

Вначале идёт ключевое слово function, после него имя функции, затем список параметров в круглых скобках через запятую (в вышеприведённом примере он пустой) и, наконец, код функции, также называемый «телом функции», внутри фигурных скобок.

Наша новая функция может быть вызвана по её имени: showMessage().

#функции #function
👍1
Решайте практические тесты из собеседований на нашем втором канале @tests_js
prompt

Так как браузер используется как демо-среда, необходимо знать функцию prompt.

Функция prompt принимает два аргумента:
 - title
Текст для отображения в окне.
 - default
Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.

Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной result
Пользователь также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc. 
В этом случае значением result станет null.

#promt #фуекции
👍2