Присвоение значения переменной javascript: Присваивание (=) — JavaScript | MDN

Leave a Comment / Разное / By /

Содержание

Переменка | JavaScript Camp

Переменные​

Переменные 🔔 (Variables, сокращенно var) — это контейнер 📦 для таких значений, как числа, используемые в сложении ➕ , или строка, которую мы могли бы использовать как часть предложения, а также другие типы данных с которыми мы познакомимся позже.

Видео​

Объявление переменной​

Чтобы использовать переменную, вы сначала должны ее создать🏗️, или, если быть точнее, объявить🗣️ переменную. Чтобы сделать это, мы вводим ключевое🗝️ слово var, за которым следует имя, которое вы хотите дать своей переменной. Приведённая ниже инструкция создаёт🏗️ (другими словами: объявляет🗣️ или определяет) переменную с именем «message»:

function learnJavaScript() { var message = » return message }

Loading…

Здесь мы создаем переменную 🔔 message. В настоящее время ⏱️ она не содержит значение, если сказать точней, то переменная содержит пустую строку.

Присвоение значения переменной​

Как только переменная 🔔 объявлена, ей можно присвоить значение. Для этого пишется 🖊️ имя переменной 🔔 , затем следует знак равенства =, а за ним значение, которое вы хотите присвоить. Например 👇 :

function learnJavaScript() { var message message = ‘My name is …’ //Мы можем получить к ней доступ, используя имя переменной return message }

Loading…

В RESULT значение, которое вы назначили переменной 🔔 , возвращаемой в консоли. Поиграйтесь 🎮 со значениями переменной 🔔 , например дополните выражение своим именем.

Для краткости можно совместить объявление переменной 🔔 и запись 🖊️ в одну строку 👇 :

function learnJavaScript() { var message = ‘Hello!’ // определяем переменную и присваиваем ей значение return message }

Loading. ..

Обновление переменной​

Одна из особенностей переменных 🔔 — их значение может меняться. Когда переменной 🔔 присваивается значение, вы можете изменить (обновить) это значение, просто указав другое значение. Давайте взглянем на простой пример 👇 :

function learnJavaScript() { var message = ‘Bob’ // сейчас message Bob message = true // а теперь message true message = 35 // и в итоге message 35 return message }

Loading…

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

На заметку!

Мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями! Они представляют собой контейнеры📦 для значений. Представьте, что они похожи на маленькие картонные коробки📦, в которых вы можете хранить вещи.

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

Вы можете назвать переменную 🔔 как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчеркивания.

  • Не рекомендуется использование других символов, потому что они могут вызывать ошибки или быть непонятными для международной аудитории.
  • Не используйте символы подчеркивания в начале имен переменных 🔔 — это используется в некоторых конструкциях JavaScript для обозначения конкретных вещей.
  • Не используйте числа в начале переменных 🔔 . Это недопустимо и приведет к ошибке.
  • Общепринято придерживаться так называемый «lower camel case»(верблюжийРегистр — camelCase — называется так из-за «горбов» которые образуют первые буквы слов), где вы склеиваете несколько слов, используя строчные буквы для всего первого слова, а затем заглавные буквы последующих слов. Мы использовали это для наших имен переменных 🔔 в этой статье.
  • Делайте имена переменных 🔔 такими, чтобы было интуитивно понятно, какие данные они содержат. Не используйте только отдельные буквы / цифры или большие длинные фразы.
  • Переменные 🔔 чувствительны к регистру, так что myage и myAge — разные переменные 🔔 .
  • И последнее — вам также нужно избегать использования зарезервированных слов JavaScript в качестве имен переменных 🔔 — под этим мы подразумеваем слова, которые составляют фактический синтаксис JavaScript! Таким образом, вы не можете использовать слова типа var, function, let, и for для имен переменных 🔔 . Браузеры распознают их как разные элементы кода, и поэтому возникают ошибки.

Список зарезервированных слов​

Этими словами мы не можем называть переменные 🔔 , так как они зарезервированы в языке JavaScript. break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, finally, for, function, if, import, in, instanceof, new, return, super, switch, this, throw, try, typeof, var, void, while, with, yield

Свободная типизация​

JavaScript — это «свободно типизируемый язык👅», что означает, что в отличие от некоторых других языков👅 вам не нужно указывать, какой тип данных будет содержать переменная 🔔 (например, числа, строки, массивы и т.

д.).

Например, если вы объявите переменную 🔔 и присвоите ей значение, заключенное в кавычки, браузер будет обрабатывать переменную 🔔 как строку 👇 :

function learnJavaScript() { var myString = ‘Hello’ // Она все равно будет строкой, даже если содержит числа, поэтому будьте осторожны: var myNumber = ‘500’ // упс, это все еще строка (string) myNumber = 500 // так-то лучше, теперь это число (number). Удалите эту строчку и посмотрите на тип данных. return typeof myNumber }

Loading…

Устаревшее ключевое слово «var»​

Обычно var не используется в современных скриптах, но всё ещё может скрываться в старых. Связано это с тем, что он ведет себя не однозначно, поэтому вместо var мы будем использовать let для переменных 🔔 , а const для постоянных — констант.

🔔 Переменка закончилась, бежим на следующий урок!

React Native​

Базовый пример Hello world рассмотренный в первом уроке содержит в себе константу App, содержащую в себе стрелочную функцию с которой мы детальней познакомимся в уроке про функции.

Проблемы?​

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы:​

Что такое переменные?

  1. Контейнеры для значений
  2. Переменные значения
  3. Латинские буквы

Что могут содержать переменные?

  1. Только строки и числа
  2. Все типы данных
  3. Только сложные данные и функции

Как прописать команду присвоения переменной?

  1. var
  2. var [название переменной] =
  3. var [название переменной]

Как обновить переменную?

  1. Переменную нельзя обновить
  2. Указать другое значение переменной
  3. Задать специальную команду

Чего нет в правилах именования переменных?

  1. Числа в начале переменных
  2. Не использовать зарезервированные слова
  3. Придерживаться латинских символов

Как прописать значение переменной, чтобы браузер обрабатывал переменную как строку?

  1. Без кавычек
  2. В кавычках
  3. В скобках

Какое ключевое🗝️ слово мы не используем для определения переменных?

  1. let
  2. const
  3. var

Какой вид заглавных букв (т. е. регистр) следует использовать в именах переменных в JavaScript?

  1. case
  2. camel
  3. camelCase

Это допустимый синтаксис JavaScript? Если нет, то почему?

let myMood = \"Curious about JavaScript\" \n let myMood = \"Excited to use my new superpowers\"\n myMood
  1. Вторая переменная без let
  2. Действительно
  3. SyntaxError

Что означает один знак равенства в утверждении?

  1. Сравнить
  2. Значение присваивается переменной
  3. Равенство

Какое ключевое слово следует использовать для создания любой переменной, которая, как вы знаете, не будет изменена?

  1. let
  2. const
  3. var

Когда следует использовать ключевое слово var в собственном коде?

  1. Никогда
  2. Всегда
  3. Часто

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

Ссылки:​

  1. MDN web docs
  2. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript — Jeremy Moritz
  3. JavaScript.ru

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
📖
Resoner2005
🐛 🎨 🖋

Присвоение значений переменным — HTML, CSS, JavaScript, Perl, PHP, MySQL: Weblibrary.biz

Рубрика: PHPАвтор: w-admin

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

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

и о других типах операторов.

Например:

$пшпЬег = 1;
$floating_number = 1.2;
$

Тип переменной может изменяться «на лету», так как он не зафиксирован
(РНР относится к языкам со слабым контролем типов, как и JavaScript):

$variable = 1;
$variable = "Greetings";

Теперь, если распечатать значение переменной, мы получим Greetings.
Присваивание значений массиву будет рассмотрено дальше.
Вы можете явно присвоить переменной тип при первом ее использовании

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

Синтаксис для этого следующий:

$number = (integer) 5;
$string = (string) "Hello, World!";

Честно говоря, даже после этого можно моментально менять тип перемен
ной.

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

Предопределенные переменные

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

Предопределенные переменные специальный тип переменных, который
используется и программой Webсервера (например, Apache), и операционной
системой Webсервера (Unix или Windows NT), и самим модулем РНР. Первые
две категории называют также переменными окружения или переменнъши среды.

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

Примерами переменных серверной среды могут служить: $HOSTNAME (как
сервер называет себя) и $OSTYPE (операционная система сервера).
Предопределенные переменные сервера Apache: $DOCUMENT_ROOT место
хранения файлов на сервере, $HTTP_USER_AGENT, определяющая браузер и плат
форму пользователя, который просматривает страницу.

Наиболее используемая переменная в языке PHP $PHP__SELF, эквивалент
ная имени текущей страницы. На переменная $PHP_SELF указывает, что
просматривается страница test.php.

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

Как объявить переменную в JavaScript —

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

Переменная в JavaScript — это идентификатор, указывающий место хранения, используемое для хранения значения данных. Данные, хранящиеся в определенном месте в памяти. К которому мы получили доступ, используя имя переменной.

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

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

Например:

вар Цена = 100;

Содержание

Как объявить переменную в JavaScript.

Использование let и const(ES6)

До 2015 года существовал только один способ объявить переменную JavaScript — var . Версия JavaScript 2015 (ES6) позволяет пользователям определять переменную, которую нельзя переназначить с помощью  ключевое слово const . Ключевое слово let определяет переменную с ограниченной областью действия. Но сегодня мы используем ключевое слово var для объявления переменной.

Создание переменной называется объявлением переменной. Прежде чем мы используем переменную, нам нужно сообщить, что мы хотим ее использовать. Это требует создания переменной и присвоения ей имени. Чтобы объявить переменную, мы используем ключевое слово var .

переменная цена;

  • var  это ключевое слово. Интерпретатор JavaScript знает, что ключевое слово var , которое мы использовали для создания переменной.
  • Чтобы использовать переменную, мы должны присвоить ей имя, иногда называемое идентификатором. В приведенном выше примере переменная называется price .
  • Если имя переменной содержит более одного слова. Поэтому мы используем CamelCase. Это означает, что первое слово пишется строчными буквами, а все остальные слова начинаются с заглавной буквы.
  • Например, :  var myName;

Как присвоить значение переменной

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

Например, :

 var price= 40;
  • Теперь мы можем использовать переменную по имени «цена» . Здесь мы устанавливаем значение для переменной цены . По возможности имя переменной должно описывать тип данных переменной.
  • Знак равенства (=) является оператором присваивания. Он говорит, что мы собираемся присвоить значение переменной. Мы также можем использовать его для обновления значения, присвоенного переменной.
  • После объявления переменной мы не присвоили ей значение. Технически он имеет значение undefined.
 

<тело>
  
Переменные JavaScript
 

Создайте переменную, присвойте ей значение и отобразите ее:



<скрипт>
вар myAge = "24";
document. getElementById("демо").innerHTML =myAge;


 
 
  Вывод  
 
 Переменные JavaScript
Создайте переменную, присвойте ей значение и отобразите ее:
24 
 Повторное объявление переменной JavaScript 
 Мы также можем повторно создать переменную без изменения ее значения. Например, если мы повторно объявим , myAge  все равно будет иметь то же значение  24  после выполнения этих операторов.
 

<тело>
 
Переменные JavaScript
 

Если вы повторно объявите переменную JavaScript, она не потеряет своего значения.



<скрипт>
вар myAge = "24";
вар мой возраст;
document.getElementById("демо").innerHTML = myAge;


 
  Вывод 
 
 Переменные JavaScript
Если вы повторно объявите переменную JavaScript, она не потеряет своего значения.
24 
 Правила именования переменных 
 Вот некоторые правила, которым мы должны следовать при присвоении имени переменной:
  •  Имя переменной может содержать букву, цифру, знак подчеркивания (_) и знак доллара ($).
  •  Они должны начинаться с буквы, а не с цифры.
  •  Прописные и строчные буквы различаются. Это означает, что переменная  Всего   не то же самое, что  всего  или  ВСЕГО  .
  •  Это не должно быть ключевым словом.
  •  Пробел тоже не позволяет.
  •  Переменная может быть любой длины.
 Рекомендуем: 
 Что такое переменная в JavaScript?
 Как определить константу в java?
 Что такое консоль в JavaScript.
 Ссылка: 
 w3school.com
 javatpoint.com
 Руководство по присваиванию и изменению переменных в JavaScript 
 JavaScript
     
     Поделиться
      Мутации — это то, о чем вы довольно часто слышите в мире JavaScript, но что это такое и так ли они опасны, как их изображают? быть? 
     В этой статье мы рассмотрим концепции присвоения и изменения переменных и увидим, почему — вместе — они могут быть настоящей головной болью для разработчиков. Мы рассмотрим, как управлять ими, чтобы избежать проблем, как использовать как можно меньше и как сделать ваш код предсказуемым.
      Если вы хотите более подробно изучить эту тему или освоить современный JavaScript, ознакомьтесь с первой главой моей новой книги  Learn to Code with JavaScript  бесплатно. 
     Начнем с самых основ типов значений…
     Типы данных 
     Каждое значение в JavaScript является либо примитивным значением, либо объектом. Существует семь различных примитивных типов данных:
    •  числа, например  3  ,  0 ,  -4 ,  0,625 
    •  строк, например  'Hello' ,  "World" ,  `Hi` ,  '' 
    •  Булевы значения,  истина  и  ложь 
    •   ноль 
    •   не определено 
    •  символов — уникальный токен, который гарантированно никогда не столкнется с другим символом
    •   BigInt  — для работы с большими целыми значениями
     Все, что не является примитивным значением, равно  объект  , включая массивы, даты, регулярные выражения и, конечно же, объектные литералы.
      Функции — это особый тип объектов. Они определенно являются объектами, так как у них есть свойства и методы, но их также можно вызывать.
     Присвоение переменной — это одна из первых вещей, которую вы изучаете в программировании. Например, вот как мы присвоим число  3  переменной  bears  :
     const bears = 3;
 
     Обычная метафора переменных — это ящики с метками, внутри которых размещены значения. Приведенный выше пример будет представлен в виде коробки с надписью «медведи» со значением 3 внутри.
     Альтернативный способ думать о том, что происходит, — это ссылка, которая сопоставляет метку  с  значением  3  :
     Если я назначу число  3  на другую переменную, то же значение, что и медведи:
     пусть мушкетёры = 3;
 
     Переменные  содержат  и  мушкетера 
     
    , обе ссылаются на одно и то же примитивное значение 3. Мы можем проверить это, используя оператор строгого равенства,  ===  :
     медведи === мушкетеры
<< правда
 
     Оператор равенства возвращает  true , если обе переменные ссылаются на одно и то же значение.
     Некоторые ошибки при работе с объектами 
     В предыдущих примерах показано, как примитивные значения присваиваются переменным. Тот же процесс используется при назначении объектов:
     const охотники за привидениями = { число: 4 };
 
     Это присвоение означает, что переменная  охотники за привидениями  ссылается на объект:
     Большая разница при назначении объектов переменным заключается в том, что если вы назначаете другой литерал объекта другой переменной, он будет ссылаться на совершенно другой объект — даже если оба литерала объекта выглядят совершенно одинаково! Например, присваивание ниже выглядит так, как будто переменная  tmnt  (Черепашки-ниндзя) ссылается на тот же объект, что и переменная  охотники за привидениями  :
     let tmnt = { number: 4 };
 
     Несмотря на то, что переменные  охотники за привидениями  и  tmnt  выглядят так, как будто они ссылаются на один и тот же объект, на самом деле они оба ссылаются на совершенно разные объекты, в чем мы можем убедиться, проверив оператор строгого равенства:
     охотники за привидениями === tmnt
<< ложь
 
     Когда в ES6 было введено ключевое слово  const , многие люди ошибочно полагали, что константы были введены в JavaScript, но это было не так. Название этого ключевого слова немного вводит в заблуждение.
     Любая переменная, объявленная с  const , не может быть переназначена другому значению. Это касается примитивных значений и объектов. Например, переменная  bears  была объявлена ​​с использованием  const  в предыдущем разделе, поэтому ей не может быть присвоено другое значение. Если мы попытаемся присвоить переменной  медведей  число 2, то получим ошибку:
     медведей = 2;
<< TypeError: Попытка присвоить свойство только для чтения.
 
     Ссылка на номер 3 фиксирована, а номер  несет переменную , которой нельзя переназначить другое значение.
     То же самое относится к объектам. Если мы попытаемся присвоить переменной  охотников за привидениями  другой объект, мы получим ту же ошибку:
     охотники за привидениями = {число: 5};
TypeError: Попытка присвоить свойство только для чтения.
 
     Переназначение переменной с использованием 
     let 
     Когда ключевое слово  let  используется для объявления переменной, ее можно переназначить для ссылки на другое значение позже в нашем коде. Например, мы объявили переменную  musketeers , используя  let  , поэтому мы можем изменить значение, на которое ссылается  musketeers . Если бы д’Артаньян присоединился к мушкетерам, их число увеличилось бы до 4:
     мушкетеров = 4;
 
     Это можно сделать, потому что для объявления переменной использовалось  let . Мы можем изменить значение, на которое ссылается  мушкетера , столько раз, сколько захотим.
     Переменная  tmnt  также была объявлена ​​с использованием  let  , поэтому ее также можно переназначить для ссылки на другой объект (или совершенно другой тип, если хотите):
     tmnt = {число: 5};
 
     Обратите внимание, что переменная  tmnt  теперь ссылается на  совершенно другой объект  ; мы не просто изменили свойство  number  на 5.
      В итоге  , если вы объявите переменную, используя  const  , ее значение не может быть переназначено и всегда будет ссылаться на то же примитивное значение или объект, что и изначально был назначен. Если вы объявляете переменную с помощью  let  , ее значение может быть переназначено столько раз, сколько потребуется позже в программе.
     Использование  const  как можно чаще считается хорошей практикой, так как это означает, что значение переменных остается постоянным, а код более последовательным и предсказуемым, что делает его менее подверженным ошибкам и ошибкам.
     В родном JavaScript вы можете только присваивать значения переменным. Вы не можете назначать переменные для ссылки на другую переменную, даже если кажется, что можете. Например, количество марионеток равно количеству мушкетеров, поэтому мы можем присвоить переменной  stooges  для ссылки на то же значение, что и переменная  musketeers , используя следующее:
     const stooges = musketeers;
 
     Похоже, что переменная  марионетки  ссылается на переменную  musketeers  , как показано на диаграмме ниже:
     Однако это невозможно в родном JavaScript:  переменная может ссылаться только на фактическое значение; он не может ссылаться на другую переменную  . Что на самом деле происходит, когда вы делаете такое присваивание, так это то, что переменная слева от присваивания будет ссылаться на значение, на которое ссылается переменная справа, поэтому переменная  stooges  будет ссылаться на то же значение, что и переменная  musketeers , т.е. число 3. После выполнения этого присвоения переменная  stooges  вообще не связана с переменной  musketeers .
     Это означает, что если Д'Артаньян присоединится к мушкетерам и мы установим значение  мушкетеров  равным 4, значение  марионеток  останется равным 3. Фактически, поскольку мы объявили переменную  марионеток , используя  const  , мы не можем установить какое-либо новое значение; всегда будет 3.
      В итоге  : если вы объявите переменную с помощью  const  и установите для нее примитивное значение, даже через ссылку на другую переменную, то ее значение не может измениться. Это хорошо для вашего кода, так как означает, что он будет более последовательным и предсказуемым.
     Мутации 
     Значение считается  изменяемым , если оно может быть изменено. Вот и все: мутация   — это действие по изменению свойств значения.
     Все примитивные значения в JavaScript являются  неизменяемыми  : вы не можете изменить их свойства — никогда. Например, если мы назначим строку  "cake"  переменной  food  , мы увидим, что не можем изменить ни одно из ее свойств:
     const food = "cake";
 
     Если мы попытаемся изменить первую букву на «f», она выглядит так, будто она изменилась:
     food[0] = «f»;
<< "ф"
 
     Но если мы посмотрим на значение переменной, то увидим, что на самом деле ничего не изменилось:
     еда
<< "торт"
 
     То же самое произойдет, если мы попытаемся изменить свойство длины:
     food.length = 10;
<< 10
 
     Несмотря на возвращаемое значение, означающее, что свойство length было изменено, быстрая проверка показывает, что это не так:
     food. length
<< 4
 
     Обратите внимание, что это не имеет ничего общего с объявлением переменной с использованием  const  вместо  let  . Если бы мы использовали  пусть  , мы могли бы установить  еда  для ссылки на другую строку, но мы не можем изменить ни одно из ее свойств. Невозможно изменить какие-либо свойства примитивных типов данных, потому что они  неизменяемы  .
     Изменчивость и объекты в JavaScript 
     И наоборот, все объекты в JavaScript изменяемы, что означает, что их свойства могут быть изменены, даже если они объявлены с использованием  const  (помните, что  let  и  const  управляют только тем, или переменная не может быть переназначена и не имеет ничего общего с изменчивостью). Например, мы можем изменить первый элемент массива, используя следующий код:
     const food = ['🍏','🍌','🥕','🍩'];
еда[0] = '🍎';
еда
<< ['🍎','🍌','🥕','🍩']
 
     Обратите внимание, что это изменение все же произошло, несмотря на то, что мы объявили переменную  food , используя  const . Это показывает, что использование  const   не предотвращает мутацию объектов  .
     Мы также можем изменить свойство длины массива, даже если оно было объявлено с использованием  const  :
     food.length = 2;
<< 2
еда
<< ['🍎','🍌']
 
     Копирование по ссылке 
     Помните, что когда мы назначаем переменные литералам объектов, переменные будут ссылаться на совершенно разные объекты, даже если они выглядят одинаково:
     const ghostbusters = {number: 4};
const tmnt = {число: 4};
 
     Но если мы назначим переменную  фантаст4  другой переменной, они обе будут ссылаться на  один и тот же  объект:
     const фантаст4 = tmnt;
 
     Это присваивает переменной  fantasy4  для ссылки  на тот же объект , на который ссылается переменная  tmnt , а не на совершенно другой объект.
     Это часто называют  копированием по ссылке  , поскольку обе переменные назначаются для ссылки на  один и тот же объект .
     Это важно, поскольку любые изменения, внесенные в этот объект, будут видны в  обеих  переменных.
     Итак, если Человек-паук присоединится к Фантастической четверке, мы можем обновить  число  значение в объекте:
     фантастическое4.число = 5;
 
     Это мутация, потому что мы изменили свойство  number  вместо того, чтобы установить  фантастическое4  для ссылки на новый объект.
     Это вызывает у нас проблему, потому что свойство  number   tmnt  также изменится, возможно, мы даже не заметим:
     tmnt.number
<< 5
 
     Это потому, что оба  tmnt  и  фантастические4  ссылаются на один и тот же объект, поэтому любые мутации, внесенные в  tmnt  или  фантаст4 , повлияют на них обоих.
     Это подчеркивает важную концепцию JavaScript: когда объекты копируются по ссылке и впоследствии мутируются, мутация повлияет на любые другие переменные, которые ссылаются на этот объект. Это может привести к непреднамеренным побочным эффектам и ошибкам, которые трудно отследить.
     Оператор распространения спешит на помощь! 
     Так как же сделать копию объекта, не создавая ссылку на исходный объект? Ответ заключается в использовании оператора спреда!
     Оператор расширения был введен для массивов и строк в ES2015 и для объектов в ES2018. Это позволяет вам легко сделать поверхностную копию объекта, не создавая ссылку на исходный объект.
     В приведенном ниже примере показано, как мы можем установить переменную  fantasy4  для ссылки на копию объекта  tmnt . Эта копия будет точно такой же, как объект  tmnt , но  фантастическое4  будет ссылаться на совершенно новый объект. Это делается путем размещения имени копируемой переменной внутри литерала объекта с оператором распространения перед ним:
     const tmnt = {число: 4};
const фантаст4 = {...tmnt};
 
     На самом деле здесь мы присвоили переменную  фантаст4  новому объектному литералу, а затем использовали оператор расширения для копирования всех перечислимых свойств объекта, на который ссылается переменная  tmnt . Поскольку эти свойства являются значениями, они копируются в объект  фантастического4  по значению, а не по ссылке.
     Теперь любые изменения, внесенные в один объект, не повлияют на другой. Например, если мы обновим  число  свойство переменной  фантастического4  равно 5, это не повлияет на переменную  tmnt :
     фантастическое4.число = 5;
фантастический4.номер
<< 5
tmnt.номер
<< 4
 
     Оператор распространения также имеет полезную сокращенную нотацию, которую можно использовать для создания копий объекта, а затем внесения некоторых изменений в новый объект в одной строке кода.
     Например, мы хотим создать объект для моделирования черепашек-ниндзя. Мы могли бы создать первый объект черепахи и присвоить переменной  leonardo  к нему:
     const leonardo = {
  животное: «черепаха»,
  цвет синий',
  оболочка: правда,
  ниндзя: правда,
  оружие: катана
}
 
     Все остальные черепахи имеют одинаковые свойства, за исключением  оружия  и  цвета  свойств, которые различны для каждой черепахи. Имеет смысл сделать копию объекта, на который ссылается  leonardo , используя оператор распространения, а затем изменить свойства  оружия  и  цвета , например так:
     const michaelangelo = {...леонардо};
michaelangelo.weapon = 'нунчаки';
michaelangelo.color = 'оранжевый';
 
     Мы можем сделать это в одну строку, добавив свойства, которые мы хотим изменить, после ссылки на объект распространения. Вот код для создания новых объектов для переменных  donatello  и  raphael  :
     const donatello = {...leonardo, weapon: 'bo staff', color: 'purpple'}
const raphael = {...леонардо, оружие: 'сай', цвет: 'фиолетовый'}
 
     Обратите внимание, что использование оператора расширения таким образом создает только поверхностную копию объекта. Чтобы сделать глубокую копию, вам придется делать это рекурсивно или использовать библиотеку. Лично я бы посоветовал вам стараться, чтобы ваши объекты были как можно более мелкими.
     Мутации — это плохо? 
     В этой статье мы рассмотрели концепции присвоения и изменения переменных и увидели, почему — вместе — они могут быть настоящей головной болью для разработчиков.
     У мутаций плохая репутация, но они не обязательно плохи сами по себе. На самом деле, если вы создаете динамическое веб-приложение, в какой-то момент оно должно измениться. Вот буквальное значение слова «динамический»! Это означает, что где-то в вашем коде должны быть какие-то мутации. Сказав это, чем меньше мутаций, тем более предсказуемым будет ваш код, что упрощает его поддержку и снижает вероятность возникновения каких-либо ошибок.
     Особенно токсичной комбинацией является копирование по ссылке и мутации. Это может привести к побочным эффектам и ошибкам, о которых вы даже не подозреваете. Если вы мутируете объект, на который ссылается другая переменная в вашем коде, это может вызвать множество проблем, которые будет трудно отследить. Суть в том, чтобы попытаться свести использование мутаций к минимуму и отслеживать, какие объекты были мутированы.
     В функциональном программировании чистая функция — это функция, которая не вызывает никаких побочных эффектов, а мутации — одна из основных причин побочных эффектов.
     Золотое правило — избегать копирования каких-либо объектов по ссылке. Если вы хотите скопировать другой объект, используйте оператор распространения, а затем внесите любые изменения сразу после создания копии.
     Далее мы рассмотрим мутации массивов в JavaScript.
      Не забудьте ознакомиться с моей новой книгой  Learn to Code with JavaScript , если вы хотите быстро освоить современный JavaScript. Вы можете прочитать первую главу бесплатно. И, пожалуйста, обращайтесь в Twitter, если у вас есть какие-либо вопросы или комментарии! 
     Поделиться этой статьей 
     
     Даррен Джонс
     Даррен Джонс — программист-самоучка, увлекающийся программированием на JavaScript, Haskell и Ruby. Он является автором книг «Учитесь кодировать с помощью JavaScript», «JavaScript: Novice to Ninja» и «Jump Start Sinatra».

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *