An ECMAScript Language Feature that I’m looking forward to is Declarations in Conditionals. It adds the capability to declare variables inside conditional statements. Let’s take a look …
~
Setting the Scene
Say you want to iterate over an array which might be tucked away inside an object. To do so, you’d most likely first check for that variable’s existence using a simple if
if (user.meta.interests) {
for (let interest of user.meta.interests) {
// …
}
}As we’re now typing user.meta.interests twice in our code you might declare an intermediary variable, and use that further down in your code:
let interests = user.meta.interests;
if (interests) {
for (let interest of interests) {
// …
}
}But now you have a nasty side-effect: you’re loitering the scope with this extra interests variable. This is quite useless, as you’re only using it inside the if statement.
💁♂️ To make it totally failsafe, you might also want to add some Optional Chaining in there and check if interests is iterable, but that’s beyond the scope of this post.
~
Hello “Declarations in Conditionals”
With the “Declarations in Conditionals” proposal we can keep this extra interests variable, yet without loitering the outer scope. We do this by declaring the variable directly inside the conditional (e.g. if statement), like so:
if (let interests = user.meta.interests) {
for (let interest of interests) {
// …
}
}⚠️ Note that this is an assignment right there, not an equality check!
With that one line the interests variable:
- will be declared
- will have a value assigned to it
- will be checked for being falsy or not
Scope-wise the interests variable will have its scope limited local to the conditional (e.g. only visible inside the if).
The proposal limits declarations to use either const or let; declarations in conditionals with var are currently not allowed.
💡 You might not 100% realize it, but you’re already doing this kind of thing when using a for loop. Inside its initialization part (e.g. its first part) you are also declaring variables.
for (let i = 0; i < 5; i++) {
console.log(i);
}☝️ Did you know that you can declare more than one variable there, separated by a comma? In the example below I declare an extra variable len right after declaring i:
const cars = ['Ford', 'Mercedes', 'BMW'];
for (let i = 0, len = cars.length; i < len; i++) {
console.log(cars[i]);
}🤔 What about the scope of len you might ask? Variables declared using let are scoped to the statement (e.g. local to the loop). Variables declared using var get hoisted. And oh, it’s not allowed to declare variables using const here.
~
So, when can we use this?
The proposal is currently Stage-1, so it still has a long way to go before it can become an official part of the standard — if it ever will be.
💁♂️ Stage-1?
The Technical Committee which is concerned with the standardization of ECMAScript (i.e. TC39) has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature.
Stage-1 is the Proposal stage. It signals that the committee is showing interest in the proposal and that it is seeking further investigation on how to tackle it. At this stage the proposal is subject to heavy changes. It is only when a proposal reaches Stage 4 that it is ready to become part of the ECMAScript Specification.
As it’s still Stage-1, it can change quite a lot before it to be finished. And I’m quite sure it will change, as right now:
- It only allows declaring one variable.
- It only checks for values being falsy or not.
These two feature are currently listed under “Future Work” of the proposal, and it looks like this:
if (let x = 1, y = 2; x || y) {
// …
}Must say I’m pretty curious how this one will evolve, as I’m already quite excited about it: it’s one of those small additions that will have a pretty big impact on how I write my code.
If you have an addition to this proposal, feel free to join the discussion in the Declarations in Conditionals GitHub repository.
~
Thank me with a coffee.
I don\'t do this for profit but a small one-time donation would surely put a smile on my face. Thanks!
To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.