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
Несколько операторов "?"

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

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

#условное_ветвление #условный_оператор_?
👍2
Цикл «do…while»

Проверку условия можно разместить под телом цикла, используя специальный синтаксис do..while

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

#Циклы_while_for #do_while
👍1
Преобразование типов

Чаще всего операторы и функции автоматически приводят переданные им значения к нужному типу.
Например, alert автоматически преобразует любое значение к строке. Математические операторы преобразуют значения к числам.

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

Примеры преобразование:

Строковое преобразование - String(value)

Численное преобразование - Number(value)

Логическое преобразование - Boolean(value)

#преобразование_типов #типы_данных
👍1
Булевый (логический) тип

Булевый тип (boolean) может принимать только два значения: true (истина) и false (ложь).

Такой тип, как правило, используется для хранения значений да/нет: true значит «да, правильно», а false значит «нет, не правильно».

#boolean #типы_данных
👍2
Var вместо let

В старых скриптах вы также можете найти другое ключевое слово: var вместо let:

Ключевое слово var – почти то же самое, что и let. Оно объявляет переменную, но немного по-другому, «устаревшим» способом.

#var #переменные
👍1
Дорогие подписчики! Сколько постов в неделю вы бы хотели видеть на канале?
Anonymous Poll
24%
3 поста в неделю (через день)
21%
5 постов в неделю (кроме выходных)
55%
Каждый день 😈
👍1
Примитивные и ссылочные типы данных

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

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

А при копирование объекта, у нас создается копия ссылки, сам же объект не дублируется.

#объекты #типы_данных
👍1
Методы массивов

Массивы предоставляют множество методов для работы с ними.

Добавление элемента в конец массива - push('item')
Удаление последнего элемента массива - pop()
Удаление первого элемента массива - shift()
Добавление элемента в начало массива - unshift('item')
Поиск номера элемента в массиве - indexOf('item')
Удаление элемента с определённым индексом - splice(pos, 1)
Создание копии массива - slice()

#массив #array
👍1
Класс

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

На картинке выше вы можете увидеть синтаксис class в JavaScript

Используйте вызов new MyClass() для создания нового объекта со всеми перечисленными методами.

#сlass #ООП
👍1
Каррирование

Каррирование – продвинутая техника для работы с функциями.
Каррирование – это трансформация функций таким образом, чтобы они принимали аргументы не как f(a, b, c), а как f(a)(b)(c).

Каррирование не вызывает функцию. Оно просто трансформирует её.

Если посмотреть на картинку выше можете увидеть, что каррирование это обёртка над функцией. Другими словами, curry(f) для функции f(a, b) трансформирует её в f(a)(b).

#разное #каррирование
👍3
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