Переменные
Очень часто в программах необходимо иметь возможность отслеживать какие-либо значения, поскольку в ходе выполнения программы, над ними совершаются различные операции и эти значения изменяются. Для отслеживания значений в программе для них выделяется определенное место в памяти, которое можно представить в виде контейнеров. Этим контейнерам присваивается идентификатор, то есть имя, по которому впоследствии можно будет найти контейнер с нужным нам значением.
Переменные в программировании — это и есть те самые контейнеры, внутри которых вы можете хранить необходимые значения. Важно понимать, что переменные не являются самими значениями, они лишь предоставляют для них место. Есть несколько ключевых слов, для объявления переменных: var , let и const .
У переменных, объявленных с var , let или const , есть своя специфика использования, о которой будет рассказываться далее в течение курса. А также у переменных, объявленных через var , есть некоторые неочевидные особенности, незнание которых, может негативно сказываться на разработке и поддержке кода. Поэтому с выходом стандарта ES6, где появились новые ключевые слова let и const , объявление через var используется всё меньше и можно сказать устаревает. Но знать об особенностях и побочных эффектах var переменных очень важно.
Для объявления переменной используется ключевое слово и следом имя, которым вы захотите ее назвать:
var myName; let age;
Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчеркивания.
После объявления переменной, вы можете присвоить ей значение:
myName = "Иван"; age = 30;
Или же вы можете сделать обе эти операции на одной и той же строке:
var myName = "Иван"; let age = 30;
Причем, такое присваивание нужного значения, сразу при объявлении переменной, является обязательным при объявлении переменных через ключевое слово const .
const height = 180;
Ключевое слово const создаёт константу — переменную, значение которой не может быть переопределено. Поэтому, попытка объявить константу, не присвоив ей при этом значение (другими словами — без её инициализации), вызовет синтаксическую ошибку:
const height; > Uncaught SyntaxError: Missing initializer in const declaration
Имя переменной — это её идентификатор, по которому её можно найти. Вы можете получить значение, просто вызвав переменную по имени:
myName; age; height;
Если вы запросите значение переменной, которую объявили, но не присвоили ей никакого значения, то в ответе вам придёт undefined :
var x; console.log(x); > undefined
undefined — это особый тип данных в javascript, который выражает, что “значение не определено” (“не присвоено”).
После установки значения переменной, объявленной через var и let , вы можете изменить его позже:
var myName = "Иван"; myName = "Ваня"; let age = 30; age = 31;
Значение переменной, которую вы объявили через const , переопределить уже нельзя.
const height = 180; height = 200; > Uncaught TypeError: Assignment to constant variable.
Так как это ключевое слово подразумевает объявление константы — переменной, значение которой постоянно, такая попытка переопределить её значение вызовет ошибку TypeError в консоли. В следующих частях курса будет показано, что само значение константы, в действительности, может меняться и это зависит от типа данных, которые в ней хранятся.
JavaScript — это язык со слабой типизацией (другое название — динамическая типизация), поэтому переменные могут содержать абсолютно разные типы данных, например, строки, числа, объекты, функции и другие типы, которые будут рассматриваться в следующих частях курса. Здесь важно еще раз подчеркнуть, что переменная — это поименованная область памяти и в ней могут храниться различные типы значений.

