Logical assignment in JS

May 16, 2020

Логические присваивания в движке V8.4

Уже доступен в браузерах и Node.js под флагами новый синтаксис логических выражений с присваиванием. Язык все пухнет и разрастается. Для опытных разработчиков это будет удобно, для новичков - это будет отвал башки. Про что собственно речь?

Есть такое предложение, которое уже на Stage 3, которое декларирует следующее: вместо того, чтобы писать код вида:

// Display a default message if it doesn’t override anything.
// Buggy! May cause inner elements of msgElement to
// lose focus every time it’s called.
function setDefaultMessageBuggy() {
msgElement.innerHTML = msgElement.innerHTML || ‘<p>No messages<p>’;
}

Мы так уже привыкли писать испокон веков и вроде бы все ок, но в данном примере вроде как есть проблемы производительности, так как будет присвоено в элемент значение самого элемента, что может вызвать репаинт, потому что в результате в msgElement будут удалены все внутренние элементы из DOM дерева, а затем присвоены заново.

Новый синтаксис помимо короткой записи будет так же оптимизирован:

// Display a default message if it doesn’t override anything.
// Only assigns to innerHTML if it’s empty. Doesn’t cause inner
// elements of msgElement to lose focus.
function setDefaultMessage() {
msgElement.innerHTML ||= ‘<p>No messages<p>’;
}

Ну и в целом такая запись короче, что повлечет за собой сокращение кода на N байт.

Варианты логических присваиваний:

// “Or Or Equals” (or, the Mallet operator :wink:)
a ||= b;
a || (a = b);
// “And And Equals”
a &&= b;
a && (a = b);
// “QQ Equals”
a ??= b;
a ?? (a = b);

Поддержка

Фича есть в бабаеле, по флагами в Chrome, Firefox, Safari и в Node.js под флагом —harmony-logical-assignment .

Материалы по теме

💬 Обсуждение