Immutable JS - Redux Tutorial #2 - React.js Tutorial Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

so immutability and mutation is
something that JavaScript developers
have to been talking about a lot
recently it's not at all a new concept
in programming but in JavaScript and on
the browser we've realized that even
though javascript doesn't really handle
immutability very well by default we can
write immutable data and it really helps
our programs a lot so let me kind of
immutable basically means a piece of
data that we don't ever want to change
if it's immutable we don't ever want to
change it we simply create a new piece
of data based off of its values and we
change the new piece of data you know so
if we're to go over a equals name we'll
let's say we want a a mutation would be
just changing the name to will - Fred
there we go I just mutated it now a has
changed a an immutable change would mean
that a still is named equals we'll where
B is now this new object with a change
to kind of show you why immutability is
not kind of baked into JavaScript by
default there's really two types in
JavaScript there's primitive types and
there's reference types primitive types
would be the number one or they'd be a
string trust or they would be true/false
a boolean so if I were to go vary equals
1 and ver B equals a B took on the value
of a but if I were to change be a still
equals 1 so they're their own variable
they're their own piece of data whereas
objects and arrays which are really just
objects objects always create a
reference so if I receive your a equals
name will bear B equals a well now
they're both pointing to the same object
so if B were to change then a changed as
well as name is Fred and B's name is
Fred they're the exact same object so we
actually want to be able to create a new
object and if you're in a recent browser
you're going to have object to sign
which is exactly what you use for this
object a sign is not really new jQuery
has had it forever which is extend or
underscore or lodash extend and can't
type extend or it's actually called a
I now in lodash to match the new object
to sign so we'd simply say være equals
name we'll let's actually give it
another piece of information age 35 now
let's say ver B equals we're actually
going to go object assign now we're
going to start with a brand new object
then we're going to pass in a and
anything else B C D and what it's going
to do is it's going to start with this
brand new object and that is B then it's
going to take all the values of a and
apply them overriding values of B
overriding values of C overriding values
of D overriding until you're left with
your final object so if we basically
want to change a we're going to make a
brand new object so B is now pointing to
this guy and then it's going to take all
the values of a and then we're going to
change something let's change name to
Fred there we go
now B has the name of Fred age 35 a is
untouched we didn't change a at all we
merely stole its values what what do you
do for arrays arrays are very similar
you just simply use concat and use
filter so you're just going to go where
a equals 1 you don't want 0 1 2 there B
equals a.com Katz we're going to add a
new value so that's going to leave a
untouched and we're going to add a new
value onto the end a is there and B has
an extra value and then for filter let's
say we want to strip a out well a is
untouched so a is 0 1 2 there B equals a
dot filter and the filter is going to go
through each item put the value through
and we're going to see if value is not
equal to 2 we're going to keep it in but
what I mess up Wow
there you go so now B has filtered out
anything that's not equal to 2 we keep
in there so that's kind of how filter
works and that's how you'll change an
array so a is still unchanged and B's
got the new values excellent so that's
kind of how we're going to work on stuff
and let's say you've got an object that
it has both data and an array there a
equals name and things
is zero one two we might have to to
stage this one then so might have to go
very B equals object to sign first thing
we're going to do is get be pointing to
a brand new object let's pull all the
values of a and then let's do name
equals Fred now we need to be careful
right now because B dot things is still
pointing to the exact same thing as a
dot things because this is an object if
we were to change B dot things dot push
so now B dot things has that and a dot
things has it as well oh that doesn't
work let's go back and try that again go
away okay let's go back to a there we go
a name will things 0 1 2 there B equals
object to sign a and then we're going to
go name equal spread so we've changed
Fred we're still referencing a dot
things then we're going to beat out
things equals a dot things concat add
our new one in there so now a dot things
completely untouched beat out things
completely new object B is completely
new ground up so that's kind of how
you're going to do immutability in
JavaScript again you're just using
object to sign and then you're using
concat to add stuff to an array and
you're using filter to pull stuff out of
an array and there's other things you
can do can use map to change all the
items in an array and return a new one
what's great about filter and map and
reduce is they're always going to return
a brand new array object concat filter
Map Reduce and object to sign they're
always going to return a brand new array
object because object assign is going to
return a brand new object object and so
that's how you do immutability and
that's how you keep your data pristine
let's you can keep a full record of
history as data changes