В отличие от некоторых других языков программирования со статической типизацией, например таких, как C++, C#, Java, в JavaScript вам не требуется как-то явно указывать тип данных для переменных. Потому, что переменная связывается с типом в момент присваивания значения, а не в момент объявления переменной.
let age = 35; age = "Тридцать пять";
Переменная age начинает свой жизненный цикл с хранения числа 35 , а затем хранит строку. А потом, в какой-то момент, ей можно присвоить значение с любым другим типом.
В любом случае, переменная age хранит текущее значение, которое меняется по ходу выполнения программы. Это иллюстрирует первичную цель переменных: хранение текущего состояния программы, которое может изменяться по ходу её выполнения.
Если значения переменных var и let могут меняться в ходе выполнения программы, то переменные const — предназначены для хранения постоянных значений. Часто бывает нужно задать определенные значения в программе, которые впоследствии никак не будут меняться в течение её работы, а только использоваться для получения самих данных. То есть, другими словами, необходимо задать константы и для этой цели тоже используются переменные.
До выхода стандарта ES6 в 2015 году, для объявления констант использовалось всё то же ключевое слово var , только имя этой константы записывалось большими буквами, с подчеркиваниями _ между словами, тем самым предупреждая других разработчиков или себя в будущем, что это константа и менять её дальше в коде нельзя, например:
var PI = 3.14; var radius = 10; var circle = 2 * PI * radius; var TAX_RATE = 0.13; var salary = 1000 * TAX_RATE;
Хоть это объявление заглавными буквами и давало понять, что эта переменная — константа, но никак не защищало переменную от самих изменений в дальнейшем и вся надежда была на сознательность разработчика, который увидев, что это константа, не будет её в коде изменять. Сейчас же, для объявления констант используется ключевое слово const .
const pi = 3.14; var radius = 10; var circle = 2 * pi * radius; const taxRate = 0.13; var salary = 1000 * taxRate;
Объявление переменных через const предотвращает случайное изменение, где-либо после начальной установки, значения. И как было показано ранее, попытка присвоить новое значение переменным taxRate или pi после их объявления, будет отвергнуто и вызовет ошибку TypeError .
Общие принципы выбора имен переменных
В этом разделе представлены основные принципы именования переменных из книги “Совершенный код” Стива Макконнела.
Важнейший принцип именования переменных состоит в том, что имя должно полно и точно описывать сущность, представляемую переменной. Один эффективный способ выбора хорошего имени предполагает формулирование сути переменной в словах. Оптимальным именем переменной часто оказывается само это высказывание. Благодаря отсутствию загадочных сокращений оно удобочитаемо; к тому же оно однозначно. Так как оно является полным описанием сущности, его нельзя спутать с чем-либо другим. Наконец, такое имя легко запомнить потому, что оно похоже на исходную концепцию.
Переменную, представляющую число членов команды, можно было бы назвать numTeamMembers . Переменную, представляющую число мест на стадионе, — numSeatsInStadium . Для хранения максимального числа очков, набранных спортсменами какой-то страны в современной Олимпиаде, можно было бы создать переменную teamPointsMax . Переменную, определяющую текущую процентную ставку, лучше было бы назвать rate или interestRate , а не r или x .
Обратите внимание на две характеристики этих имен. Во-первых, их легко расшифровать. Фактически их не нужно расшифровывать вообще: их можно просто прочитать. Ну, а во-вторых, длина имени должна быть оптимальна для передачи сути переменной, но при этом не должна быть слишком велика, чтобы сохранять практичность её использования.
Несколько примеров удачных и неудачных имен переменных:
| суть переменной | адекватное описание | неадекватное описание |
|---|---|---|
| Сумма, на которую на данный момент выписаны чеки | runningTotal, checkTotal | written, ct, checks, CHKTTL, x, x1, x2 |
| Скорость поезда | velocity, trainVelocity, velocityInMph | velt, v, tv, x, x1, x2, train |
| Текущая дата | currentDate, todaysDat | cd, current, c, x, x1, x2, date |
Имена currentDate и todaysDate — хорошие имена, потому что полно и точно описывают идею «текущей даты». Фактически они составлены из слов с очевидным значением. Программисты иногда упускают из виду обычные слова, которые порой приводят к самому простому решению. Имена cd и c неудачны потому, что слишком коротки и «неописательны». Имя current тоже неудачно: оно не говорит, что именно является «текущим». Имя date кажется хорошим, но в итоге оно оказывается плохим, потому что мы имеем в виду не любую дату, а текущую; само по себе имя date об этом не говорит. Имена x , x1 и x2 заведомо неудачны: x традиционно представляет неизвестное количество чего-либо, и, если вы не хотите, чтобы ваши переменные были неизвестными величинами, подумайте о выборе других имен.
Имена должны быть максимально конкретны. Имена x , temp , i и другие, достаточно общие для того, чтобы их можно было использовать более чем с одной целью, не так информативны, как могли бы быть, и обычно являются плохими.
Хорошее мнемоническое имя чаще всего описывает проблему, а не ее решение. Хорошее имя в большей степени выражает что, а не как. Если же имя описывает некоторый аспект вычислений, а не проблемы, имеет место обратное. Предпочитайте таким именам переменных имена, характеризующие саму проблему.
Запись данных о сотруднике можно было бы назвать inputRec или employeeData . Имя inputRec — компьютерный термин, выражающий идеи ввода данных и записи. Имя employeeData относится к проблемной области, а не к миру компьютеров. В случае битового поля, определяющего статус принтера, имя bitFlag более компьютеризировано, чем printerReady , а в случае приложения бухгалтерского учета calcVal более компьютеризировано, чем sum .
Оптимальная длина имени, наверное, лежит где-то между длинами имен x и maximumNumberOfPointsInModernOlympics . Слишком короткие страдают от недостатка смысла. Проблема с именами вроде x1 и x2 в том, что, даже узнав, что такое x , вы ничего не сможете сказать об отношении между x1 и x2 . Слишком длинные имена надоедает печатать, к тому же они могут сделать неясной визуальную структуру программы.
Было обнаружено, что отладка программы требовала меньше всего усилий, если имена переменных состояли в среднем из 10–16 символов. Отладка программ с именами, состоящими в среднем из 8–20 символов, была почти столь же легкой. Это не значит, что следует присваивать всем переменным имена из 9–15 или 10–16 символов. Это значит, что, увидев в своем коде много более коротких имен, вы должны проверить их ясность.
Вопрос адекватности длины имен переменных поясняет следующая таблица:
| Слишком длинные имена: | Слишком короткие имена: | То, что надо: |
|---|---|---|
| numberOfPeopleOnTheUsOlympicTeam, numberOfSeatsInTheStadium, maximumNumberOfPointsInModernOlympics | n, np, ntm, n, ns, nsisd, m, mp, max, points | numTeamMembers, teamMemberCount, numSeatsInStadium, seatCount, teamPointsMax, pointsRecord |
Дата изменения: February 26, 2023
Поделиться
Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!
Переменные Javascript
Переменные в JavaScript это контейнеры для хранения различных данных.
В следующем примере x, y, z это переменные:
var x = 5; var y = 6; var z = x + y;
Как видно из этого примера, переменные
- могут хранить значения, как x и y
- могут использоваться в различных выражениях (z = x + y; в z будет вычислено значение 11)
Идентификаторы JavaScript
Все переменные JavaScript должны идентифицироваться при помощи уникальных имен. Эти уникальные имена называются идентификаторами.
Идентификаторы могут быть короткими (как x и y) или же более описательными (age, sum, totalVolume).
Общие правила составления имен для переменных (уникальных идентификаторов) следующие:
- Имена могут содержать буквы, цифры, символ подчеркивания (_) и символ доллара ($).
- Имена должны начинаться с буквы.
- Также имена могут начинаться с символа доллара ($) и символа подчеркивания (_) (но в данном учебнике это не используется).
- Имена являются регистрозависимыми (y и Y — разные переменные).
- Зарезервированные слова (например, ключевые слова JavaScript) не могут использоваться в качестве имен.
Оператор присваивания
В JavaScript знак «равно» (=) является оператором «присваивания», а не оператором «равен чему-то».
И это прямое отличие от математики. В математике следующее выражение не имеет смысла:
x = x + 5
В JavaScript же данное выражение вполне себе наполнено смыслом — оно означает, что значение x + 5 присваивается переменной x (вычисляется значение x + 5, а результат помещается в переменную x, т. е. значение в переменной x увеличивается на 5.)
Оператор «равен чему-то» в JavaScript записывается как ==.
Типы данных в JavaScript
Переменные JavaScript могут хранить как числа, так и текст.
В программировании текстовые значения называются текстовые строки.
JavaScript может работать с многими типами данных, но на данном этапе достаточно знать о числах и строках.
Строки записываются в двойных или одинарных кавычках. Числа записываются без кавычек. Если поместить число в кавычки, то оно будет восприниматься обработчиком JavaScript, как текстовая строка.
var pi = 3.14; var person = "Иван Петров"; var answer = 'Да, это я!';
Декларирование (создание) переменных JavaScript
Процесс создания переменной в JavaScript называется «декларирование» переменной.
Переменная JavaScript декларируется при помощи ключевого слова var:
var carName;
Сразу после декларирования у переменной нет никакого значения. (Вообще-то, технически у такой переменной есть специальное значение — undefined)
Чтобы присвоить переменной значение, следует воспользоваться оператором присваивания:
carName = "Volvo";
Также присвоить значение можно и во время декларирования переменной:
var carName = "Volvo";
В следующем примере мы создаем переменную с именем carName и сразу же присваиваем ей значение «Volvo». Затем мы «выводим» значение переменной в HTML параграфе с атрибутом :
Декларирование всех переменных в начале скрипта считается хорошей практикой программирования.
Одно выражение, много переменных
Вы можете декларировать в одном выражении несколько переменных.
Для этого нужно начать выражение с ключевого слова var и разделять декларируемые переменные запятой:
var person = "John Doe", carName = "Volvo", price = 200;
Декларация может располагаться на нескольких строках:
var person = "John Doe", carName = "Volvo", price = 200;
Значение = undefined
В компьютерных программах переменные часто декларируются без определения значений. В этом случае предполагается, что значение в дальнейшем должно быть вычислено, либо предоставлено позднее в результате, например, пользовательского ввода. При этом у переменной, декларированной без значения, на самом деле будет значение undefined.
После выполнения кода следующего примера у переменной carName будет установлено значение undefined:
var carName;
Повторное декларирование переменных JavaScript
Если вы повторно декларируете переменную JavaScript, то она не потеряет значение, которое у нее было до этого.
После выполнения следующего кода в переменной carName все еще будет храниться значение «Volvo»:
var carName = "Volvo"; var carName;
Арифметика JavaScript
Как и в математике, с переменными JavaScript вы можете при помощи, например, оператора сложения (+) осуществлять арифметические вычисления:
var x = 5 + 2 + 3;
Также можно складывать и строки, но при этом строки будут конкатенироваться, т.е. объединяться:
var x = "John" + " " + "Doe";
Если поместить число в кавычки, то остальные числа будут восприниматься как строки, и будет проведена операция конкатенации строк:
var x = 2 + 3 + "5";
Хранение по ссылке и по значению
Одно значение можно сохранить как есть, но когда их количество неизвестно, то нужен другой подход.
Время чтения: 10 мин
Открыть/закрыть навигацию по статье
- Кратко
- Примитивные типы данных
- Ссылочные типы данных
- Мутации и неизменяемость
- Аргументы функций
- Егор Огарков советует
- Каким будет значение определённого свойства объекта?
Обновлено 5 августа 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Для хранения различных значений в переменных мы используем разные типы данных. Однако хранятся эти значения по-разному. Примитивные значения (например, числа или строки) хранятся в переменной как есть, а объекты, массивы и функции — по ссылке на место в памяти.
Представим ситуацию, когда у вас в руках есть ложка из набора, и вы кладёте её в какой-то ящик. Такой простой метафорой можно описать присвоение значения в переменную, если представить ящик как переменную, а ложку как значение. Таким образом можно определить и хранение по значению. В следующий раз, когда вы захотите взять ложку, вы можете открыть тот же самый ящик и получить это значение-ложку.
Теперь представим, что у нас есть другая ложка — это специальная ложка, удобная, но при этом никто не знает, какого она размера и как её правильно хранить. Но для удобства вам хотелось так же использовать ящик. Поэтому, когда вы открыли этот же ящик, то там уже не лежит эта ложка, зато находится записка о том, где эту ложку можно найти.
В итоге, чтобы получить ложку, нужно обратиться по этому «адресу». Предположим, что теперь все такие ложки лежат в специальной «ложечной», которая может их вместить, и только оттуда их можно достать. А потому, чтобы получить ложку вам нужно обратиться по данному адресу. Аналогичным образом мы можем положить записки с тем же адресом и в другие ящики, чтобы каждый, кто обращался к ящику знал где найти ложку. Теперь ваша ложка хранится по ссылке.
В чем же фундаментальное отличие?
Отличий несколько, некоторые могут приводить к неприятным последствиями в нашем коде.
То, как будут храниться данные, жёстко связано с типом данных. Нельзя заставить значение примитивного типа храниться по ссылке, и наоборот.
Для того чтобы понять, как хранятся разные типы данных, заглянем в память компьютера.
Примитивные типы данных
Скопировать ссылку «Примитивные типы данных» Скопировано
Когда мы объявляем переменную и сохраняем в неё примитивное значение, то в память записывается какое-то количество байт, которое описывает это значение. Таким образом можно сказать, что наша переменная уже сразу содержит эти байты.
const seven = 7 // 0b0111const eight = 8 // 0b1000const seven = 7 // 0b0111 const eight = 8 // 0b1000Если присвоить какое-то значение переменной в другую, то мы просто скопируем это же количество байт в новое место.
const sevenAgain = seven // 0b0111const sevenAgain = seven // 0b0111В итоге все наши переменные можно схематически отобразить таким образом:

