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

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

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

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
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
Побитовые операторы

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

Поддерживаются следующие побитовые операторы:
- AND (и) - &
- OR (или) - |
- XOR (исключающее или) - ^
- NOT (не) - ~
- LEFT SHIFT (левый сдвиг) - <<
- RIGHT SHIFT (правый сдвиг) - >>
- ZERO-FILL RIGHT SHIFT (правый сдвиг с заполнением нулями) - >>>

#побитовые_операторы #основы
👍1
Точка с запятой

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

В JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

Код на картинке выше выведет 6, потому что
JavaScript не вставляет здесь точку с запятой. 
Интуитивно очевидно, что, если строка заканчивается знаком "+", значит, это «незавершённое выражение», поэтому точка с запятой не требуется. 

И в этом случае всё работает, как задумано.

#точка_с_запятой #основы
👍1
Решайте практические тесты из собеседований на нашем втором канале @tests_js
Квадратные скобки в объекте

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

На примере выше JavaScript видит, что мы обращаемся к свойству user.likes, а затем идёт непонятное слово birds. В итоге синтаксическая ошибка.

Точка требует, чтобы ключ был именован по правилам именования переменных. То есть не имел пробелов, не начинался с цифры и не содержал специальные символы, кроме $ и _.

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

#квадратные_скобки #объекты
👍1
Условный оператор „?“

Иногда нам нужно определить переменную в зависимости от условия.

Так называемый «условный» оператор «вопросительный знак» позволяет нам сделать это более коротким и простым способом.

Оператор представлен знаком вопроса ?. Его также называют «тернарный», так как этот оператор, единственный в своём роде, имеет три аргумента.

Сначала вычисляется условие: если оно истинно, тогда возвращается значение1, в противном случае – значение2.

#условный_опрератор #основы
👍2
Решайте практические тесты из собеседований на нашем втором канале @tests_js
Комментарии

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

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

Однострочные комментарии начинаются с двойной косой черты //.
Часть строки после // считается комментарием. Такой комментарий может как занимать строку целиком, так и находиться после инструкции.

Многострочные комментарии начинаются косой чертой со звёздочкой /* и заканчиваются звёздочкой с косой чертой */.
Содержимое комментария игнорируется, поэтому, если мы поместим код внутри /* … */, он не будет исполняться.

#коментарии #основы
👍2
alert

Так как браузер используется как демо-среда, необходимо знать функцию alert.
Эта функция показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».

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

alert принимает только один строковый аргумент!

#alert #функции
👍1
Синтаксис new Function

Существует ещё один вариант объявлять функции. Он используется крайне редко, но иногда другого решения не найти.

Функция создаётся с заданными аргументами arg1...argN и телом functionBody.

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

new Function позволяет превратить любую строку в функцию. Например, можно получить новую функцию с сервера и затем выполнить её.

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

#функции #new_function
👍1
Внутреннее устройство массива

Массив – это особый подвид объектов. 
Квадратные скобки, используемые для того, чтобы получить доступ к свойству arr[0] – это по сути обычный синтаксис доступа по ключу, как obj[key], где в роли obj у нас arr, а в качестве ключа – числовой индекс.

Массивы расширяют объекты, так как предусматривают специальные методы для работы с упорядоченными коллекциями данных, а также свойство length. 
Но в основе всё равно лежит объект.

Следует помнить, что в JavaScript существует 8 основных типов данных. 
Массив является объектом и, следовательно, ведёт себя как объект.

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

#массив #внутреннее_устройство_массива
👍3
Проверка isFinite и isNaN

Это специальные числовые значения:

 - Infinity — особенное численное значение, которое ведёт себя в точности как математическая бесконечность ∞.
 - NaN представляет ошибку.

Эти числовые значения принадлежат типу number, но они не являются «обычными» числами, поэтому есть функции для их проверки:

 - isNaN(value) преобразует значение в число и проверяет является ли оно NaN.
Нужна ли нам эта функция? Разве не можем ли мы просто сравнить === NaN? К сожалению, нет. 
Значение NaN уникально тем, что оно не является равным ни чему другому, даже самому себе.

 - isFinite(value) преобразует аргумент в число и возвращает true, если оно является обычным числом, т.е. не NaN/Infinity.

#isFinite #isNaN
👍1