Работа с данными в JavaScript

В данной статье мы научимся работать с переменными в языке JavaScript. Научимся их создавать, изучим основные типы данных, преобразования и операторы.

Переменные

Во вводном уроке мы написали пару простых скриптов, например вывели приветствие в консоль, так же мы знаем о том что JavaScript позволяет производить вычисления, например, так:

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

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

Как раз для для этого в JavaScript существуют переменные и константы. Чтобы объявить переменную необходимо поставить ключевое слово let и затем через пробел написать ее имя.

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

Создание переменной в JavaScript

В данном примере мы создали переменную с именем sum и записали в нее результат сложения двух чисел используя оператор присваивания =.

Теперь можно использовать значение этой переменной, например, вывести его в консоль:

Комментарии

Во время написания кода может возникнуть необходимость что-то объяснить или оставить какие-то заметки. Для этого в JavaScript предусмотрены комментарии. Комментарий — это обычный текст, выделенный специальными символами.

Интерпретатор игнорирует комментарии, так что мы можем разместить в них любой текст. Также это может быть использовано чтобы временно исключить или как говорят “закомментировать” участок кода.

Комментарии бывают двух видов:

1. Однострочные, который начинаются с символа //.
2. Многострочные, начинаются с символа /* и заканчиваются символом */.

Примеры комментариев в JavaScript

Комментарии очень важны, они могут объяснить сложные участки кода или дать описание скрипта или метода. Но также важно не переусердствовать, не стоит объяснять то, что уже и так и описано в коде:

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

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

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

Точка с запятой

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

Например, если разместить несколько операций без переноса строки и не разделить их точкой с запятой то мы получим ошибку:

В случае наличия точки с запятой код отработает верно:

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

Инициализация

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

Инициализация — присваивание значения переменной сразу же в момент создания. Это экономит место, а так же необходимо для создания констант.

Константы

Константа — это переменная, значение которой не может быть изменено в дальнейшем. Такая переменная обязательно должна быть инициализирована сразу же в момент создания.

Константы могут пригодиться, если необходимо сохранить значение, которое не будет изменяться в дальнейшем. Они создаются аналогично переменным, но вместо let используется const:

Также помните, отсутствие инициализатора или попытка переопределить константу вызовет ошибку:

Множественное объявление

Имеется возможность объявить несколько переменных используя одно ключевое слово let или const:

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

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

Объявление переменных в стиле ES5

Ключевые слова let и const были добавлены в шестой версии языка. Ранее для объявления переменных использовалось ключевое слово var, которое было похоже на let, но имело ряд отличий. Аналогов ключевому слову const не было.

Основные отличия:
Современные переменные могут быть созданы только один раз, попытка создать несколько переменных с одним именем вызовет ошибку. Используя var мы можем создать сколько угодно переменных с одинаковыми именами.

Использование до объявления. К переменным, созданным с помощью let и const, нельзя обратиться до их создания. К переменным созданным с помощью var, можно обратиться до создания. Это вызвано так называем процессом “поднятия” (hoisting). До присваивания значения в переменной находится специальное значение — undefined.

Именование переменных

У каждой переменной должно быть имя. В примерах выше использовались простые имена переменных, например a или b. Такие имена подойдут только для небольших примеров, в реальных проектах переменные надо называть правильно и осмысленно.

Правила именования переменных:

1. Имя переменной (идентификатор) может состоять из любых букв английского алфавита, цифр, нижнего подчеркивания _, символа доллара $ и некоторых других символов Unicode.
2. Имя переменной не должно начинаться с цифры.
3. Имена переменных регистрозависимы, то есть Sum и sum это две разные переменные.
4. Некоторые идентификаторы уже используются языком. Они называются ключевыми словами и не могут быть использованы в именах переменных, например: if или for.
   Полный список ключевых слов.

Как правильно называть переменные:

Эти советы помогут называть переменные понятными и простыми именами. Некоторые из них являются субъективными, но все равно их стоит прочитать и обдумать:

1. Имя переменной должно быть существительным, которое правильно отображает её сущность.
2. Используйте camelCase в именах переменных.
3. Не используйте сокращение или аббревиатуры без необходимости. То что может казаться очевидным вам, может быть не понятно другому человеку. Может даже дойди до того, что программист сам через время не вспомнит что хранится в этой переменной.

Пример хороших и не слишком удачных имен переменных.

Переменные: заключение

Итак, переменные это именованные ячейки памяти, которые нужны чтобы хранить информацию. В следующем разделе мы рассмотрим какие именно виды информации существуют в JS.