Когда мы сравниваем два значения, то у нас по сути произойдёт побайтовое сравнение этих величин.
console.log(seven === sevenAgain)// trueconsole.log(seven === sevenAgain) // true
console.log(seven === eight)// falseconsole.log(seven === eight) // false
Из-за того, что все примитивные значения хранятся в небольшом и фиксированном количестве байт, операции над ними выполнять несложно. Такие типы данных называют примитивными. В них входят числа ( number ), строки ( string ), булевы ( boolean ), а так же специальные значения null и undefined .
Ссылочные типы данных
Скопировать ссылку «Ссылочные типы данных» Скопировано
С объектами и другими сложными данными дела обстоят сложнее из-за того, что мы не знаем, какое количество памяти для них понадобится. Во время работы с такой структурой компьютеру необходимо следить за тем, сколько памяти уже есть, сколько понадобится, и выделять новую. Работать с такими данными сложнее. Для этого компьютер отдаёт нам ссылку на место, где данные хранятся, и самостоятельно будет работать с ними по инструкциям, которые мы ему даём. Таким образом в переменную мы получаем лишь ссылку на данные.
const myData = <>const myData = >
Обратите внимание, что направление стрелки поменялось. Так мы обозначим, что наша переменная ссылается на участок памяти.
☝️ Если сейчас присвоить значение из my Data в другую переменную, то мы скопируем ссылку, а не само значение.
const yourData = myDataconst yourData = myData
Такой тип данных называется ссылочным и в него входят объекты, массивы и функции. На самом деле и массивы и функции все они так же являются объектами, но это другая история.
Можно ли в таком случае рассчитывать, что значения будут равными? Конечно, можно! В этом случае сравниваться будут ссылки на объект, а не их содержимое. Потому, если обе переменных указываются на одно и то же, смело можно сказать, что значения равны.
const data = <>const anotherData = data console.log(data === anotherData)// trueconst data = > const anotherData = data console.log(data === anotherData) // trueИ не стоит забывать, что никакого сравнения по значениям не будет, даже если мы создадим абсолютно одинаковые объекты.
const cat = const dog = // Странно ожидать равность кошки и собаки ¯\_(ツ)_/¯ но теперь мы знаем причинуconsole.log(cat === dog)// falseconst cat = name: 'Феликс' > const dog = name: 'Феликс' > // Странно ожидать равность кошки и собаки ¯\_(ツ)_/¯ но теперь мы знаем причину console.log(cat === dog) // falseОднако факт того, что несколько переменных могут ссылаться на один и тот же объект означает в себе и некоторые другие особенности. Если кто-то из двух владельцев ссылки будет изменять объект, то изменения отразятся на всех.
yourData.name = 'Саша'console.log(myData)// myData.name = 'Михаил'console.log(yourData)//yourData.name = 'Саша' console.log(myData) // myData.name = 'Михаил' console.log(yourData) //Эта особенность часто становится причиной ошибок при работе со ссылочными типами данных, т.к можно легко забыть или даже не знать, что же ещё ссылается на тот же объект.
Если переменная потеряет ссылку на объект, то изменения уже не будут на него влиять
let user = const admin = user // Переопределение никак не повлияет на admin, потому что мы создали новый объектuser = console.log(admin) // admin.isAdmin = true console.log(user) // console.log(admin) //let user = name: 'Анна', age: 21 > const admin = user // Переопределение никак не повлияет на admin, потому что мы создали новый объект user = name: 'Иван' > console.log(admin) // admin.isAdmin = true console.log(user) // console.log(admin) //Мутации и неизменяемость
Скопировать ссылку «Мутации и неизменяемость» Скопировано
Изменение значений у полей объекта, добавление или удаление их отразится на всех, кто владеет ссылкой на этот объект. Такие операции называют мутациями. В современных веб-разработке мутаций стараются избегать, потому что мутирование объектов может приводить к ошибкам, которые очень трудно отследить. Однако если мы твердо уверены, что объект нигде более не используется или чётко контролируем ситуацию, то изменение объекта напрямую гораздо проще.
Если нужно безопасно модифицировать объект, то для начала придётся его скопировать. Скопировать объект можно двумя способами: через Object . assign ( ) или используя спред-синтаксис . . .
const admin = name: 'Анна', age: 21, isAdmin: true,> // Чтобы скопировать через Object.assign() нужно передать пустой объектconst adminCopy = Object.assign(<>, admin) const anotherCopy = . admin,>const admin = name: 'Анна', age: 21, isAdmin: true, > // Чтобы скопировать через Object.assign() нужно передать пустой объект const adminCopy = Object.assign(>, admin) const anotherCopy = . admin, >Таким образом будет создана совсем новая сущность, которая будет содержать ровно те же значения. Любые изменения в новом объекте уже не затронут предыдущий.
anotherCopy.age = 30anotherCopy.isAdmin = false console.log(anotherCopy)// console.log(admin)//anotherCopy.age = 30 anotherCopy.isAdmin = false console.log(anotherCopy) // console.log(admin) //Здесь стоит внести важную оговорку о вложенных объектах. При копировании объекта указанным способом копируются только поля верхней вложенности (сработает поверхностное копирование). Любые вложенные объекты копируются по ссылке. Их изменение затронет и первоисточник:
const original = b: c: 1, >,> const copy = copy.b.c = 2 // Тоже изменился!console.log(original)// < b: < c: 2 >>const original = b: c: 1, >, > const copy = . original > copy.b.c = 2 // Тоже изменился! console.log(original) // < b: < c: 2 >>Изменения можно так же внести при копировании.
const cat = name: 'Феликс', color: 'чёрный', isHomeless: false,> const catInBoots = . cat, name: 'Пушок', hasBoots: true,> console.log(catInBoots)// const redCat = Object.assign(cat, < color: 'рыжий', name: 'Борис' >) console.log(redCat)//const cat = name: 'Феликс', color: 'чёрный', isHomeless: false, > const catInBoots = . cat, name: 'Пушок', hasBoots: true, > console.log(catInBoots) // const redCat = Object.assign(cat, color: 'рыжий', name: 'Борис' >) console.log(redCat) //Если каждый раз создавать объект, когда мы вносим изменения, то такие объекты называют иммутабельными (immutable) или неизменяемыми. Результатом любой модификации такого объекта всегда должен быть новый объект, при этом старый никак не изменится.
С массивами, кстати, ситуация точно такая же — если изменять содержимое, то изменения отразятся на всех владельцев ссылки. Для копирования массивов, кроме оператора троеточия, можно использовать метод массива slice ( ) . Методы map ( ) и filter ( ) — они тоже создают новый массив. Причём некоторые другие методы (например sort ( ) , splice ( ) ) при использовании мутируют исходный массив, потому использовать их стоит с осторожностью. Подробнее о том, какой метод мутирует массив можно найти на Does It Mutate.
Очевидным минусом использования иммутабельности может быть большее использование памяти, но в реалиях современной разработки это часто не бывает проблемой, учитывая те плюсы, которые мы получаем.
Аргументы функций
Скопировать ссылку «Аргументы функций» Скопировано
Про тип данных стоит помнить особенно внимательно при использовании функций. Когда мы используем значение как аргумент функции, то все особенности его типа данных сохраняются:
- При передаче примитивного типа данных, его значение копируется в аргумент.
- При использовании ссылочного типа данных копируется ссылка. Все изменения в объекте, который был передан в качестве аргумента, будут видны всем, кто владеет ссылкой:
const member = function makeAdmin(user) user.isAdmin = true return user> const admin = makeAdmin(member) console.log(admin)// console.log(member)// // Это один и тот же объектconsole.log(admin === member)// trueconst member = id: '123', name: 'Иван' > function makeAdmin(user) user.isAdmin = true return user > const admin = makeAdmin(member) console.log(admin) // console.log(member) // // Это один и тот же объект console.log(admin === member) // trueЗаключение
Скопировать ссылку «Заключение» Скопировано
Итак, что мы узнали?
- Примитивные типы данных (числа, булевы и строки) хранятся и сравниваются по значению. Можно безопасно менять значение переменной и не бояться, что изменится что-то ещё
- Ссылочные типы данных (объекты, массивы) хранятся и сравниваются по ссылке. При этом при сравнении будет учитываться именно факт того, что две переменные ссылаются на один и тот же объект. Даже если два объекта содержат идентичные значения это ни на что не повлияет
- Изменения внутри объекта будут видны всем у кого есть ссылка на этот объект. Прямое изменение данных объекта называется мутирование. Лучше стараться избегать мутации объекта, т.к это может приводить к неочевидным ошибкам
- Чтобы безопасно менять ссылочный тип данных его необходимо предварительно скопировать. Таким образом будет создана другая ссылка и любые изменения не затронут старый объект
На практике
Скопировать ссылку «На практике» Скопировано
Егор Огарков советует
Скопировать ссылку «Егор Огарков советует» Скопировано
При копировании можно изменить и добавить поля, но вот удалить без мутации нельзя
const dog = name: 'Барбос', color: 'чёрный',> const puppy = . dog, // Можно выставить значение undefined, но это не удаление color: undefined,> // А это удалит поле, хоть delete считается мутированием// Но использование его на копии изменит только puppy, dog не будет измененdelete puppy.colorconst dog = name: 'Барбос', color: 'чёрный', > const puppy = . dog, // Можно выставить значение undefined, но это не удаление color: undefined, > // А это удалит поле, хоть delete считается мутированием // Но использование его на копии изменит только puppy, dog не будет изменен delete puppy.colorПопулярные в веб-разработке библиотеки React и Redux сильно завязаны на иммутабельности данных и практически построены на этом. Подробнее об этом подходе читайте в статье «Организация потоков данных».
На собеседовании
Скопировать ссылку «На собеседовании» Скопировано
Переменные в JavaScript
Работая в Javascript мы можем вносить числовые, строковые и логические значения, однако они работают в том случае, если в программе содержится необходимая информация. Для этого и созданы переменные, которые позволяют хранить в себе различного рода информацию и представляет собой как некий контейнер к которому можем обратиться в любой момент и достать ту информацию которая в нем расположена.
Создание переменной
Переменная создается в два этапа: это объявление переменной и присвоение ей имени.
Для начала мы должны задекларировать переменную, то есть объявить ее, это делается при помощи ключевого слова var . Далее пишем инструкцию, это имя переменной, ее название как к ней будем обращаться, для примера напишу dwstv.
Как называть переменные решать, конечно, вам, однако есть несколько правил, которым необходимо соблюдать, чтобы работал javascript :
- первое правило, избегайте использование зарезервированных слов . Некоторые слова в языке JavaScript используются в самой системе, как например слово var при помощи которого мы объявляем переменную. Кроме того, некоторые слова, такие как alert , document , window , считаются особыми свойствами веб страницы. Если вы попытаетесь их задействовать в качестве переменных, то получите сообщение об ошибке. Тут можно посмотреть списокзарезервированных слов.
- второе правило, имя переменной должно начинаться с буквы, символа $ или _ . То есть переменная не может начинаться с цифры или знака препинания: имя 1dwstv и &dwstv работать не будут, а имена $dwstv и _dwstv будут.
- третье правило, в имени переменной могут содержаться буквы, цифры, символы $ и _, и не могут быть использованы в имени пробелы или другие специальные знаки : dws&tv и dws tv это недопустимые имена, а такого формата можно, dws_tv и dwstv1 или dws_tv_1 .
- четвертое правило, имена переменных чувствительны к регистру . Интерпретатор JavaScript по разному воспринимает строчные и прописные буквы, то есть переменная DWSTV отличается от переменной dwstv , а также от переменной DwStv и Dwstv .
- пятое правило, н е рекомендуется использовать символы, отличные от латиницы , переменные, написанные кириллицей, хоть и будут работать, но это не гарантировано, к тому же коллегам из других стран понятны не будут.
Это основные пять правил, которые рекомендую соблюдать, в дополнение к ним хочу еще сказать, присваивайте к своим переменным ясные и выразительные имена. Называйте переменные в соответствии с типом данных, которые в них храните, это вам поможет в дальнейшем разобраться в том, что написано, и, глядя на такие переменные, будет понятно о чем идет речь.
Называя переменные, старайтесь, чтобы они были удобны для чтения. При использовании нескольких слов, добавляйте между ними символ нижнего подчеркивания, либо начинайте каждое слово после первого с заглавной буквы. Например, dwsTv или dws_tv .
Использование переменных
В начале урока разобрали из чего состоит переменная, теперь, когда умеем ее создавать, можем в ней хранить любые типы данных по своему усмотрению.
Для того чтобы положить в переменную данные, используется специальный символ, знак равенства ( = ), он называется операцией присваивания, поскольку он используется, чтобы присвоить переменной какое то значение.
Для примера положим в переменную dwstv цифровое значение, количество подписчиков 8500, объявляем переменную var dwstv; и второй строкой кладем в нее значение dwstv = 8500;
var dwstv; dwstv = 7200;
И так, первой строкой мы создали переменную, а второй сохранили в нее значение. Мы так же можем создавать переменную и сохранять в ней значения с помощью одной инструкции, например:
var dwstv = 7200;
В переменной мы можем хранить любые типы данных, которые проходили в предыдущих уроках, это могут быть числовые, строковые и логические значения:
var dwstv = 7200;var lessons = ‘JavaScript’; var youtubeKanal = ‘DwsTV’; var subscribers = ‘7700’; var content = true;
Мы можем также экономить место, время, декларируя переменные одним ключом var, пример:
var lessons = ‘JavaScript’, youtubeKanal = ‘DwsTV’, subscribers = ‘7700’, content = true;
После того как сохранили значения в переменных, у нас появляется возможность получить доступ к этим данным. Для этого достаточно использовать имя самой переменной.
К примеру, если нам нужно открыть диалоговое окно оповещения и отобразить значение, сохраненное в переменной kanal, достаточно просто написать имя переменной в функции alert .
alert(kanal);
Обратите внимание, что мы не заключаем переменные в кавычки — они только для строк, поэтому мы не пишем alert(‘kanal’) , так как в этом случае мы получим слова kanal, а не значение сохраненное в переменной.
Теперь я думаю, вы разобрались, почему строки следует заключать в кавычки: интерпретатор javaScript воспринимает слова без кавычек либо как специальные объекты (например, команда alert() ), либо как имена переменных.
Да и еще такой момент, когда мы задекларировали переменную ключевым словом var , и хотим поменять в переменной значение, не обязательно повторно ее объявлять, прописывая слово var , достаточно вызвать имя переменной и присвоить ей новое значение.
subscribers = ‘10000’;
По завершению данного урока хочу сказать, изучая любой язык, вы не научитесь программировать. Несомненно, вы узнаете, что-то новое, но скорей всего эту информацию ваш мозг не запомнит, так как с ней вы не работаете. Невозможно изучить какой-то язык, не практикуясь, поэтому с этого урока вы получаете маленькое задание для того что бы предоставленная информация у вас уложилась и вы могли с ней работать.
Практическое задание:
Создайте три переменных, одной присвойте числовое значение, второй строковое значение, а третьей логическое. Все переменные задекларируйте одним ключевым словом var, и отобразите их на странице. Затем переопределите переменную с числовым значением, и полученный результат отобразите при помощи функции alert() .
В начале следующего видео разберем данную задачу, делитесь вашими результатами в комментариях, пишите, если у кого-то остались вопросы. Кому понравился урок и хочет поддержать проект, для этого достаточно поделитесь им в социальных сетях.
В следующем уроке подробно разберем, как работать с типами данных и переменными, познакомимся с математическими операциями и порядком их выполнения, а также разберем методы объединения строковых и числовых значений.
Урок подготовил Горелов Дениc.
- Мутации и неизменяемость
