Make your code more concise and readable by learning destructuring assignment in JavaScript in 100 seconds https://fireship.io/courses/javascript/

#webdev #js #100SecondsOfCode

MDN Docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

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-04T05:59:40.966Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
99827e1a-c609-4e98-9ba7-8881b922a09e
bdc017e04488673007a1bb10cdaffe0812a9e9de87a5740539d7d885e1f3dcf7
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Destructuring assignment.
Take values from arrays or properties from objects and set them as local variables.
It's a technique that can make your JavaScript code more concise and readable.
Imagine you have an array and you want to assign some of its values to local variables.
One option is to assign each variable by referencing its index in the array.
That works fine, but it's not very elegant.
With destructuring, we can do the same thing with a single line of code.
By using brackets after const, we can assign a variable name to each index in the array.
The position of the variable name matches the values index in the array.
The syntax may look familiar to you if you've ever used React, which relies on destructuring for the use state hook.
When working with arrays, you may want to omit a variable, which you can do by adding a comma without a variable name to skip that index.
In other cases, you might want to name the first couple variables, then put the remainder in their own array.
That can be achieved by putting 3 dots in front of the variable name.
You might also want to set a default value in case the value in the array is undefined.
Use the equal sign to provide the fallback value.
In addition to arrays, destructuring also applies to objects.
Notice how we're duplicating the object's property name as a variable with dot notation.
By putting braces after const, you can reference property names, which will automatically become local variables, which is much cleaner than referencing them line by line with dot notation.
And just like arrays, you can use the equal sign to set a default value.
But in some cases, you may want to use a different name than what's provided on the object itself.
Adding a colon after the property name allows you to rename it, which is especially useful when dealing with named collisions, or when working with objects that use property names that are not valid variable names.
In addition to renaming, you can also use a colon to access nested properties, or in other words, set a variable from an object within an object.
In addition to destructuring top level variables.
You can also use the syntax in for loops, which is awesome when you have an array of objects.
When working with functions, you can destructure arrays and objects passed as arguments, providing yet another way to obliterate unnecessary lines of JavaScript from your code base.
This has been the structuring assignment in JavaScript in 100 seconds.
Make sure to hit the like button.
It really helps out these short videos.
Thanks for watching.
And if you wanna learn more, hang out for a minute while we go over a few more advanced tricks that you may not know about.
One thing that array destructuring enables is variable swapping without the need for an intermediate variable.
It doesn't come up often in JavaScript, a but it is a useful thing to know for computer science in general.
Normally, to swap 2 variables, you need a temporary variable because once the first variable is reassigned, you lose its value.
A but with the ray destructuring, we have the syntax available to perform a swap without the need for the intermediate variable.
Use the structuring to reassign the values by putting the original 2 in an array, but in reverse order.
You'll probably almost never do that, but you might be able to use it to impress someone on a technical interview someday.
The other thing I wanted to show you is that the structuring can also be used with regular expressions.
When you run the match function on a string, it returns an array of results.
You can then easily provide descriptive variable names for the regular expression matches.
That's cool, but I have one last thing to mention.
Imagine you want to destructure an object, but you don't know the property name until runtime.
You can use computed properties in destructuring just like you can with object literals.
By wrapping a property name in brackets, it now takes a variable as its value instead of a static name.
In other words, it's computed at runtime, which you can then follow with a colon to provide it with a static variable name to use in your code, and that's pretty much everything I know about destructuring.

Speaker 0: Destructuring assignment. Take values from arrays or properties from objects and set them as local variables. It's a technique that can make your JavaScript code more concise and readable. Imagine you have an array and you want to assign some of its values to local variables. One option is to assign each variable by referencing its index in the array.

That works fine, but it's not very elegant. With destructuring, we can do the same thing with a single line of code. By using brackets after const, we can assign a variable name to each index in the array. The position of the variable name matches the values index in the array. The syntax may look familiar to you if you've ever used React, which relies on destructuring for the use state hook.

When working with arrays, you may want to omit a variable, which you can do by adding a comma without a variable name to skip that index. In other cases, you might want to name the first couple variables, then put the remainder in their own array. That can be achieved by putting 3 dots in front of the variable name. You might also want to set a default value in case the value in the array is undefined. Use the equal sign to provide the fallback value.

In addition to arrays, destructuring also applies to objects. Notice how we're duplicating the object's property name as a variable with dot notation. By putting braces after const, you can reference property names, which will automatically become local variables, which is much cleaner than referencing them line by line with dot notation. And just like arrays, you can use the equal sign to set a default value. But in some cases, you may want to use a different name than what's provided on the object itself.

Adding a colon after the property name allows you to rename it, which is especially useful when dealing with named collisions, or when working with objects that use property names that are not valid variable names. In addition to renaming, you can also use a colon to access nested properties, or in other words, set a variable from an object within an object. In addition to destructuring top level variables. You can also use the syntax in for loops, which is awesome when you have an array of objects. When working with functions, you can destructure arrays and objects passed as arguments, providing yet another way to obliterate unnecessary lines of JavaScript from your code base.

This has been the structuring assignment in JavaScript in 100 seconds. Make sure to hit the like button. It really helps out these short videos. Thanks for watching. And if you wanna learn more, hang out for a minute while we go over a few more advanced tricks that you may not know about.

One thing that array destructuring enables is variable swapping without the need for an intermediate variable. It doesn't come up often in JavaScript, a but it is a useful thing to know for computer science in general. Normally, to swap 2 variables, you need a temporary variable because once the first variable is reassigned, you lose its value. A but with the ray destructuring, we have the syntax available to perform a swap without the need for the intermediate variable. Use the structuring to reassign the values by putting the original 2 in an array, but in reverse order.

You'll probably almost never do that, but you might be able to use it to impress someone on a technical interview someday. The other thing I wanted to show you is that the structuring can also be used with regular expressions. When you run the match function on a string, it returns an array of results. You can then easily provide descriptive variable names for the regular expression matches. That's cool, but I have one last thing to mention.

