https://github.com/devlato/proposal-ternary-placeholder
Enhanced ternary operator proposal for EcmaScript / JavaScript
https://github.com/devlato/proposal-ternary-placeholder
Last synced: 4 months ago
JSON representation
Enhanced ternary operator proposal for EcmaScript / JavaScript
- Host: GitHub
- URL: https://github.com/devlato/proposal-ternary-placeholder
- Owner: devlato
- Created: 2019-11-13T00:27:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-11-13T02:38:37.000Z (over 6 years ago)
- Last Synced: 2025-01-22T23:26:56.081Z (over 1 year ago)
- Size: 1.95 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# proposal-ternary-placeholder
Enhanced ternary operator proposal for EcmaScript / JavaScript
## Motivation
The ternary operator is a very useful thing which sometimes helps make code a lot easier to understand. However, sometimes it doesn't cover all needs, and instead, we have to write a bit more verbose code. Often that happens when we need to modify the value that we check in the condition part.
For example,
```js
function X() {
return x?.y?.z ? doSomethingWithValue(x?.y?.z) : null;
}
```
That looks okay, but when `x?.y?.z` require computations, we've got a problem:
```js
function X() {
return x?.y?.z
? doSomethingWithValue(x?.y?.z)
: null;
}
```
Obviously, we don't want to recompute z again before passing it in `doSomethingWithValue`.
So instead of the ternary operator, we have to write a bit more verbose code:
```js
function X() {
const result = x?.y?.z;
return result
? doSomethingWithValue(x?.y?.z)
: null;
}
```
That still looks okay, but if instead of `z`, there is a function that can return a nullable result, it gets a lot more verbose:
```js
const Configuration = {
Component: ({ value }) => value ? : null);
};
const OneMoreComponent = () => {
const Component = Configuration?.Component;
const component = Component ? : null;
return component
?
{component}
: null;
};
```
What I propose is to make a special marker variable $if available in ternary operator branches, which evaluates to the condition expression result. In that case, the code from the example could be rewritten in the following (a lot more simple) way:
```js
const Configuration = {
Component: ({ value }) => value ? : null);
};
const OneMoreComponent = () => Configuration?.Component
?
<$it />
: null;
```
And that ends up having a lot more compact, neat and readable code.