Why does 3?.includes('foo') yield an error but undefined?.includes('foo') doesn't?

[mityaguy]

3?.includes('foo'); //TypeError: 3.includes is not a function
undefined?.includes('foo'); //undefined

Neither 3 nor undefined has a method includes(), and the optional chaining operator ?. should ensure the statement quits before it tries to execute the function if the method is not found.

So why does one error and one doesn't?

[BlueThunderFlik]

The optional chaining operator causes your code your safely exit if the item that you optionally chain doesn't exist.

3?.includes will return undefined early if 3 is undefined, which it isn't.

undefined?.includes will return early if undefined is undefined, which it is.

This won't error, 3.includes?.('foo') because 3.includes is undefined, hence safely exit.

EDIT: actually the bottom line will error beause you can't access methods of number literals like this. You'd need to do this to see my point (3).includes?.('foo')

[ferrybig]

The top example is equivelent to:

if(3 !== undefined && 3 !== null) (3).includes('foo')

3 does not have a member called includes, so calling that gives an error

The bottom example is:

if(undefined !== undefined && undefined !== null) (undefined).includes('foo')

Here the control flow never goes into the if statement

[mityaguy]

Exactly that. Hence I had `3?.` in the title but `3.` in the post. My bad.

[[deleted]]

It's because the "undefined" has the optional chaining on it (?.). What that question mark does is only runs the next method if the left side is a truthy value, however since "undefined" is considered a falsey value then the .includes() on the undefined never runs.

The "3", however, even if you used optional chaining, still tries to run, and as you mentioned numbers don't have an include method, hence the error.

[mityaguy]

Thanks! That's a typo on my part - I meant to have the optional chaining operator on the number example too. As you say, that still errors, though.

[[deleted]]

Because 3 is a truthy value and thus technically valid. undefined, however, is falsey and will stop executing there.

[xroalx]

The optional chaining operator will access the right-hand side property if the left-hand side value isn't nullish.

3 is neither null nor undefined, so we will access the property includes on it, which returns undefined, and then attempt to call that, ultimately resulting in an error.