?? in optional chaining) and now we get more — logical assignment operators. Let’s check out how they can be used!
Or-Or-Equals is used to assign a value when one doesn’t exist:
let name; const defaultName = "Guest"; name ||= defaultName; // name >> "Guest" // Equivalent: name || (name = defaultName);
Question-Question-Equals assigns value when the value is undefined:
const j = 1; j??= 10 // j >> 1 x = undefined; x ??= 10 // x >> 10
And-And-Equals assigns value to the last in line when both are defined:
let name; const defaultName = "Guest"; name &&= defaultName; name >> undefined // Both have values let name = "David"; const defaultName = "Guest"; name &&= defaultName; // name >> "Guest" // Equivalent: name && (name = defaultName);
I do worry, at least in the short term, that this new syntax could be hard to maintain, but just like every other new language feature, we’ll get used to it!
Creating Scrolling Parallax Effects with CSS
Introduction For quite a long time now websites with the so called “parallax” effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a…
Multiple Background CSS Animations
CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don’t require additional elements. I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes…with…
Elegant Overflow with CSS Ellipsis
Overflow with text is always a big issue, especially in a programmatic environment. There’s always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were…