Javascript equal to operator shorthand for chaining function like concatenation syntax

💡 Ideas
1

Currently, javascript assignment statements for an adding/chaining any function to the right-hand side looks like this.

Before

const str = "HELLO";
str = str.toLowerCase();

I am proposing a similar syntax to concatenation += but with ".=" like this

After

const str = "HELLO";
str .= toLowerCase()

The usual chaining for adding further function will be like this

Before

str = str.toLowerCase().split(" ")

After

str.= toLowerCase().split(" ")

Advantage

This might not affect performance but it will help especially when the variable name is long.

It will be used for similar purpose as concatenation but for functions

2 Likes
2

This is an interesting idea, but my reservation is that it doesn’t unlock much for developers and overrides a couple of conventions in js that will make code more error prone. I think my other comment here is that this is more about a solution than about a problem, and the problem is not well argued for, Starting with a well defined problem is a good idea before starting to think about syntax.

About the idea itself.
+= Behaves the same as any operator. This proposal results in the right hand side doing an automatic property access. This might be difficult for beginners, and might make code more error prone in case that a helper function and method share a name. Long names being mutated don’t feel like a good argument here, as that itself is a sign that something might be improved in the user code. Mutability is also error prone, and this encourages mutating data.

I’m not sure what you mean about concatenation of functions, unless this is the same thing as what you mention above. so I will skip that.

Adding new syntax means removing error space. Removing error space means that unintentional behavior might not throw resulting in weird bugs that are hard to track. If we add new syntax, it should stand on its own weight.

I don’t think there is a strong argument to develop this yet, specifically because it behaves so differently from property access and the += operator. Perhaps you can describe the problem you are trying to solve a bit more, rather than starting with the solution? This might result in a promising proposal ideal.

3

Thanks for your detail review,

As a general, this proposal won't solve much of the problem or any problem but it might be helpful for shortcode writing, That's why I don't have any particular problem case to show here.

One problem I can mention here is about the variable name lengths. Usually, js variables name gets bigger as the project goes deeper (at least for me :sweat_smile: ), so it may align there.

var someReallyReallyLongVariableName;

Currently, if we want to work with this var, then we need to write it twice on LHS and RHS

someReallyReallyLongVariableName = someReallyReallyLongVariableName.toLowerCase()

Now, this proposal will help here,

someReallyReallyLongVariableName .= toLowerCase()

Or for example with objects

propTree = {
 props : {
   props2 : {
     props3 : {
        props4 : {
            props5 : "ends here"
      } 
    }
  }
 }
}

Now in order to assign the value of props5 to props4, we are doing this

propTree.props.props2.props3.props4 = propTree.props.props2.props3.props4.props5

What I am proposing is to change it to something like this

propTree.props.props2.props3.props4 .= props5

We can see these kinds of operations more in forms with more number of fields in general

What I meant by concatenation operator or any operator chaining was that this proposal will behave like those but in different space (here it will be for function chaining instead of strings or numbers or any other basic datatypes)

4

cc @yulia

5

I came here to suggest the same and stumbled upon this. I am interested in seeing and using syntax like in this proposal.

This would only be syntactic sugar but is a very common pattern, and follows the same idea as the logical assignment operators (which are almost in the spec!):

x = x || y;

can now be expressed as:

x ||= y;

Not a massive byte gain, and conciseness is debatable.

Mutability is not an issue here unless I am missing something.

let x = [1,2,3,10,20,30];
x = x.filter(x => x >= 10); // [10,20,30]

x .= filter(x => x >= 10); // [10,20,30]

The pipeline operator could also be used similarly if that ever comes to fruition, but that's another story.