{"id":16765226,"url":"https://github.com/devlato/proposal-ternary-placeholder","last_synced_at":"2026-01-02T23:09:28.089Z","repository":{"id":68309298,"uuid":"221338463","full_name":"devlato/proposal-ternary-placeholder","owner":"devlato","description":"Enhanced ternary operator proposal for EcmaScript / JavaScript","archived":false,"fork":false,"pushed_at":"2019-11-13T02:38:37.000Z","size":2,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-22T23:26:56.081Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devlato.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-13T00:27:06.000Z","updated_at":"2019-11-13T02:38:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"c0d37b8c-5b6c-4458-a764-cb65a5348f1a","html_url":"https://github.com/devlato/proposal-ternary-placeholder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlato%2Fproposal-ternary-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlato%2Fproposal-ternary-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlato%2Fproposal-ternary-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlato%2Fproposal-ternary-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devlato","download_url":"https://codeload.github.com/devlato/proposal-ternary-placeholder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243859931,"owners_count":20359616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T05:28:48.675Z","updated_at":"2026-01-02T23:09:28.083Z","avatar_url":"https://github.com/devlato.png","language":null,"readme":"# proposal-ternary-placeholder\n\nEnhanced ternary operator proposal for EcmaScript / JavaScript\n\n\n## Motivation\n\nThe 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.\n\nFor example,\n\n```js\nfunction X() {\n  return x?.y?.z ? doSomethingWithValue(x?.y?.z) : null;\n}\n```\n\nThat looks okay, but when `x?.y?.z` require computations, we've got a problem:\n\n```js\nfunction X() {\n  return x?.y?.z\n    ? doSomethingWithValue(x?.y?.z)\n    : null;\n}\n```\n\nObviously, we don't want to recompute z again before passing it in `doSomethingWithValue`.\n\nSo instead of the ternary operator, we have to write a bit more verbose code:\n\n```js\nfunction X() {\n  const result = x?.y?.z;\n  \n  return result\n    ? doSomethingWithValue(x?.y?.z)\n    : null;\n}\n```\n\nThat still looks okay, but if instead of `z`, there is a function that can return a nullable result, it gets a lot more verbose:\n```js\nconst Configuration = {\n  Component: ({ value }) =\u003e value ? \u003cSomeAnotherComponent value={value} /\u003e : null);\n};\n\n\nconst OneMoreComponent = () =\u003e {\n  const Component = Configuration?.Component;\n  const component = Component ? \u003cComponent /\u003e : null;\n  \n  return component \n    ? \u003cdiv className=\"example-wrapper\"\u003e{component}\u003c/div\u003e\n    : null;\n};\n```\n\nWhat 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:\n\n```js\nconst Configuration = {\n  Component: ({ value }) =\u003e value ? \u003cSomeAnotherComponent value={value} /\u003e : null);\n};\n\nconst OneMoreComponent = () =\u003e Configuration?.Component \n  ? \u003cdiv className=\"example-wrapper\"\u003e\u003c$it /\u003e\u003c/div\u003e\n  : null;\n```\n\nAnd that ends up having a lot more compact, neat and readable code.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlato%2Fproposal-ternary-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevlato%2Fproposal-ternary-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlato%2Fproposal-ternary-placeholder/lists"}