javascriptarraystypescriptfunctionoptional-chaining

How can I use optional chaining with arrays and functions?


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?


Solution

  • 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?.();