167

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?

mikemaccana
  • 94,893
  • 84
  • 350
  • 433
Black Mamba
  • 11,092
  • 6
  • 67
  • 93

6 Answers6

338

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?.();
CertainPerformance
  • 313,535
  • 40
  • 245
  • 254
  • 2
    This also works for Javascript (since 2020 I think). Similarly, to call a function if it isn't `null` or `undefined`, you can also use `foo?.()` – Luke Vo Aug 16 '20 at 19:22
23

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 .

Black Mamba
  • 11,092
  • 6
  • 67
  • 93
11

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+

Luke Vo
  • 14,925
  • 19
  • 92
  • 153
2

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"
Pavel
  • 480
  • 5
  • 19
  • That was funny. It was a general question. What if you want [0].key you'll get error cannot read property key of undefined am I right? I had to frame the question it was meant to be used at some different place – Black Mamba Jul 09 '20 at 16:55
  • The question has a generic title, but the problem described is very specific. Apart from that, you are explaining optional chaining on the example where it is not needed. I don't find this funny at all. – Pavel Jul 14 '20 at 07:47
  • I find it funny the way you're approaching it if you go by the upvotes I think it's serving the purpose of you have any suggestion I'll be happy to accept the changes – Black Mamba Jul 14 '20 at 08:55
2

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.

LastM4N
  • 1,457
  • 11
  • 18
-1

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)

Vihan Gammanpila
  • 103
  • 6