We Keep Coding

How to check for empty array result in single line filter method, I want to add validation [duplicate]

I'm trying to use optional chaining with an array instead of an object but not sure how to do that:
Here's what I'm trying to do myArray.filter(x => x.testKey === myTestKey)?[0].
Also trying similar thing with a function:
let x = {a: () => {}, b: null}
console.log(x?b());
But it's giving a similar error - how can I use optional chaining with an array or a function?

You need to put a . after the ? to use optional chaining:
myArray.filter(x => x.testKey === myTestKey)?.[0]
Playground link
Using just the ? alone makes the compiler think you're trying to use the conditional operator (and then it throws an error since it doesn't see a : later)
Optional chaining isn't just a TypeScript thing - it is a finished proposal in plain JavaScript too.
It can be used with bracket notation like above, but it can also be used with dot notation property access:
const obj = {
prop2: {
nested2: 'val2'
}
};
console.log(
obj.prop1?.nested1,
obj.prop2?.nested2
);
And with function calls:
const obj = {
fn2: () => console.log('fn2 running')
};
obj.fn1?.();
obj.fn2?.();

Just found it after a little searching on the what's new page on official documentation
The right way to do it with array is to add . after ?
so it'll be like
myArray.filter(x => x.testKey === myTestKey)?.[0]
I'll like to throw some more light on what exactly happens with my above question case.
myArray.filter(x => x.testKey === myTestKey)?[0]
Transpiles to
const result = myArray.filter(x => x.testKey === myTestKey) ? [0] : ;
Due to which it throws the error since there's something missing after : and you probably don't want your code to be transpilled to this.
Thanks to Certain Performance's answer I learned new things about typescript especially the tool https://www.typescriptlang.org/play/index.html .

ECMA 262 (2020) which I am testing on Edge Chromium 84 can execute the Optional Chaining operator without TypeScript transpiler:
// All result are undefined
const a = {};
console.log(a?.b);
console.log(a?.["b-foo-1"]);
console.log(a?.b?.());
// Note that the following statements throw exceptions:
a?.(); // TypeError: a is not a function
a?.b(); // TypeError: a?.b is not a function
CanIUse: Chrome 80+, Firefox 74+

After a bit of searching the new page in the official documentation, it was discovered.
You need to put a . after the ? to use optional chaining.
So it will be so,
myArray.filter(x => x.testKey === myTestKey)?.[0]
Used only ? Makes the compiler think that you are trying to use a conditional operator (then it causes an error because it doesn't see a : later)

It's not necessary that the function is inside the object, you can run a function using optional chaining also like this:
someFunction?.();
If someFunction exists it will run, otherwise it will skip the execution and it will not error.
This technique actually is very useful especially if you work with reusable components and some components might not have this function.

Well, even though we figured out the correct syntax, the code doesn't make much sense to me.
The optional chaining in the code above is making sure, that the result of myArray.filter(x => x.testKey === myTestKey) is not null and not undefined (you can have a look at the TS output). But it is not possible anyway, because the result of the filter method is always an array. Since JavaScript doesn't throw "Array bounds exceeded", you are always safe when you try to access any index - you will get undefined if this element doesn't exist.
More example to make it clear:
const myArray: string[] = undefined
console.log(myArray.filter(x => x)?.[0]) //throws Cannot read property 'filter' of undefined
//in this example the optional chaining protects us from undefined array
const myArray: string[] = undefined
console.log(myArray?.filter(x => x)[0]) //outputs "undefined"

JS optional chaining clarification

I found a really great use case for optional chaining in my react project. I have used it slightly before but this line of code has made me a bit confused.
I have a table that is sortable.
One of the columns shows success or failure depending on if failed_date is null or a date.
sortedRows = sortedRows.sort((a, b) => a?.failed_date?.localeCompare(b?.failed_date));
But What confuses me is which value does the '?.' check is nullish?
Does a.failed_date?.localeCompare() check if failed_date?. is null/undefined or does it check if ?.localeCompare() is null/undefined?
Same with b?.failed_date is it checking b to be nullish? or failed_date.
I think My confusion comes from looking at the Documentation
Because arr?.[50] checks if element 50 is nullish but obj.method?.() checks if the method is not nullish?
Looking at this second block of code (which I believe is now correct) a.failed_date may be nullish and won't do localeCompare if a.failed_date is null?
But what if a.failed_date is not null but b.failed_date is null?
Does localeCompare not care? I haven't gotten an error but I was using localeComapre(b?.failed_date)
sortedRows = sortedRows.sort((a, b) => a.failed_date?.localeCompare(b.failed_date));

Let's say you define variable like below
const variable = { value: 'test' };
then you want to access variable?.value it equals variable === null || variable === undefined ? undefined : variable.value.
Same with array.
Check typescript playground and see js output https://www.typescriptlang.org/play?#code/MYewdgzgLgBAhgJwXAnjAvDA2gXQNwBQBiyKA-AHRYCsADDkA

Basically, the ? in that context means optional chaining.
How it works is, for example, if you define an object like below, and you want to try and access the views property, it will throw an error.
const obj = { website: "stackoverflow.com", };
console.log(obj.views.toFixed(0)); // Error!
This is because you are trying to access a method off of undefined, which doesn't have anything.
To avoid this error, we can use optional chaining, like below.
const obj = { website: "stackoverflow.com", };
console.log(obj?.views?.toFixed(0)); // undefined
Optional chaining tells JavaScript to complete the method/read the key, but if it doesn't exist, instead of throwing an error, just return undefined.
It also works with arrays; the same way! If, say, index 78 doesn't exist, instead of throwing an error, it will just return undefined.
const arr = [1, 2, 3];
console.log(arr?.[78]?.toString());

To elaborate here, it is possible to stack multiple optional chaining operators as seen in OP's code a?.failed_date?.localeCompare(b?.failed_date)
In these cases, it is not a question of which object key value will be checked. The code will be evaluated from left to right and if any of the object values are nullish then undefined will be returned.
Refer to the documentation for further understanding
MDN Optional Chaining

Safely extracting property from object in Javascript

I have a this function:
const someVar = someOtherVar.pipe(
// filter((data) => data && !data.loading) // Works
filter(({ loading }) => !loading), // Doesn't work if data is Null
);
Now, As mentioned in comments the commented code works in every case, but I want to make it work the second way. There could be the case that data is null. So, I will be getting this error
TypeError: Cannot read property 'loading' of null
Is there any way to safely destructure JavaScript object?

Here is couple of options to make it work with your second option.
filter(x => x).filter(({ loading }) => !loading)
or
map(x => x || {}).filter(({ loading }) => !loading)
Both options may not be as efficient as your commented code, But these may give readability.

null is not an object, that's why you cannot safely destructure it :-) No, you cannot use destructuring here.
The closest-to-useful syntactical feature would be data => !data?.loading from the optional chaining proposal, but that's equivalent to !(data && data.loading) not data && !data.loading.

Chaining on an Array.find() in JavaScript

I am getting into the habit of, depending on the context, converting some of my for loops to use array.find(). In so doing, I'm wondering if there's a way I can chain another operator on after the .find() in order to limit how much I grab from the object.
For instance, see the following:
currentStage = customerDoc.history.find(h => h.completed === false);
currentStageName = currentStage.name;
Since all I really want from here is the value for "currentStage.name", is there a way I can get this by chaining on after my find(), to specify I just want this property? If not, is there another way to do this in one line?

Yes you can like this, notice the use of || {} to avoid exception in case the find returns undefined
currentStage = (customerDoc.history.find(h => h.completed === false) || {}).name
But IMO you should keep it like you have right now, it's readable and easy to maintain
currentStage = customerDoc.history.find(h => h.completed === false);
currentStageName = currentStage && currentStage.name;

You could use optional chaining (which is currently a stage 3 TC39 proposal and not yet implemented in browsers) but can be used right now using babel's plugin and use it as such :
const currentStageName = customerDoc.history.find(h => !h.completed)?.name;

Use short-circuit evaluation to have a default object in case nothing if found, and destructuring to get the property you want. If nothing is found, the result would be undefined:
const { name: currentStageName } = customerDoc.history.find(h => h.completed === false) || {};

you could also chain a .map onto the find results in order to limit and/or reshape what gets returned by wrapping it in an array (and using filter if no results are found), e.g.
currentStage = [customerDoc.history.find(h => h.completed === false)].filter(h => h != undefined).map(h => ({'name':h.name}))[0]

Lodash get vs. es6 fallback values?

How does Lodash compare to using the new ES6 optional arguments?
I have the following code:
location: {
latitude: response.pickupLocation.latitude || "",
longitude: response.pickupLocation.longitude || ""
},
With Lodash I know I could run:
latitude: get(response, 'pickupLocation.latitude', '')
Or alternatively I could create a function that takes in the object and path and always returns ''as the default fallback. Is there any advantage to using Lodash here other than the fact that the code would be shorter?

The advantage of _.get is, you omit continuing checks if a property exist, which would be necessary.
latitude: response && response.pickupLocation && response.pickupLocation.latitude || "",

For the latest browsers, or by using polyfills or transpiler, you could also use optional chaining and nullish coalescing operator like:
latitude: response?.pickupLocation?.latitude ?? ''

This has nothing to do with ES6, it is just the logical OR operator. "Optional arguments" sounds like you are relating to default parameters but these are used in function signatures.
Personally, I would stick with the logical OR as it does not require an external library. Also I would recommend to never use strings when you want to access object properties because it complicates refactoring, usage search, the optional use of TypeScript, and hinders code completion.
If you want to make sure, that no exception occurs when you access a property of a null type, you can use the approach described here:
getSafe(() => response.pickupLocation.latitude) || ''

Referring to #str's answer, if response does not have a pickupLocation property, this will result in a TypeError (Cannot read property latitude of undefined), regardless of the OR operator.
You could wrap this in a try-catch. Then you would return response.pickupLocation.latitude || fallback in try or fallback in a catch block.
This will not handle the defined by falsey values (imagine that response.pickupLocation.latitude is 0). This function will return a fallback value, not 0. This can be handled easily by checking typeof (typeof response.pickupLocation.latitude !== 'undefined' ? response.pickupLocation.latitude : fallback), however we are still talking about a hardcoded object path.
The same issue is presented on the accepted answer as well.
To handle this dynamically for any object path, you have to loop over a provided object, check for hasOwnProperty and peel off the nested properties by each iteration until you get to end of the specified path. Something like this:
const getSafe = (object, path, fallback) => {
const fragments = path.split('.')
let value
for (let i = 0; i < fragments.length; i++) {
if (!obj.hasOwnProperty(fragments[i])) {
return fallback;
}
value = object[fragments[i]];
}
return value;
}