Imagine you want to destructure an object, but you don't know the property name until runtime. You can use computed properties in destructuring just like you can with object literals. By wrapping a property name in brackets, it now takes a variable as its value instead of a static name. In other words, it's computed at runtime, which you can then follow with a colon to provide it with a static variable name to use in your code, and that's pretty much everything I know about destructuring.
Destructuring assignment. Take values from arrays or properties from objects and set them as local variables. It's a technique that can make your JavaScript code more concise and readable. Imagine you have an array and you want to assign some of its values to local variables. One option is to assign each variable by referencing its index in the array. That works fine, but it's not very elegant. With destructuring, we can do the same thing with a single line of code. By using brackets after const, we can assign a variable name to each index in the array. The position of the variable name matches the values index in the array. The syntax may look familiar to you if you've ever used React, which relies on destructuring for the use state hook. When working with arrays, you may want to omit a variable, which you can do by adding a comma without a variable name to skip that index. In other cases, you might want to name the first couple variables, then put the remainder in their own array. That can be achieved by putting 3 dots in front of the variable name. You might also want to set a default value in case the value in the array is undefined. Use the equal sign to provide the fallback value. In addition to arrays, destructuring also applies to objects. Notice how we're duplicating the object's property name as a variable with dot notation. By putting braces after const, you can reference property names, which will automatically become local variables, which is much cleaner than referencing them line by line with dot notation. And just like arrays, you can use the equal sign to set a default value. But in some cases, you may want to use a different name than what's provided on the object itself. Adding a colon after the property name allows you to rename it, which is especially useful when dealing with named collisions, or when working with objects that use property names that are not valid variable names. In addition to renaming, you can also use a colon to access nested properties, or in other words, set a variable from an object within an object. In addition to destructuring top level variables. You can also use the syntax in for loops, which is awesome when you have an array of objects. When working with functions, you can destructure arrays and objects passed as arguments, providing yet another way to obliterate unnecessary lines of JavaScript from your code base. This has been the structuring assignment in JavaScript in 100 seconds. Make sure to hit the like button. It really helps out these short videos. Thanks for watching. And if you wanna learn more, hang out for a minute while we go over a few more advanced tricks that you may not know about. One thing that array destructuring enables is variable swapping without the need for an intermediate variable. It doesn't come up often in JavaScript, a but it is a useful thing to know for computer science in general. Normally, to swap 2 variables, you need a temporary variable because once the first variable is reassigned, you lose its value. A but with the ray destructuring, we have the syntax available to perform a swap without the need for the intermediate variable. Use the structuring to reassign the values by putting the original 2 in an array, but in reverse order. You'll probably almost never do that, but you might be able to use it to impress someone on a technical interview someday. The other thing I wanted to show you is that the structuring can also be used with regular expressions. When you run the match function on a string, it returns an array of results. You can then easily provide descriptive variable names for the regular expression matches. That's cool, but I have one last thing to mention. Imagine you want to destructure an object, but you don't know the property name until runtime. You can use computed properties in destructuring just like you can with object literals. By wrapping a property name in brackets, it now takes a variable as its value instead of a static name.
In other words, it's computed at runtime, which you can then follow with a colon to provide it with a static variable name to use in your code, and that's pretty much everything I know about destructuring.
programming
Destructuring assignment. Take values from arrays or properties from objects and set them as local variables. It's a technique that can make your JavaScript code more concise and readable. Imagine you have an array and you want to assign some of its values to local variables. One option is to assign each variable by referencing its index in the array. That works fine, but it's not very elegant. With destructuring, we can do the same thing with a single line of code. By using brackets after const, we can assign a variable name to each index in the array. The position of the variable name matches the values index in the array. The syntax may look familiar to you if you've ever used React, which relies on destructuring for the use state hook. When working with arrays, you may want to omit a variable, which you can do by adding a comma without a variable name to skip that index. In other cases, you might want to name the first couple variables, then put the remainder in their own array. That can be achieved by putting 3 dots in front of the variable name. You might also want to set a default value in case the value in the array is undefined. Use the equal sign to provide the fallback value. In addition to arrays, destructuring also applies to objects. Notice how we're duplicating the object's property name as a variable with dot notation. By putting braces after const, you can reference property names, which will automatically become local variables, which is much cleaner than referencing them line by line with dot notation. And just like arrays, you can use the equal sign to set a default value. But in some cases, you may want to use a different name than what's provided on the object itself. Adding a colon after the property name allows you to rename it, which is especially useful when dealing with named collisions, or when working with objects that use property names that are not valid variable names. In addition to renaming, you can also use a colon to access nested properties, or in other words, set a variable from an object within an object. In addition to destructuring top level variables. You can also use the syntax in for loops, which is awesome when you have an array of objects. When working with functions, you can destructure arrays and objects passed as arguments, providing yet another way to obliterate unnecessary lines of JavaScript from your code base. This has been the structuring assignment in JavaScript in 100 seconds. Make sure to hit the like button. It really helps out these short videos. Thanks for watching. And if you wanna learn more, hang out for a minute while we go over a few more advanced tricks that you may not know about. One thing that array destructuring enables is variable swapping without the need for an intermediate variable. It doesn't come up often in JavaScript, a but it is a useful thing to know for computer science in general. Normally, to swap 2 variables, you need a temporary variable because once the first variable is reassigned, you lose its value. A but with the ray destructuring, we have the syntax available to perform a swap without the need for the intermediate variable. Use the structuring to reassign the values by putting the original 2 in an array, but in reverse order. You'll probably almost never do that, but you might be able to use it to impress someone on a technical interview someday. The other thing I wanted to show you is that the structuring can also be used with regular expressions. When you run the match function on a string, it returns an array of results. You can then easily provide descriptive variable names for the regular expression matches. That's cool, but I have one last thing to mention. Imagine you want to destructure an object, but you don't know the property name until runtime. You can use computed properties in destructuring just like you can with object literals. By wrapping a property name in brackets, it now takes a variable as its value instead of a static name. In other words, it's computed at runtime, which you can then follow with a colon to provide it with a static variable name to use in your code, and that's pretty much everything I know about destructuring.
Destructuring
destructuring
assignment.
assignment
Take
take
values
values
from
from
arrays
arrays
or
or
properties
properties
from
from
objects
objects
and
and
set
set
them
them
as
as
local
local
variables.
variables
It's
it's
a
a
technique
technique
that
that
can
can
make
make
your
your
JavaScript
javascript
code
code
more
more
concise
concise
and
and
readable.
readable
Imagine
imagine
you
you
have
have
an
an
array
array
and
and
you
you
want
want
to
to
assign
assign
some
some
of
of
its
its
values
values
to
to
local
local
variables.
variables
One
one
option
option
is
is
to
to
assign
assign
each
each
variable
variable
by
by
referencing
referencing
its
its
index
index
in
in
the
the
array.
array
That
that
works
works
fine,
fine
but
but
it's
it's
not
not
very
very
elegant.
elegant
With
with
destructuring,
destructuring
we
we
can
can
do
do
the
the
same
same
thing
thing
with
with
a
a
single
single
line
line
of
of
code.
code
By
by
using
using
brackets
brackets
after
after
const,
const
we
we
can
can
assign
assign
a
a
variable
variable
name
name
to
to
each
each
index
index
in
in
the
the
array.
array
The
the
position
position
of
of
the
the
variable
variable
name
name
matches
matches
the
the
values
values
index
index
in
in
the
the
array.
array
The
the
syntax
syntax
may
may
look
look
familiar
familiar
to
to
you
you
if
if
you've
you've
ever
ever
used
used
React,
react
which
which
relies
relies
on
on
destructuring
destructuring
for
for
the
the
use
use
state
state
hook.
hook
When
when
working
working
with
with
arrays,
arrays
you
you
may
may
want
want
to
to
omit
omit
a
a
variable,
variable
which
which
you
you
can
can
do
do
by
by
adding
adding
a
a
comma
comma
without
without
a
a
variable
variable
name
name
to
to
skip
skip
that
that
index.
index
In
in
other
other
cases,
cases
you
you
might
might
want
want
to
to
name
name
the
the
first
first
couple
couple
variables,
variables
then
then
put
put
the
the
remainder
remainder
in
in
their
their
own
own
array.
array
That
that
can
can
be
be
achieved
achieved
by
by
putting
putting
3
3
dots
dots
in
in
front
front
of
of
the
the
variable
variable
name.
name
You
you
might
might
also
also
want
want
to
to
set
set
a
a
default
default
value
value
in
in
case
case
the
the
value
value
in
in
the
the
array
array
is
is
undefined.
undefined
Use
use
the
the
equal
equal
sign
sign
to
to
provide
provide
the
the
fallback
fallback
value.
value
In
in
addition
addition
to
to
arrays,
arrays
destructuring
destructuring
also
also
applies
applies
to
to
objects.
objects
Notice
notice
how
how
we're
we're
duplicating
duplicating
the
the
object's
object's
property
property
name
name
as
as
a
a
variable
variable
with
with
dot
dot
notation.
notation
By
by
putting
putting
braces
braces
after
after
const,
const
you
you
can
can
reference
reference
property
property
names,
names
which
which
will
will
automatically
automatically
become
become
local
local
variables,
variables
which
which
is
is
much
much
cleaner
cleaner
than
than
referencing
referencing
them
them
line
line
by
by
line
line
with
with
dot
dot
notation.
notation
And
and
just
just
like
like
arrays,
arrays
you
you
can
can
use
use
the
the
equal
equal
sign
sign
to
to
set
set
a
a
default
default
value.
value
But
but
in
in
some
some
cases,
cases
you
you
may
may
want
want
to
to
use
use
a
a
different
different
name
name
than
than
what's
what's
provided
provided
on
on
the
the
object
object
itself.
itself
Adding
adding
a
a
colon
colon
after
after
the
the
property
property
name
name
allows
allows
you
you
to
to
rename
rename
it,
it
which
which
is
is
especially
especially
useful
useful
when
when
dealing
dealing
with
with
named
named
collisions,
collisions
or
or
when
when
working
working
with
with
objects
objects
that
that
use
use
property
property
names
names
that
that
are
are
not
not
valid
valid
variable
variable
names.
names
In
in
addition
addition
to
to
renaming,
renaming
you
you
can
can
also
also
use
use
a
a
colon
colon
to
to
access
access
nested
nested
properties,
properties
or
or
in
in
other
other
words,
words
set
set
a
a
variable
variable
from
from
an
an
object
object
within
within
an
an
object.
object
In
in
addition
addition
to
to
destructuring
destructuring
top
top
level
level
variables.
variables
You
you
can
can
also
also
use
use
the
the
syntax
syntax
in
in
for
for
loops,
loops
which
which
is
is
awesome
awesome
when
when
you
you
have
have
an
an
array
array
of
of
objects.
objects
When
when
working
working
with
with
functions,
functions
you
you
can
can
destructure
destructure
arrays
arrays
and
and
objects
objects
passed
passed
as
as
arguments,
arguments
providing
providing
yet
yet
another
another
way
way
to
to
obliterate
obliterate
unnecessary
unnecessary
lines
lines
of
of
JavaScript
javascript
from
from
your
your
code
code
base.
base
This
this
has
has
been
been
the
the
structuring
structuring
assignment
assignment
in
in
JavaScript
javascript
in
in
100
100
seconds.
seconds
Make
make
sure
sure
to
to
hit
hit
the
the
like
like
button.
button
It
it
really
really
helps
helps
out
out
these
these
short
short
videos.
videos
Thanks
thanks
for
for
watching.
watching
And
and
if
if
you
you
wanna
wanna
learn
learn
more,
more
hang
hang
out
out
for
for
a
a
minute
minute
while
while
we
we
go
go
over
over
a
a
few
few
more
more
advanced
advanced
tricks
tricks
that
that
you
you
may
may
not
not
know
know
about.
about
One
one
thing
thing
that
that
array
array
destructuring
destructuring
enables
enables
is
is
variable
variable
swapping
swapping
without
without
the
the
need
need
for
for
an
an
intermediate
intermediate
variable.
variable
It
it
doesn't
doesn't
come
come
up
up
often
often
in
in
JavaScript,
javascript
a
a
but
but
it
it
is
is
a
a
useful
useful
thing
thing
to
to
know
know
for
for
computer
computer
science
science
in
in
general.
general
Normally,
normally
to
to
swap
swap
2
2
variables,
variables
you
you
need
need
a
a
temporary
temporary
variable
variable
because
because
once
once
the
the
first
first
variable
variable
is
is
reassigned,
reassigned
you
you
lose
lose
its
its
value.
value
A
a
but
but
with
with
the
the
ray
ray
destructuring,
destructuring
we
we
have
have
the
the
syntax
syntax
available
available
to
to
perform
perform
a
a
swap
swap
without
without
the
the
need
need
for
for
the
the
intermediate
intermediate
variable.
variable
Use
use
the
the
structuring
structuring
to
to
reassign
reassign
the
the
values
values
by
by
putting
putting
the
the
original
original
2
2
in
in
an
an
array,
array
but
but
in
in
reverse
reverse
order.
order
You'll
you'll
probably
probably
almost
almost
never
never
do
do
that,
that
but
but
you
you
might
might
be
be
able
able
to
to
use
use
it
it
to
to
impress
impress
someone
someone
on
on
a
a
technical
technical
interview
interview
someday.
someday
The
the
other
other
thing
thing
I
i
wanted
wanted
to
to
show
show
you
you
is
is
that
that
the
the
structuring
structuring
can
can
also
also
be
be
used
used
with
with
regular
regular
expressions.
expressions
When
when
you
you
run
run
the
the
match
match
function
function
on
on
a
a
string,
string
it
it
returns
returns
an
an
array
array
of
of
results.
results
You
you
can
can
then
then
easily
easily
provide
provide
descriptive
descriptive
variable
variable
names
names
for
for
the
the
regular
regular
expression
expression
matches.
matches
That's
that's
cool,
cool
but
but
I
i
have
have
one
one
last
last
thing
thing
to
to
mention.
mention
Imagine
imagine
you
you
want
want
to
to
destructure
destructure
an
an
object,
object
but
but
you
you
don't
don't
know
know
the
the
property
property
name
name
until
until
runtime.
runtime
You
you
can
can
use
use
computed
computed
properties
properties
in
in
destructuring
destructuring
just
just
like
like
you
you
can
can
with
with
object
object
literals.
literals
By
by
wrapping
wrapping
a
a
property
property
name
name
in
in
brackets,
brackets
it
it
now
now
takes
takes
a
a
variable
variable
as
as
its
its
value
value
instead
instead
of
of
a
a
static
static
name.
name
In
in
other
other
words,
words
it's
it's
computed
computed
at
at
runtime,
runtime
which
which
you
you
can
can
then
then
follow
follow
with
with
a
a
colon
colon
to
to
provide
provide
it
it
with
with
a
a
static
static
variable
variable
name
name
to
to
use
use
in
in
your
your
code,
code
and
and
that's
that's
pretty
pretty
much
much
everything
everything
I
i
know
know
about
about
destructuring.
destructuring
success
In this video, the speaker explains how to use the structuring assignment in JavaScript to make your code more concise and readable. They explain how to assign each local variables to a variable and how to use the assignment in a single line of code. The speaker also discusses the use of the structuring assignment in other cases, such as when working with objects and when working with functions.
JS Destructuring in 100 Seconds
Destructuring assignment. Take values from arrays or properties from objects and set them as local variables. It's a technique that can make your JavaScript code more concise and readable. Imagine you have an array and you want to assign some of its values to local variables. One option is to assign each variable by referencing its index in the array. That works fine, but it's not very elegant. With destructuring, we can do the same thing with a single line of code. By using brackets after const, we can assign a variable name to each index in the array. The position of the variable name matches the values index in the array. The syntax may look familiar to you if you've ever used React, which relies on destructuring for the use state hook. When working with arrays, you may want to omit a variable, which you can do by adding a comma without a variable name to skip that index. In other cases, you might want to name the first couple variables, then put the remainder in their own array. That can be achieved by putting 3 dots in front of the variable name. You might also want to set a default value in case the value in the array is undefined. Use the equal sign to provide the fallback value. In addition to arrays, destructuring also applies to objects. Notice how we're duplicating the object's property name as a variable with dot notation. By putting braces after const, you can reference property names, which will automatically become local variables, which is much cleaner than referencing them line by line with dot notation. And just like arrays, you can use the equal sign to set a default value. But in some cases, you may want to use a different name than what's provided on the object itself. Adding a colon after the property name allows you to rename it, which is especially useful when dealing with named collisions, or when working with objects that use property names that are not valid variable names. In addition to renaming, you can also use a colon to access nested properties, or in other words, set a variable from an object within an object. In addition to destructuring top level variables. You can also use the syntax in for loops, which is awesome when you have an array of objects. When working with functions, you can destructure arrays and objects passed as arguments, providing yet another way to obliterate unnecessary lines of JavaScript from your code base. This has been the structuring assignment in JavaScript in 100 seconds. Make sure to hit the like button. It really helps out these short videos. Thanks for watching. And if you wanna learn more, hang out for a minute while we go over a few more advanced tricks that you may not know about. One thing that array destructuring enables is variable swapping without the need for an intermediate variable. It doesn't come up often in JavaScript, a but it is a useful thing to know for computer science in general. Normally, to swap 2 variables, you need a temporary variable because once the first variable is reassigned, you lose its value. A but with the ray destructuring, we have the syntax available to perform a swap without the need for the intermediate variable. Use the structuring to reassign the values by putting the original 2 in an array, but in reverse order. You'll probably almost never do that, but you might be able to use it to impress someone on a technical interview someday. The other thing I wanted to show you is that the structuring can also be used with regular expressions. When you run the match function on a string, it returns an array of results. You can then easily provide descriptive variable names for the regular expression matches. That's cool, but I have one last thing to mention. Imagine you want to destructure an object, but you don't know the property name until runtime. You can use computed properties in destructuring just like you can with object literals. By wrapping a property name in brackets, it now takes a variable as its value instead of a static name. In other words, it's computed at runtime, which you can then follow with a colon to provide it with a static variable name to use in your code, and that's pretty much everything I know about destructuring.
In this video, the speaker explains how to use the structuring assignment in JavaScript to make your code more concise and readable. They explain how to assign each local variables to a variable and how to use the assignment in a single line of code. The speaker also discusses the use of the structuring assignment in other cases, such as when working with objects and when working with functions.