I've been doing a lot of code likes this in javascript
if (params && params.profile && params.profile.address && params.profile.address.default)
where I have to check for each optional, it gets pretty tedious. Is there a better way in javascript that's similar to how swift would deal with optionals, e.g.
if let checked = params?.profile?.address?.default?
Optional chaining has now been added to the language using the same ?. syntax as Swift, so I recommend doing it that way unless you need to support older browser versions.
If you do, I've written a function that handles this:
function getSafe (func) {
try {
return func()
} catch (e) {
if (e instanceof TypeError) {
return undefined
} else {
throw e
}
}
}
Call it like this:
if (getSafe(() => params.profile.address.default))
This works because by wrapping it in an anonymous function, it isn't evaluated until the try/catch block, which will then catch the error and return undefined if any of the parent properties are undefined.
Checking whether e is a TypeError prevents it from swallowing any other errors the function might throw so those can still be handled as needed. If you want it to just return undefined on any error, you can remove that part:
function getSafeNoErrors (func) {
try {
return func()
} catch {
return undefined
}
}
There is no such operator in native JS.
However, there is a Babel plugin that will accomplish that, please check https://github.com/davidyaha/ecmascript-optionals-proposal
Also, please refer to Null-safe property access (and conditional assignment) in ES6/2015 for more references
You can now directly use ?. (Optional Chaining) inline to safely test for existence. All modern browsers support it.
If a property exists, ?. proceeds to the next check, or returns the valid value. Any failure will immediately short-circuit and return undefined.
const example = {a: ["first", {b:3}, false]}
example?.a // ["first", {b:3}, false]
example?.b // undefined
// Dynamic properties ?.[]
example?.a?.[0] // "first"
example?.a?.[1]?.a // undefined
example?.a?.[1]?.b // 3
// Functions ?.()
null?.() // undefined
validFunction?.() // result
(() => {return 1})?.() // 1
// DOM Access
domElement?.parentElement?.children?.[3]?.nextElementSibling
If you do not check a case, the left-side property must exist. If not, it will throw an exception.
example?.First // undefined
example?.First.Second // Uncaught TypeError: Cannot read property 'Second' of undefined
?. Browser Support - 82%, Oct 2020
Node Support - 14+
function optionalChaining(obj, chain) {
return chain
.split('.')
.reduce(function(acc, val) {
return acc ? acc[val] : undefined;
}, obj);
}
var user = {
address: {
street: 'No.969 West WenYi Road',
},
a: { b: { c: 2 } },
}
optionalChaining(user, 'address.street'); // 'No.969 West WenYi Road'
optionalChaining(user, 'a.b.c') // 2
The function can simulate optional chaining.
Yes, there's one. In ES2020 they've added optional chaining and optional function invocation.
const person = {
name: "Someone",
age: 28
}
console.log(person?.name) // "Someone"
console.log(person?.["age"]) // 28
person?.getAge?.() // no errors, just undefined
Just to add to the answer above you can now install this babel plugin straight from NPM:
https://www.npmjs.com/package/babel-plugin-transform-optional-chaining
obj?.prop // optional static property access
obj?.[expr] // optional dynamic property access
func?.(...args) // optional function or method call
Notes:
In order to allow foo?.3:0 to be parsed as foo ? .3 : 0 (as required for backward compatibility), a simple lookahead is added at the level of the lexical grammar, so that the sequence of characters ?. is not interpreted as a single token in that situation (the ?. token must not be immediately followed by a decimal digit).
https://github.com/tc39/proposal-optional-chaining
Also worth checking out:
