1
00:00:00,808 --> 00:00:01,902
Sometimes in JavaScript, you'll want to

2
00:00:01,902 --> 00:00:04,640
create a new object from an existing one,

3
00:00:04,640 --> 00:00:07,422
or merge the properties of two objects

4
00:00:07,422 --> 00:00:10,407
together. The Object.assign method allows

5
00:00:10,407 --> 00:00:13,154
you to copy or merge the properties from

6
00:00:13,154 --> 00:00:15,443
one object to another object. To

7
00:00:15,443 --> 00:00:18,513
demonstrate that, let's create a new

8
00:00:18,513 --> 00:00:21,773
object, and now let's use Object.assign to

9
00:00:21,773 --> 00:00:25,916
copy the properties from person1 to

10
00:00:25,916 --> 00:00:28,523
person2. So Object.assign takes multiple

11
00:00:28,523 --> 00:00:30,599
properties. The first one is the object

12
00:00:30,599 --> 00:00:33,016
that is going to be modified or have

13
00:00:33,016 --> 00:00:37,864
properties copied into it. So if we

14
00:00:37,864 --> 00:00:40,442
display person2, you can see that person2

15
00:00:40,442 --> 00:00:43,219
now contains all of the properties that

16
00:00:43,219 --> 00:00:45,664
person1 had. It even copied the isAdult

17
00:00:45,664 --> 00:00:47,600
method. And now if we apply what we

18
00:00:47,600 --> 00:00:50,538
learned about equality, and compare

19
00:00:50,538 --> 00:00:53,799
person1 to person2, and save that, you can

20
00:00:53,799 --> 00:00:55,676
see that returns false because even though

21
00:00:55,676 --> 00:00:57,934
the properties are the same between the

22
00:00:57,934 --> 00:01:01,161
two objects, they are not the same object

23
00:01:01,161 --> 00:01:02,984
in memory. Let's take a look at another

24
00:01:02,984 --> 00:01:04,511
example now that might better demonstrate

25
00:01:04,511 --> 00:01:06,577
how you might use Object.assign. So

26
00:01:06,577 --> 00:01:09,572
instead of this person2 object, let's

27
00:01:09,572 --> 00:01:14,410
create a healthStats object like this. So

28
00:01:14,410 --> 00:01:16,914
imagine you're building a weight loss app,

29
00:01:16,914 --> 00:01:18,810
and in one section of the app, you gather

30
00:01:18,810 --> 00:01:21,857
the person's basic info as shown in the

31
00:01:21,857 --> 00:01:24,425
person1 object, and then you gather their

32
00:01:24,425 --> 00:01:26,026
height and weight in a separate place as

33
00:01:26,026 --> 00:01:28,107
shown in this healthStats object, and then

34
00:01:28,107 --> 00:01:30,205
you want to merge them together.

35
00:01:30,205 --> 00:01:32,854
Object.assign is perfect for that. We can

36
00:01:32,854 --> 00:01:35,492
just do that like this. So I'm going to

37
00:01:35,492 --> 00:01:37,697
take the healthStats properties and merge

38
00:01:37,697 --> 00:01:40,921
them onto the person1 object. So if we

39
00:01:40,921 --> 00:01:44,456
take a look at that, there we go, so we

40
00:01:44,456 --> 00:01:46,155
can see that we have firstName, lastName,

41
00:01:46,155 --> 00:01:49,116
age, and isAdult from the person object,

42
00:01:49,116 --> 00:01:51,084
and height and weight from the healthStats

43
00:01:51,084 --> 00:01:54,857
object. But what if we didn't want to mess

44
00:01:54,857 --> 00:01:56,899
with that person1 object? Sometimes you

45
00:01:56,899 --> 00:01:59,453
don't want to change an object like that.

46
00:01:59,453 --> 00:02:02,486
For example, imagine this Object.assign

47
00:02:02,486 --> 00:02:06,923
function was inside another function like

48
00:02:06,923 --> 00:02:10,165
this. So this mergeHealthStats function

49
00:02:10,165 --> 00:02:12,676
takes in person and healthStats

50
00:02:12,676 --> 00:02:14,368
parameters, and then merges them together

51
00:02:14,368 --> 00:02:16,699
and returns them. So if I come down here,

52
00:02:16,699 --> 00:02:18,703
we'll call that function, and then I'll

53
00:02:18,703 --> 00:02:22,735
assign the value returned to mergedPerson.

54
00:02:22,735 --> 00:02:28,961
So if we display mergedPerson now, there

55
00:02:28,961 --> 00:02:29,938
we go, you can see it's all merged

56
00:02:29,938 --> 00:02:34,145
together as we would expect. But we have

57
00:02:34,145 --> 00:02:37,166
an unintended side effect here. So notice

58
00:02:37,166 --> 00:02:40,479
if I display person1, which is the object

59
00:02:40,479 --> 00:02:42,568
that we passed into the function, that

60
00:02:42,568 --> 00:02:46,128
person1 also got mutated. That's because

61
00:02:46,128 --> 00:02:48,858
when we passed in person1 to this

62
00:02:48,858 --> 00:02:51,673
function, we then called Object.assign and

63
00:02:51,673 --> 00:02:53,980
passed that person in as the first

64
00:02:53,980 --> 00:02:56,132
parameter. Remember, Object.assign merges

65
00:02:56,132 --> 00:02:58,643
the properties into that first object, so

66
00:02:58,643 --> 00:03:01,460
it mutates it, and then it also returns

67
00:03:01,460 --> 00:03:03,659
the mutated object, which is why I could

68
00:03:03,659 --> 00:03:06,867
return the result of that function call

69
00:03:06,867 --> 00:03:08,807
here. So our person object got mutated,

70
00:03:08,807 --> 00:03:12,429
but good immutability practice says that a

71
00:03:12,429 --> 00:03:13,727
function really shouldn't ever mutate the

72
00:03:13,727 --> 00:03:17,113
objects that are passed into it. So what

73
00:03:17,113 --> 00:03:19,316
can we do to avoid mutating that object?

74
00:03:19,316 --> 00:03:21,572
Well, Object.assign actually takes in

75
00:03:21,572 --> 00:03:24,007
unlimited parameters, and it will just

76
00:03:24,007 --> 00:03:25,743
merge all of the properties from the

77
00:03:25,743 --> 00:03:28,790
objects on the right into the object on

78
00:03:28,790 --> 00:03:32,543
the left. So we can do something like

79
00:03:32,543 --> 00:03:34,317
this, so here I've created a new empty

80
00:03:34,317 --> 00:03:36,630
object literal, and I'm passing that in as

81
00:03:36,630 --> 00:03:39,675
the first parameter. And then the

82
00:03:39,675 --> 00:03:41,374
properties from person and healthStats

83
00:03:41,374 --> 00:03:43,764
will both get merged onto that new object.

84
00:03:43,764 --> 00:03:47,538
So if I save that, there, you can see when

85
00:03:47,538 --> 00:03:52,039
we displayed the mergedPerson, it output

86
00:03:52,039 --> 00:03:55,550
the merged object, but person1, when we

87
00:03:55,550 --> 00:03:58,738
displayed it, did not get mutated. This is

88
00:03:58,738 --> 00:04:00,137
how you'll often see the Object.assign

89
00:04:00,137 --> 00:04:03,718
method used, with an empty object as the

90
00:04:03,718 --> 00:04:05,987
first parameter to avoid mutating the

91
00:04:05,987 --> 00:04:08,249
other objects. Object.assign is really

92
00:04:08,249 --> 00:04:12,000
handy for working with objects in this way.

