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 .

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

tc39/proposal-logical-assignment
A proposal to combine Logical Operators and Assignment Expressions - tc39/proposal-logical-assignment



Profile picture

Written by Alexander Mayorov
Full Stack CTO