Квадратные скобки в объекте

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

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

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

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

#квадратные_скобки #объекты

Условный оператор „?“

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

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

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

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

#условный_опрератор #основы

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

Комментарии

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

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

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

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

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

alert

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

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

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

#alert #функции

Синтаксис new Function

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

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

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

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

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

#функции #new_function

Внутреннее устройство массива

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

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

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

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

#массив #внутреннее_устройство_массива

Проверка isFinite и isNaN

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

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

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

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

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

#isFinite #isNaN

Флаги свойств

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

writable – если true, свойство можно изменить, иначе оно только для чтения.
enumerable – если true, свойство перечисляется в циклах, в противном случае циклы его игнорируют.
configurable – если true, свойство можно удалить, а эти атрибуты можно изменять, иначе этого делать нельзя.

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

Метод Object.getOwnPropertyDescriptor позволяет получить полную информацию о свойстве.
Синтаксис можете увидеть на картинке выше.

 - obj
Объект, из которого мы получаем информацию.
 - propertyName
Имя свойства.

Возвращаемое значение – это объект, так называемый «дескриптор свойства»: он содержит значение свойства и все его флаги.

#флаги_свойств #объекты

Рекурсия

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

В процессе выполнения задачи в теле функции могут быть вызваны другие функции для выполнения подзадач. Частный случай подвызова – когда функция вызывает сама себя. Это как раз и называется рекурсией.

В качестве примера возьмем функцию pow(x, n), которая возводит x в натуральную степень n. 
Иначе говоря, умножает x на само себя n раз.

На картинке выше когда функция pow(x, n) вызывается, исполнение делится на две ветви:

 - Если n == 1, тогда всё просто. Эта ветвь называется базой рекурсии, потому что сразу же приводит к очевидному результату: pow(x, 1) равно x.

 - Мы можем представить pow(x, n) в виде: x * pow(x, n - 1).

Эта ветвь – шаг рекурсии: мы сводим задачу к более простому действию (умножение на x) и более простой аналогичной задаче (pow с меньшим n).

Функция pow рекурсивно вызывает саму себя до n == 1.

#рекурсия #функции

innerHTML: содержимое элемента

Свойство innerHTML позволяет получить HTML-содержимое элемента в виде строки.

Мы также можем изменять его. Это один из самых мощных способов менять содержимое на странице.

На картинке выше содержимое document.body, скрипт полностью заменяет его.

#dom #браузер

Кавычки

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

Одинарные и двойные кавычки работают, по сути, одинаково, а если использовать обратные кавычки, то в такую строку мы сможем вставлять произвольные выражения, обернув их в ${…}.

Ещё одно преимущество обратных кавычек — они могут занимать более одной строки, как на картинке выше.

Одинарные и двойные кавычки в языке с незапамятных времён: тогда потребность в многострочных строках не учитывалась. Что касается обратных кавычек, они появились существенно позже, и поэтому они гибче.

#кавычки #строки

Function Expression

Функция в JavaScript – это не магическая языковая структура, а особого типа значение.
Синтаксис, который часто используется называется Function Declaration (Объявление Функции).

Существует ещё один синтаксис создания функций, который называется Function Expression (Функциональное Выражение).

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

Смысл обоих примеров кода одинаков: "создать функцию и поместить её значение в переменную sayHi"

#функции #function_expression

Браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. 
Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий:

События мыши:
 - click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
 - contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
 - mouseover / mouseout – когда мышь наводится на / покидает элемент.
 - mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
 - mousemove – при движении мыши.

События на элементах управления:
 - submit – пользователь отправил форму <form>.
 - focus – пользователь фокусируется на элементе, например нажимает на <input>.

Клавиатурные события:
 - keydown и keyup – когда пользователь нажимает / отпускает клавишу.

#браузерные_события #DOM

Глобальный объект

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

В браузере он называется window, в Node.js — global, в другой среде исполнения может называться иначе.
Недавно globalThis был добавлен в язык как стандартизированное имя для глобального объекта, которое должно поддерживаться в любом окружении. 

Ко всем свойствам глобального объекта можно обращаться напрямую.
В браузере глобальные функции и переменные, объявленные с помощью var (не let/const!), становятся свойствами глобального объекта.

#глобальный_объект #window

Имена переменных

В JavaScript есть два ограничения, касающиеся имён переменных:

 - Имя переменной должно содержать только буквы, цифры или символы $ и _.
 - Первый символ не должен быть цифрой.

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

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

Важно помнить!!! Регистр имеет значение. Переменные с именами apple и AppLE – это две разные переменные.

#имена_переменных #основы

new.target

Используя специальное свойство new.target внутри функции, мы можем проверить, вызвана ли функция при помощи оператора new или без него.

В случае, если функция вызвана при помощи new, то в new.target будет сама функция, в противном случае undefined.

Это можно использовать, чтобы отличить обычный вызов от вызова «в режиме конструктора».

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

#new_target #объекты

DOM-дерево

Основой HTML-документа являются теги.

В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.

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

Например, document.body – объект для тега <body>.

Если запустить код на картинке выше, то <body> станет красным на 3 секунды:

#DOM #документ

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

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

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

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

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

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

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

#javascript #тесты

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

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

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

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

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