10 фишек из javascript, которые помогут писать более качественный код на react

Присвоения примитивных и ссылочных типов

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


JavaScript всегда использует присвоение по значению

И это очень важно: когда присваиваемое значение является одним из 5 JavaScript’овых примитивов (Boolean, null, undefined, String и Number) — присваивается фактическое значение. Однако, когда присваиваемое значение является типом Array, Function или Object, присваивается ссылка на объект в памяти

Например, в коде ниже переменной присваивается значение . Т. к. является примитивом (String), то переменной присваивается строковое значение , и она может рассматриваться как отдельная (независимая) переменная. Соответственно, изменения никак не отразятся на .

А теперь попробуем то же самое с типом .

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

Строковый тип (string)

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

let msg1 = "строка 1";
let msg2 = 'строка 2';
let msg3 = `строка 3`;

Двойные или одинарные кавычки являются «простыми», между ними нет разницы в JavaScript. Обратные кавычки (апострофы) имеют «расширенный функционал» и были введены в ES6. Они позволяют встраивать выражения в строку, заключая их в ${…}. Например, так:

let msg3 = `Значение a = ${a}`;

Здесь вместо ${a} будет подставлено значение переменной a и в консоле увидим «Значение a = 5». Вместо переменной можно записать любое выражение языка JavaScript:

let msg3 = `Значение a = ${1+2}`;

Получим строку «Значение a = 3». Все это работает только с обратными кавычками. Если их заменить на простые, то никакой подстановки не произойдет:

let msg3 = 'Значение a = ${a}';

Тем, кто знаком с другими языками программирования следует знать, что в JavaScript нет типа данных для отдельного символа (типа char). Здесь есть только строки и даже один символ – это строка из одного символа.

А как быть, если мы хотим в строке записать кавычки? Например, так:

let msg1 = "строка "привет"";

Есть несколько способов это сделать. Первый – заменить двойные кавычки всей строки на одинарные:

let msg1 = 'строка "привет" ';

Второй способ – использовать так называемое экранирование символов:

let msg1 = "строка \"привет\"";

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

let msg1 = "строка \\";

Параметры по умолчанию


Можно указывать параметры по умолчанию через равенство , например:

Параметр по умолчанию используется при отсутствующем аргументе или равном , например:

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

Параметры по умолчанию могут быть не только значениями, но и выражениями.

Например:


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

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

WeakMap

Первое его отличие от в том, что ключи в должны быть объектами, а не примитивными значениями:

Теперь, если мы используем объект в качестве ключа и если больше нет ссылок на этот объект, то он будет удалён из памяти (и из объекта ) автоматически.

Сравните это поведение с поведением обычного , пример которого был приведён ранее. Теперь существует только как ключ в и может быть удалён оттуда автоматически.


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

В присутствуют только следующие методы:

К чему такие ограничения? Из-за особенностей технической реализации. Если объект станет недостижим (как объект в примере выше), то он будет автоматически удалён сборщиком мусора. Но нет информации, в какой момент произойдёт эта очистка.

Решение о том, когда делать сборку мусора, принимает движок JavaScript. Он может посчитать необходимым как удалить объект прямо сейчас, так и отложить эту операцию, чтобы удалить большее количество объектов за раз позже. Так что технически количество элементов в коллекции неизвестно. Движок может произвести очистку сразу или потом, или сделать это частично. По этой причине методы для доступа ко всем сразу ключам/значениям недоступны.

Но для чего же нам нужна такая структура данных?

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

Теперь подробнее рассмотрим оператор присваивания. Его не стоит путать со знаком = из математики. Он выполняет присваивание переменной, записанной слева от него, значения (или переменной), записанной справа. Например:

let a = 4;

Этот оператор имеет один из самых низких приоритетов (равный 3). Именно поэтому, когда переменной что-либо присваивают, например, x = 2 * 2 + 1, то сначала выполнится арифметика, а уже затем происходит присваивание.

Также возможно присваивание по цепочке:

let a, b, c;
a = b = c = 2 + 2;
console.log( a, b, c );

Такое присваивание работает справа-налево. Сначала вычисляется самое правое выражение 2 + 2, и затем оно присваивается переменным слева: c, b и a. В конце у всех переменных будет одно значение.

Далее, оператор = возвращает значение. Например, при присваивании x=value значение value сначала записывается в x, а затем возвращается. В частности, именно поэтому возможна такая запись:

let a, b = 1;
let c = 3 - (a = b + 1);
console.log( a, b, c );

Здесь сначала переменной a будет присвоено значение 1+1=2, далее оно возвращается оператором присваивания и получаем вычисление разности 3-2=1. В итоге имеем значения a=2, b=1, c=1.

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


С этим читают