Press "Enter" to skip to content

Optional Chaining Operator in JavaScript


good Monday morning today we are going

to talk about the optional chaining

operator in JavaScript

I am MP J’s and you are watching

[Music]

all right so what does this optional

chaining operator look like let’s have a

look at that first all right so we have

an object here called user which has one

property called name and that is

fluffykins and here we are a psych

rating variable called the zip code and

here we’re kind of trained access a

property that does not exist on the user

an address and then we in turn will try

to access an another property that does

not exist only non-existent object

called zip code so let’s say that we

have users that some of them have names

some of them also have addresses and if

we use the optional chaining operator

this means that zip code here would be

undefined and if we didn’t have this we

didn’t have this in choose that then

this code would actually immediately

break that’s me let me actually just

execute that start up our phone there we

go and you see that cannot read

properties set or undefined now you

might notice here that these go red and

that is because unless you’re watching

this from the future this does not exist

in JavaScript quite yet the optional

chaining operator is a proposal for

JavaScript it’s at stage 1 and there are

four stages however I do think that this

is likely to be implemented because it’s

an obviously useful feature it already

exists in c-sharp also you can use this

already today using battle and you can

find a link to how to do that in the

episode description unless you are

watching this from the future all right

so why does this exist what’s the point

of this all right so let’s think about

the problem here we have we need to

access

says the zip code of our users but the

problem is that some users don’t have an

address which means that we get these

cannot read properties zip of undefined

errors oh can I make an interesting

observation here this problem only

exists because in JavaScript and many

languages variables and properties can

be not or undefined or nil or whatever

you would like to call them they can be

like set to point to nothing and that is

what creates problems like this and

languages like rust for example thus

completely away with the concept of null

in order to avoid these kinds of

problems sure but javascript does have

this problem so we need to deal with it

somehow

all right um maybe we can solve it with

a logic expression fine that works but

like you see it’s it’s it’s very noisy

it’s it’s very verbose that’s true maybe

oh I think this is a great example of

why nested ternary operators or so hard

to read I just look at this and I just

feel the ulcer growing in my stomach hey

no problem let’s solve it with a

I think this is also very noisy it has

it also has his own scopes so we have to

do this weird mutable variable here we

can’t use Const anymore

also let’s delete this comment here we

don’t need that now that we’re using oh

I know what we could do please don’t

write a light I’ll write a library

ah that wasn’t too much code actually Oh

for the love oh end using recursion

always makes me feel so smart literally

thousands of years of developer time

must have been wasted on writing this

function fine I’ll use a third-party

all right now it’s such a nice library I

feel like it’s weird that the syntax

here is reversed from the function that

we wrote earlier like the properties

come first and they come as an array and

the second argument here is the the

object why why is it like that

oh the benefit of that is that it allows

us to carry it with Rhonda hang on I’ll

so you see here that we can reuse get

sip in multiple places in our app

because of their their the Korean fine

but wouldn’t it be cool if something

like Graham that part was built into the

okay so apart from the fact this does

not exist yet I think that this is a

really nice solution it’s a lot shorter

than all the other solution including

the little library that we wrote just to

solve this problem yeah but is it really

all that much shorter mmm it’s shorter

but we’re still talking about

introducing a whole new language feature

here if we add a new language feature

for every little thing that we want to

solve in JavaScript we we’re gonna end

up with a language that has a very steep

learning curve one of the nicest things

about javascript is that there are and

to manage language constructs to learn

is the optional chaining operator a

useful feature that is worth the

complexity it adds to the language or is

it just cuddling with these c-sharp

developers post a comment down below or

if you are a patron you can check out

the dedicated discussion topic for this

episode on the Fun Fun forum right here

or in the link in the episode

description if you are new welcome you

have just watched an episode of fun fun

function I release these every Monday

morning o 800 G of T if you are

forgetful you can subscribe here so that

you don’t miss it or do check out

another episode right now by clicking

here I am mvj until next Monday morning State

Please follow and like us: