Learn how the question mark "?" in JavaScript provides syntactic sugar in three powerful ways. https://fireship.io/courses/javascript/

00:00 Ternary Operator
01:15 Optional Chaining
01:45 Nullish Coalescing 

Ternary https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Optional Chaining https://github.com/tc39/proposal-optional-chaining
Nullish Coalescing https://github.com/tc39/proposal-nullish-coalescing

#js #100SecondsOfCode

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T14:19:36.878Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
bf0e38e7-ff75-4517-9ece-831282d969d3
7bd73d278c7a2171004a7ba3d7e8bc8213a4eb30f3bb5aa73f3006edac4d4af3
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
The question mark.
It's one of the most powerful characters in the JavaScript universe, providing syntactic sugar in 3 awesome, yet totally unrelated ways.
First up, we have the ternary operator.
The word ternary literally means composed of 3 parts.
Using the question mark as our starting place, We add a condition on the left side, then on the right side, we add a value to assign when the condition is truthy.
But if the condition is falsy, we add a colon to assign a different value.
The operator is often used to replace a traditional if statement.
The code in a ternary expression is far more concise, But you might argue that it's much less readable than an if statement, and you might be right.
That is until you need to assign a variable.
A statement, like if, is code that does something.
It's imperative.
It begins with state, then as the program's executed, it mutates the state, and takes multiple lines of code just to assign a variable based on a simple condition.
The ternary operator on the other hand creates an expression, which means that it produces a value that we can then assign to a variable.
This code is declarative.
It describes the state of the variable as opposed to mutating it.
That's why we can use const here, but require let in the if Declarative code is awesome because it can also be used in function arguments, and in array, and object literals.
But the question Work isn't done there.
In 2020, an awesome new feature landed in JavaScript called optional chaining.
At some point, you've likely written code that calls an object property that does not exist, And when that happens, it triggers an error at runtime.
You could write some code that asserts a property exists before calling it, but this can get really ugly.
Nowadays, you can just insert a question mark between the property name and the period between the next property.
If the parent property is undefined, It'll just return undefined instead of throwing an error.
That's a truly life changing feature for the JavaScript developer, but the question mark has one more trick up its sleeve, Nullish coalescing.
In many cases, you may want to set a default value for a missing variable or property name.
You can easily do that with a logical or operator.
If the left side is falsy, then use the value on the right side.
But because JavaScript has a bunch of weird rules for what is truthy and falsy, you may get weird results.
Like an empty string or 0 being set to a default value because it resolves to falsie.
Instead of logical or, you can add a double question mark, which works just like logical or, except undefined and null are the only values that short circuit to the right side, making the behavior of your code much more predictable.
This has been the JavaScript question mark in 100 seconds.
If you wanna see more short videos like this, make sure to hit the like button and subscribe.
Thanks for watching, and I will see you in the next one.

Speaker 0: The question mark. It's one of the most powerful characters in the JavaScript universe, providing syntactic sugar in 3 awesome, yet totally unrelated ways. First up, we have the ternary operator. The word ternary literally means composed of 3 parts. Using the question mark as our starting place, We add a condition on the left side, then on the right side, we add a value to assign when the condition is truthy.

But if the condition is falsy, we add a colon to assign a different value. The operator is often used to replace a traditional if statement. The code in a ternary expression is far more concise, But you might argue that it's much less readable than an if statement, and you might be right. That is until you need to assign a variable. A statement, like if, is code that does something.

It's imperative. It begins with state, then as the program's executed, it mutates the state, and takes multiple lines of code just to assign a variable based on a simple condition. The ternary operator on the other hand creates an expression, which means that it produces a value that we can then assign to a variable. This code is declarative. It describes the state of the variable as opposed to mutating it.

That's why we can use const here, but require let in the if Declarative code is awesome because it can also be used in function arguments, and in array, and object literals. But the question Work isn't done there. In 2020, an awesome new feature landed in JavaScript called optional chaining. At some point, you've likely written code that calls an object property that does not exist, And when that happens, it triggers an error at runtime. You could write some code that asserts a property exists before calling it, but this can get really ugly.

Nowadays, you can just insert a question mark between the property name and the period between the next property. If the parent property is undefined, It'll just return undefined instead of throwing an error. That's a truly life changing feature for the JavaScript developer, but the question mark has one more trick up its sleeve, Nullish coalescing. In many cases, you may want to set a default value for a missing variable or property name. You can easily do that with a logical or operator.

If the left side is falsy, then use the value on the right side. But because JavaScript has a bunch of weird rules for what is truthy and falsy, you may get weird results. Like an empty string or 0 being set to a default value because it resolves to falsie. Instead of logical or, you can add a double question mark, which works just like logical or, except undefined and null are the only values that short circuit to the right side, making the behavior of your code much more predictable. This has been the JavaScript question mark in 100 seconds.

If you wanna see more short videos like this, make sure to hit the like button and subscribe. Thanks for watching, and I will see you in the next one.
The question mark. It's one of the most powerful characters in the JavaScript universe, providing syntactic sugar in 3 awesome, yet totally unrelated ways. First up, we have the ternary operator.
The word ternary literally means composed of 3 parts. Using the question mark as our starting place, We add a condition on the left side, then on the right side, we add a value to assign when the condition is truthy. But if the condition is falsy, we add a colon to assign a different value. The operator is often used to replace a traditional if statement. The code in a ternary expression is far more concise, But you might argue that it's much less readable than an if statement, and you might be right. That is until you need to assign a variable. A statement, like if, is code that does something. It's imperative. It begins with state, then as the program's executed, it mutates the state, and takes multiple lines of code just to assign a variable based on a simple condition. The ternary operator on the other hand creates an expression, which means that it produces a value that we can then assign to a variable. This code is declarative. It describes the state of the variable as opposed to mutating it. That's why we can use const here, but require let in the if Declarative code is awesome because it can also be used in function arguments, and in array, and object literals. But the question Work isn't done there.
programming
logic
logical reasoning
In 2020, an awesome new feature landed in JavaScript called optional chaining. At some point, you've likely written code that calls an object property that does not exist, And when that happens, it triggers an error at runtime. You could write some code that asserts a property exists before calling it, but this can get really ugly. Nowadays, you can just insert a question mark between the property name and the period between the next property. If the parent property is undefined, It'll just return undefined instead of throwing an error. That's a truly life changing feature for the JavaScript developer, but the question mark has one more trick up its sleeve, Nullish coalescing. In many cases, you may want to set a default value for a missing variable or property name. You can easily do that with a logical or operator. If the left side is falsy, then use the value on the right side. But because JavaScript has a bunch of weird rules for what is truthy and falsy, you may get weird results.
Like an empty string or 0 being set to a default value because it resolves to falsie. Instead of logical or, you can add a double question mark, which works just like logical or, except undefined and null are the only values that short circuit to the right side, making the behavior of your code much more predictable. This has been the JavaScript question mark in 100 seconds. If you wanna see more short videos like this, make sure to hit the like button and subscribe. Thanks for watching, and I will see you in the next one.
logic
logical reasoning
youtube
The question mark. It's one of the most powerful characters in the JavaScript universe, providing syntactic sugar in 3 awesome, yet totally unrelated ways. First up, we have the ternary operator. The word ternary literally means composed of 3 parts. Using the question mark as our starting place, We add a condition on the left side, then on the right side, we add a value to assign when the condition is truthy. But if the condition is falsy, we add a colon to assign a different value. The operator is often used to replace a traditional if statement. The code in a ternary expression is far more concise, But you might argue that it's much less readable than an if statement, and you might be right. That is until you need to assign a variable. A statement, like if, is code that does something. It's imperative. It begins with state, then as the program's executed, it mutates the state, and takes multiple lines of code just to assign a variable based on a simple condition. The ternary operator on the other hand creates an expression, which means that it produces a value that we can then assign to a variable. This code is declarative. It describes the state of the variable as opposed to mutating it. That's why we can use const here, but require let in the if Declarative code is awesome because it can also be used in function arguments, and in array, and object literals. But the question Work isn't done there. In 2020, an awesome new feature landed in JavaScript called optional chaining. At some point, you've likely written code that calls an object property that does not exist, And when that happens, it triggers an error at runtime. You could write some code that asserts a property exists before calling it, but this can get really ugly. Nowadays, you can just insert a question mark between the property name and the period between the next property. If the parent property is undefined, It'll just return undefined instead of throwing an error. That's a truly life changing feature for the JavaScript developer, but the question mark has one more trick up its sleeve, Nullish coalescing. In many cases, you may want to set a default value for a missing variable or property name. You can easily do that with a logical or operator. If the left side is falsy, then use the value on the right side. But because JavaScript has a bunch of weird rules for what is truthy and falsy, you may get weird results. Like an empty string or 0 being set to a default value because it resolves to falsie. Instead of logical or, you can add a double question mark, which works just like logical or, except undefined and null are the only values that short circuit to the right side, making the behavior of your code much more predictable. This has been the JavaScript question mark in 100 seconds. If you wanna see more short videos like this, make sure to hit the like button and subscribe. Thanks for watching, and I will see you in the next one.
The
the
question
question
mark.
mark
It's
it's
one
one
of
of
the
the
most
most
powerful
powerful
characters
characters
in
in
the
the
JavaScript
javascript
universe,
universe
providing
providing
syntactic
syntactic
sugar
sugar
in
in
3
3
awesome,
awesome
yet
yet
totally
totally
unrelated
unrelated
ways.
ways
First
first
up,
up
we
we
have
have
the
the
ternary
ternary
operator.
operator
The
the
word
word
ternary
ternary
literally
literally
means
means
composed
composed
of
of
3
3
parts.
parts
Using
using
the
the
question
question
mark
mark
as
as
our
our
starting
starting
place,
place
We
we
add
add
a
a
condition
condition
on
on
the
the
left
left
side,
side
then
then
on
on
the
the
right
right
side,
side
we
we
add
add
a
a
value
value
to
to
assign
assign
when
when
the
the
condition
condition
is
is
truthy.
truthy
But
but
if
if
the
the
condition
condition
is
is
falsy,
falsy
we
we
add
add
a
a
colon
colon
to
to
assign
assign
a
a
different
different
value.
value
The
the
operator
operator
is
is
often
often
used
used
to
to
replace
replace
a
a
traditional
traditional
if
if
statement.
statement
The
the
code
code
in
in
a
a
ternary
ternary
expression
expression
is
is
far
far
more
more
concise,
concise
But
but
you
you
might
might
argue
argue
that
that
it's
it's
much
much
less
less
readable
readable
than
than
an
an
if
if
statement,
statement
and
and
you
you
might
might
be
be
right.
right
That
that
is
is
until
until
you
you
need
need
to
to
assign
assign
a
a
variable.
variable
A
a
statement,
statement
like
like
if,
if
is
is
code
code
that
that
does
does
something.
something
It's
it's
imperative.
imperative
It
it
begins
begins
with
with
state,
state
then
then
as
as
the
the
program's
program's
executed,
executed
it
it
mutates
mutates
the
the
state,
state
and
and
takes
takes
multiple
multiple
lines
lines
of
of
code
code
just
just
to
to
assign
assign
a
a
variable
variable
based
based
on
on
a
a
simple
simple
condition.
condition
The
the
ternary
ternary
operator
operator
on
on
the
the
other
other
hand
hand
creates
creates
an
an
expression,
expression
which
which
means
means
that
that
it
it
produces
produces
a
a
value
value
that
that
we
we
can
can
then
then
assign
assign
to
to
a
a
variable.
variable
This
this
code
code
is
is
declarative.
declarative
It
it
describes
describes
the
the
state
state
of
of
the
the
variable
variable
as
as
opposed
opposed
to
to
mutating
mutating
it.
it
That's
that's
why
why
we
we
can
can
use
use
const
const
here,
here
but
but
require
require
let
let
in
in
the
the
if
if
Declarative
declarative
code
code
is
is
awesome
awesome
because
because
it
it
can
can
also
also
be
be
used
used
in
in
function
function
arguments,
arguments
and
and
in
in
array,
array
and
and
object
object
literals.
literals
But
but
the
the
question
question
Work
work
isn't
isn't
done
done
there.
there
In
in
2020,
2020
an
an
awesome
awesome
new
new
feature
feature
landed
landed
in
in
JavaScript
javascript
called
called
optional
optional
chaining.
chaining
At
at
some
some
point,
point
you've
you've
likely
likely
written
written
code
code
that
that
calls
calls
an
an
object
object
property
property
that
that
does
does
not
not
exist,
exist
And
and
when
when
that
that
happens,
happens
it
it
triggers
triggers
an
an
error
error
at
at
runtime.
runtime
You
you
could
could
write
write
some
some
code
code
that
that
asserts
asserts
a
a
property
property
exists
exists
before
before
calling
calling
it,
it
but
but
this
this
can
can
get
get
really
really
ugly.
ugly
Nowadays,
nowadays
you
you
can
can
just
just
insert
insert
a
a
question
question
mark
mark
between
between
the
the
property
property
name
name
and
and
the
the
period
period
between
between
the
the
next
next
property.
property
If
if
the
the
parent
parent
property
property
is
is
undefined,
undefined
It'll
it'll
just
just
return
return
undefined
undefined
instead
instead
of
of
throwing
throwing
an
an
error.
error
That's
that's
a
a
truly
truly
life
life
changing
changing
feature
feature
for
for
the
the
JavaScript
javascript
developer,
developer
but
but
the
the
question
question
mark
mark
has
has
one
one
more
more
trick
trick
up
up
its
its
sleeve,
sleeve
Nullish
nullish
coalescing.
coalescing
In
in
many
many
cases,
cases
you
you
may
may
want
want
to
to
set
set
a
a
default
default
value
value
for
for
a
a
missing
missing
variable
variable
or
or
property
property
name.
name
You
you
can
can
easily
easily
do
do
that
that
with
with
a
a
logical
logical
or
or
operator.
operator
If
if
the
the
left
left
side
side
is
is
falsy,
falsy
then
then
use
use
the
the
value
value
on
on
the
the
right
right
side.
side
But
but
because
because
JavaScript
javascript
has
has
a
a
bunch
bunch
of
of
weird
weird
rules
rules
for
for
what
what
is
is
truthy
truthy
and
and
falsy,
falsy
you
you
may
may
get
get
weird
weird
results.
results
Like
like
an
an
empty
empty
string
string
or
or
0
0
being
being
set
set
to
to
a
a
default
default
value
value
because
because
it
it
resolves
resolves
to
to
falsie.
falsie
Instead
instead
of
of
logical
logical
or,
or
you
you
can
can
add
add
a
a
double
double
question
question
mark,
mark
which
which
works
works
just
just
like
like
logical
logical
or,
or
except
except
undefined
undefined
and
and
null
null
are
are
the
the
only
only
values
values
that
that
short
short
circuit
circuit
to
to
the
the
right
right
side,
side
making
making
the
the
behavior
behavior
of
of
your
your
code
code
much
much
more
more
predictable.
predictable
This
this
has
has
been
been
the
the
JavaScript
javascript
question
question
mark
mark
in
in
100
100
seconds.
seconds
If
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this,
this
make
make
sure
sure
to
to
hit
hit
the
the
like
like
button
button
and
and
subscribe.
subscribe
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker discusses the power of the question mark in JavaScript, including its use in variables and parameters, and its potential for error messages. They also mention a new feature called optional chaining, which works by defaulting a property name and triggering an error at receiver. The speaker concludes that while the question mark has one more trick to its sleeve, it is too soon to use it in JavaScript, as it can cause issues such as false results and dangerous actions.
? in NaN Seconds
The question mark. It's one of the most powerful characters in the JavaScript universe, providing syntactic sugar in 3 awesome, yet totally unrelated ways. First up, we have the ternary operator. The word ternary literally means composed of 3 parts. Using the question mark as our starting place, We add a condition on the left side, then on the right side, we add a value to assign when the condition is truthy. But if the condition is falsy, we add a colon to assign a different value. The operator is often used to replace a traditional if statement. The code in a ternary expression is far more concise, But you might argue that it's much less readable than an if statement, and you might be right. That is until you need to assign a variable. A statement, like if, is code that does something. It's imperative. It begins with state, then as the program's executed, it mutates the state, and takes multiple lines of code just to assign a variable based on a simple condition. The ternary operator on the other hand creates an expression, which means that it produces a value that we can then assign to a variable. This code is declarative. It describes the state of the variable as opposed to mutating it. That's why we can use const here, but require let in the if Declarative code is awesome because it can also be used in function arguments, and in array, and object literals. But the question Work isn't done there. In 2020, an awesome new feature landed in JavaScript called optional chaining. At some point, you've likely written code that calls an object property that does not exist, And when that happens, it triggers an error at runtime. You could write some code that asserts a property exists before calling it, but this can get really ugly. Nowadays, you can just insert a question mark between the property name and the period between the next property. If the parent property is undefined, It'll just return undefined instead of throwing an error. That's a truly life changing feature for the JavaScript developer, but the question mark has one more trick up its sleeve, Nullish coalescing. In many cases, you may want to set a default value for a missing variable or property name. You can easily do that with a logical or operator. If the left side is falsy, then use the value on the right side. But because JavaScript has a bunch of weird rules for what is truthy and falsy, you may get weird results. Like an empty string or 0 being set to a default value because it resolves to falsie. Instead of logical or, you can add a double question mark, which works just like logical or, except undefined and null are the only values that short circuit to the right side, making the behavior of your code much more predictable. This has been the JavaScript question mark in 100 seconds. If you wanna see more short videos like this, make sure to hit the like button and subscribe. Thanks for watching, and I will see you in the next one.
The speaker discusses the power of the question mark in JavaScript, including its use in variables and parameters, and its potential for error messages. They also mention a new feature called optional chaining, which works by defaulting a property name and triggering an error at receiver. The speaker concludes that while the question mark has one more trick to its sleeve, it is too soon to use it in JavaScript, as it can cause issues such as false results and dangerous actions.