Типы данных в JavaScript

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

В JavaScript 7 типов данных:

1. Число (number);
2. Строка (string);
3. Логический (boolean);
4. null;
5. undefined;
6. Объект (object);
7. Символ (symbol).

typeof

Оператор typeof позволяет получить тип переменной в виде строки:

В JavaScript существует странная ошибка, для null оператор возвращает 'object', хотя логично было бы получить значение 'null'.

Число (number)

Числа один из самых часто используемых типов данных в большинстве языков программирования. В отличие от некоторых других языков, в JavaScript нет отдельных типов данных для целых и дробных чисел.

Над числами можно производить арифметические операции (подробнее в разделе об операторах). Так же существует специальный объект Math, в котором есть многие математические функции для работы с числами (квадратный корень, степень, синус и т.д.). Его мы рассмотрим на следующих уроках.

Дробные числа в качестве разделителя используют точку, например 3.14 или 0.002. Для хранения чисел используется формат IEEE 754.

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

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

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

Специальные значения:
Так же существует ряд специальных числовых значений:

1. Бесконечность и минус бесконечность (infinity и -infinity). Бесконечности в javaScript могут получиться в результаты деления на 0, или если в результаты операции получается слишком большое или слишком маленькое число. Любые операции с бесконечностью дают в результате бесконечность.
2. Не число (NaN). Это значения получается в случае некорректных операций с числами, например умножение числа и строки или попытка разделить ноль на ноль. Любая операций с NaN в результате приведет к NaN. Также NaN единственное значение в JavaScript которое не равно самому себе.

Строка (string).

Строковый тип предназначен для хранения текстовых данных. Текст который вы сейчас читаете является строковым типом данных, как и весь остальной текст на данной странице.

В JavaScript нет отдельного типа для хранения конкретного символа, только тип string для хранения строк. Для представление строк используется Unicode.

Чтобы создать значение этого необходимо написать строку текста в одном из двух видов кавычек: "Hello, World" или 'Hello, World'. Эти два варианта полностью идентичны, вы можете использовать любой из них.

Стоит быть аккуратными со строками, которые содержат вложенные кавычки. Если мы напишем строку вида 'My name's Jenya', мы получим ошибку, так как JavaScript пример эту часть 'My name' за строку, и не поймет что делать с остальной частью выражения.

Чтобы избежать этого необходимо использовать разные виды кавычек, например, так:

Экранирование символов
Еще одним способом избежать этой проблемы будет экранировать символ кавычки. Необходимо поставить символ обратной косой строки \ перед кавычкой:

Существуют другие полезные специальные символы, например перевод строки \n, подробнее о ни вы можете почитать тут.

Индексация строк
Можно обратиться к конкретному символу в строке используя квадратные скобки [] и индекс (порядковый номер символа). Индексация строк (как и массивов) начинается с нуля. Результатом этой операции будет подстрока из одного символа.

Логический (boolean)

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

True означает истину или ответ “Да”.

False означает ложь или ответ “Нет”.

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

Небольшой пример:

undefined

Что храниться в переменной в случае, если ее значение не задано? На случай обращение к такой переменной в JavaScript существует специальное значение undefined (не определено).

Данный тип выражен всего одним значением с таким же названием. Математические с undefined приведут к NaN.

Так же при обращение к несуществующему индексу в строке или массиве или несуществующему ключу в объекте (рассмотрим далее) мы так же получим undefined:

null

Этот тип данных очень похож на undefined, но имеет другое предназначение. Если undefined означает что значение не определено или не существует, то null означает что значение определено, но еще неизвестно.

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

Также стоит заметить, что в математических операциях null превращается в 0, и не превращает результат в NaN, но злоупотреблять этим не стоит.

Символ (symbol)

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

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

Подробнее о символах вы можете прочитать в этой статье.

Объект (object)

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

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

Вторым подходом было бы создать один составной объект, который хранит в себе информацию о пользователе:

Особенности синтаксиса объектов:

1. Для создания объекта используются фигурные скобки { }.
2. Объект представляет собой пары ключ - значение, разделенные двоеточием.
3. Пары разделяются через запятую, после последней пары запятая необязательна.
4. Значением может являться любой тип, в том числе другой объект.
5. Ключом может выступать любое значение (в отличие от имени переменной), например ключ может быть числом, ключевым словом или состоять из двух слов:

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

Также есть второй способ получить значение из объекта, используя квадратные скобки []. Ключ необходимо разместить внутри скобок. Он может пригодиться в таких ситуациях:

1. Имя ключа находиться в переменной.
2. Ключ состоит из несколько слов.
3. Ключ является числом.

Этот способ очень важен и часто используется в разработке.

В случае обращения по несуществующему ключу получаем значение undefined.

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

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

В отличие от этого, строки являются неизменными, то есть, в строках мы не сможем взять и изменить отдельный символ.

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

Стоит быть осторожным копируя объекты. Разберем такую ситуацию, у нас есть некоторая переменная a в которой находится объект. Мы создаем переменную с именем b и присваиваем ей переменную a.

Мы ожидаем получить в b копию объекта a, но этого не происходит. Вместо этого обе переменные получают ссылку на один объект. И любая модификация вызовет изменения в обеих переменных:

Изменения в b также изменили и a, так как обе переменные ссылаются на один объект.

На собеседованиях часто задаются вопросы на подобную тематику. Чтобы избежать этого поведения, необходимо скопировать объект, например так:

Копирование объекта с помощью Object.assign

Object.assign создает новый объект из полученных объектов. Как именно это работает вы поймете позже, пока что главное понимать концепцию.

Массив (Array)

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

Для объявление используются квадратные скобки [ ], внутри которых элементы массива перечисляются через запятую, обращение к элементу массива происходит через индекс:

Массивы подходят, если элементы представляют собой однотипную информацию и важен сам порядок (например список пользователей или статей).

С помощью свойства length можно получить количество элементов в массиве. Также его можно изменить увеличив или уменьшив длину массива. В случае увеличения добавятся пустые элементы (undefined).

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

Типы данных: заключение

Мы рассмотрели типы данных языка JavaScript, их особенности и применение. У каждого типа данных существует множество встроенных методов облегчающих работу с ними, вы узнаете о них из следующих глав.

Подробнее почитать о типах данных вы можете в разделе “структуры данных” на learn.javascript.ru.

Преобразования типов

Предположим у нас есть следующий код:

Мы пытаемся сложить данные разного типа, что должно получиться в результате такой операции? В некоторых языках подобная операция вызвала бы ошибку, но в JavaScript мы получаем следующий результат:

Что произошло? Число 20 превратилось в строку '20', и дальше произошла конкатенация двух строк. Такое превращение называется преобразованием типов.

Преобразование типа — изменение типа переменной.

В JavaScript есть 3 типа преобразования:

1. Строковое
2. Численное
3. Логическое

Строковое преобразование

Строковое преобразование происходит при конкатенации (сложении со строкой) или вызове функций, которые выводят текст на экран, например alert или console.log.

Преобразование происходит ожидаемым образом, значение становится строкой, например: число 20 станет строкой '20', а логическое значение true строкой 'true'.

Также значение можно явно преобразовать с помощью функции String.

Численное преобразование

Преобразование в число происходит при работе с математическими функциями, сравнениях (например больше > или меньше <). Также можно преобразовать значение в число с помощью функции N.

Преобразование происходит по следующим правилам:

1. null преобразовывается в 0.
2. undefined преобразовывается в NaN.
3. true / false преобразовываются в 1 / 0.
4. Строка преобразовывается к числу если состоит только из цифр и пробелов по краям, в случае наличия других символов получаем NaN:

Логическое преобразование

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

Преобразование происходит по двум простым правилам:

1. null, undefined, NaN, 0, '' (пустая строка) становятся false.
2. Остальное — true.

Также преобразование может быть вызвано функцией Boolean:

Преобразования типов: заключение

Существуют 3 типа преобразования, которые вызываются в различных ситуациях и имеют соответствующие функции:

1. Численное (Number).
2. Строковое (String).
3. Логическое (Boolean).

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

Основные операторы

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

Вы уже сталкивались с некоторыми операторами в жизни и ранее в этом уроке, например с оператором сложения +.

Рассмотрим подробнее:

В данном примере мы видим оператор +, который применяется к числам 2 и 3, сами числа являются операндами.

Операнд — то над чем выполняется операция.

Операторы можно поделить на бинарные и унарные:

Бинарный оператор выполняется с двумя операндами, например:

Унарный оператор выполняется лишь с одним операндом:

1) Унарный минус 2) Логическое НЕ

Оператор присваивания

Мы уже использовали этот оператор ранее (=), он позволяет присвоить переменной новое значение. Данный оператор обладает одним из самых низких приоритетов, этот означает что оператор будет выполнен в последнюю очередь.

Например в выражении ниже, сначала будет выполнено сложение и лишь затем присваивание результата в переменную:

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

JavaScript поддерживает основные арифметические операции:

• Сложение +
• Вычитание -
• Умножение *
• Деление /
• Возведение в степень **
• Остаток от деления %

Большинство этих операций знакомы нам еще со школы. Они выполняются в математическом порядке:

1. Выполнение идет слева направо.
2. Умножение имеет наивысший приоритет.
3. Приоритет деления выше сложения и вычитания.
4. Скобки позволяют изменить порядок выполнения операций.

Для всех операторов, кроме сложения +, вызывается численное преобразование операндов. Если один из операндов бинарного + является строкой, то выполняется строковое преобразование операндов и конкатенация (сложение строк):

Остаток от деления
Данная операция находит целочисленный остаток от деления. В примере выше остаток от деления 13 на 6 равен 1. Это означает следующее: число 6 померещатся в число 13 ровно 2 раза, а в остатке имеем 1.

Также эта операция называется делением по модулю. Деление по модулю на 2 позволяет понять, является ли число четным, так как только только в случае четных чисел в результате этой операции будет получен 0.

Сокращенные операции

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

Разберем данный код подробнее:

1. В переменной num находится число 10.
2. Складываем значение num с 1.
3. Результат записываем обратно в num.

Специально для таких операций были придуманы сокращенные формы, объединяющее операцию присваивания с другим оператором:

Данные операции полностью аналогичны своим полным формам и сделаны просто для удобства.

Инкремент и декремент
В программировании часто нужны операции увеличения или уменьшения на единицу. Для этих целей существует специальные унарные операторы:

• Инкремент ++ — увеличение на единицу
• Декремент --— уменьшение на единицу

Оба оператора имеют две формы:

1. Постфиксная форма.
2. Префиксная форма.

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

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

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

Операторы сравнения

Следующая группа бинарных операторов используется для сравнения значений, чаще всего числовых и, иногда, строковых. Все операторы этой группы возвращают в результате значения логического типа, true или false. Например: равно или не равно, меньше или не меньше.

Равенство ==
Для сравнения двух величин в JS присутствует оператор равенства ==, он возвращает true если значения равны и false в обратном случае. Перед сравнением значения будут приведены к одному типу:

В данном случае строка '3' равна числу 3 так как строка была преобразована к числу 3, и мы получили одинаковые значения слева и справа.

Не равенство !=
Является противоположностью оператора равенства, проверяет не равны ли значения:

Например, число 2 не равно числу 3 поэтому оператор возвращает true.

Строгое равенство === и строгое неравенство !==
Преобразования операндов в сравнениях могут привести к неожиданным и ненужным результатам. Предположим нас не устраивает ситуация что число 3 и строка '3' равны. В таком случае необходимо использовать строгое равенство.

Строгое равенство не выполняет преобразование и сначала сравнивает тип переменных, и в случае не совпадения сразу же возвращает false:

Оператор строго неравенства работает аналогичным образом.

Более подробно о преобразованиях во время сравнений вы можете почитать в этой статье на MDN. Я рекомендую всегда использовать === и !==, чтобы избежать неожиданного поведения и сравнивать только значения одинакового типа.

Больше, меньше и прочее
Помимо операторов равенства и неравенства в языке присутствуют следующие операторы:

• Больше >
• Меньше <
• Больше или равно >=
• Меньше или равно <=

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

Желательно использовать эти операции для сравнения чисел с числами или строк со строками. В остальных случаях вы получите преобразования и не совсем очевидное поведение.

Логические операторы

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

Для сложных логических операций в JavaScript существуют специальные логические операторы:

• Логические И &&
• Логические ИЛИ ||
• Логическое НЕ !
• Исключающее ИЛИ ^

Логическое И
Этот оператор проверяет выполняются ли одновременно несколько условий.

Логическое ИЛИ
Этот оператор проверяет выполняется ли хотя бы одно из условий

Логическое НЕ
Этот оператор инвертирует результат логической операции, меняет true на false и наоборот.

Исключающее ИЛИ
Этот оператор проверяет выполняется ли хотя бы одно из условий, но не оба сразу.

Подробнее работу операторов вы можете рассмотреть на примере, в реальной программе вместо значений true или false будут находиться другие логические операции, операции сравнения или переменные с типом boolean:

Результаты логических операций

Работа с логическими операциями и принципы их работы изучает дискретная математика. Это одно из самых важных направление математики для программиста.

Операторы: заключение

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

Что дальше?

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

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

Автор — Yevhen Diachenko. Front End Engineer at Vimeo
Мой сайт: https://yevhen-diachenko.com/
Редакторы — Artur Parkhisenko, Kate Mikulyanec

Создано для Zengineers Community