1
00:00:00,330 --> 00:00:06,000
This lesson, we're jumping right into coding, but before we do, just a little overview on what JavaScript

2
00:00:06,000 --> 00:00:12,150
objects are and if you do understand JavaScript objects, well, this is the key to understanding JavaScript

3
00:00:12,270 --> 00:00:15,630
because almost everything in JavaScript is an object.

4
00:00:15,840 --> 00:00:17,250
So it comes to writing code.

5
00:00:17,400 --> 00:00:20,400
There's always more than one way to create a solution.

6
00:00:20,520 --> 00:00:25,530
And we're going to look at that in more detail as we progress through the lessons when we create certain

7
00:00:25,530 --> 00:00:26,040
code.

8
00:00:26,130 --> 00:00:32,310
And then we're going to make it within an object oriented programming format later on in the course.

9
00:00:32,490 --> 00:00:38,550
So the object is a collection of properties of properties associated between a name and a value, and

10
00:00:38,550 --> 00:00:42,700
it's basically a way to get information and store information.

11
00:00:42,900 --> 00:00:49,920
So think of it as a more complex variable where you've got access to tons of information and objects

12
00:00:49,920 --> 00:00:51,510
can be very, very large.

13
00:00:51,720 --> 00:00:54,090
So a property can also contain.

14
00:00:54,450 --> 00:00:57,060
So the object can also to contain a function.

15
00:00:57,210 --> 00:01:03,090
And then within the object, this function functions the same way as a function, but it's known as

16
00:01:03,090 --> 00:01:03,690
a method.

17
00:01:03,930 --> 00:01:10,680
So that's a the two key things to keep in mind about objects is that they're very versatile and they

18
00:01:10,680 --> 00:01:17,670
can get very complex so they can hold information as well as methods in order to create an object.

19
00:01:17,940 --> 00:01:20,130
There is a number of ways to create objects.

20
00:01:20,160 --> 00:01:26,640
So typically you might be familiar with literal notation where just as we would with a variable, where

21
00:01:26,640 --> 00:01:31,860
we create a variable and then we've got the curly brackets and then we've got a name and a value, a

22
00:01:31,860 --> 00:01:36,970
name and a value, and then we can return that information back from the object.

23
00:01:37,380 --> 00:01:44,100
So how about we try this out and we're going to create some simple objects in this lesson so you can

24
00:01:44,100 --> 00:01:51,370
open up your editor and you can create your person object as well as create a just a regular object.

25
00:01:51,400 --> 00:01:58,980
So create a variable or a value and then associate some names with values within it and then return

26
00:01:58,980 --> 00:02:07,080
that information back using your console and then make it a little bit more complex where you could

27
00:02:07,080 --> 00:02:13,200
use your first name, your last name, assign an ID and then include a method and then use some of the

28
00:02:13,200 --> 00:02:18,570
data that's contained within that object and then return that back when we call back the method.

29
00:02:18,690 --> 00:02:24,630
So in this example, we've got person details and it's returning back the information contained within

30
00:02:24,630 --> 00:02:25,230
the object.

31
00:02:25,560 --> 00:02:31,230
So go ahead, possibly try this out and I'll walk you through these two solutions coming up.

32
00:02:31,470 --> 00:02:33,360
So now let's have some fun with JavaScript.

33
00:02:33,480 --> 00:02:39,390
Open up your editor and I'm going to hide the rest of the sidebar because we're only going to be working

34
00:02:39,390 --> 00:02:40,740
on the Ops area.

35
00:02:40,950 --> 00:02:45,300
And this is the crucial part of what we're looking at within the lesson.

36
00:02:45,330 --> 00:02:52,500
Of course, what we saw earlier is how to create a basic object so you can give it a name.

37
00:02:52,740 --> 00:02:54,660
I'm going to call it my object.

38
00:02:54,840 --> 00:02:59,390
So we're short and then anything within the object is contained within the curly brackets.

39
00:02:59,670 --> 00:03:04,260
So if we want to add content into the object, we can have whatever we want.

40
00:03:04,290 --> 00:03:11,970
So give it a name and then a value associated with it so we can have hello world or whatever string,

41
00:03:11,970 --> 00:03:18,010
no array object as well as function associated with this deemed value.

42
00:03:18,030 --> 00:03:25,140
So if we have something like greet and again we could create another string, we could have a number,

43
00:03:25,710 --> 00:03:29,430
we could also have an array within the object.

44
00:03:29,700 --> 00:03:32,130
So this is all simple data types.

45
00:03:32,130 --> 00:03:37,770
So then this array can contain different values as complex as you want.

46
00:03:37,800 --> 00:03:41,210
Within the object, we can have an object within an object.

47
00:03:41,460 --> 00:03:47,160
So this is all indicated the same way and then this object would be again broken down.

48
00:03:47,580 --> 00:03:53,190
So let's refresh and look at how the object looks within the browser.

49
00:03:53,380 --> 00:03:56,940
So we've got all of that great stuff contained within the object.

50
00:03:57,180 --> 00:04:02,460
And as you can see, there is a ton of information and we can go really deep when we are creating these

51
00:04:02,460 --> 00:04:04,110
objects as well.

52
00:04:04,110 --> 00:04:10,050
If we want it to return the information or if we want to add to this object, it's relatively easy to

53
00:04:10,050 --> 00:04:17,230
do what we just reference that mean object and then we can use the dot notation to add content to it.

54
00:04:17,490 --> 00:04:21,360
So if I want to have add, I could say hi, add it.

55
00:04:21,370 --> 00:04:26,880
So there's a number of different ways to update and to add so you can use the dot notation or you can

56
00:04:26,880 --> 00:04:28,220
use the bracket notation.

57
00:04:28,470 --> 00:04:30,230
So all of this is going to be the same.

58
00:04:30,240 --> 00:04:33,090
And within the bracket notation, it's the square brackets.

59
00:04:33,090 --> 00:04:34,650
So it looks a little bit like an array.

60
00:04:34,830 --> 00:04:40,140
And then here's where you've got the name that's associated with it and then the value is on the right

61
00:04:40,140 --> 00:04:40,710
hand side.

62
00:04:41,010 --> 00:04:46,650
So now if I list out my object, you're going to see that all of this information that I've just added

63
00:04:46,770 --> 00:04:47,780
has now been added.

64
00:04:47,790 --> 00:04:54,510
And so there's the ad which says, hi, we've got the test, one which has a value of two, and then

65
00:04:54,510 --> 00:04:56,100
you can update these as well.

66
00:04:56,130 --> 00:04:57,990
So my object, Dorte.

67
00:04:57,990 --> 00:04:59,640
And so if we wanted to change.

68
00:04:59,760 --> 00:05:05,880
And we can change it to a number of one or two, and then we can list out the object again and you can

69
00:05:05,880 --> 00:05:07,200
see that it's changed.

70
00:05:07,200 --> 00:05:09,130
So it's been updated within the object.

71
00:05:09,420 --> 00:05:14,330
So those are the primary ways to create an object and then add content into the object.

72
00:05:14,550 --> 00:05:21,120
And we also saw one more example where we've got another object and this one was a person and it actually

73
00:05:21,120 --> 00:05:22,560
returned back some details.

74
00:05:22,830 --> 00:05:24,620
So let's create that one as well.

75
00:05:24,750 --> 00:05:28,050
And you can use VAR and you can also use const as well.

76
00:05:28,200 --> 00:05:33,720
So depending on the scope that you want to create, because the way that objects work when JavaScript

77
00:05:33,900 --> 00:05:35,320
they reference an instance.

78
00:05:35,640 --> 00:05:41,640
So even though it's const, we still have the ability to update the values that are contained within

79
00:05:41,640 --> 00:05:47,010
there because we're not actually updating the object itself, so we're not updating the object.

80
00:05:47,190 --> 00:05:52,290
So if we are reassigning this object to something entirely different, like a string or something like

81
00:05:52,290 --> 00:05:54,420
that, then we would throw an error.

82
00:05:54,640 --> 00:06:00,090
But in this case, we're still able to make the updates because it's referencing a part that's referenced

83
00:06:00,090 --> 00:06:01,040
within the memory.

84
00:06:01,170 --> 00:06:05,350
So we are able to use const in order to declare the object.

85
00:06:05,580 --> 00:06:12,480
So even if I was to take my object and if I do something like this might object equals test, I'm going

86
00:06:12,480 --> 00:06:15,000
to throw an error because we're using a const.

87
00:06:15,150 --> 00:06:20,340
But everything else, if we're working within the names and the values are contained within the object,

88
00:06:20,460 --> 00:06:22,120
we're still OK and we're good to go.

89
00:06:22,350 --> 00:06:23,700
So let's do that last one.

90
00:06:23,730 --> 00:06:24,980
We're we're including the method.

91
00:06:24,990 --> 00:06:28,350
So creating a person and you could use your own name as well.

92
00:06:28,380 --> 00:06:32,460
So we've got first and from my case, that's Lawrence.

93
00:06:32,610 --> 00:06:33,630
And then the last name.

94
00:06:34,260 --> 00:06:36,950
You can throw in a number there if you want as well.

95
00:06:37,110 --> 00:06:40,920
And this is the most important one where we're going to be attaching.

96
00:06:41,520 --> 00:06:47,490
So we've got the name and the value on the right hand side is going to be a function and this function

97
00:06:47,490 --> 00:06:50,300
is going to be returning back some content.

98
00:06:50,640 --> 00:06:56,640
So using return and we're going to use a template literals for using the tactics that's just above the

99
00:06:56,640 --> 00:07:01,130
tab to the left of the one on your keyboard or on most keyboards.

100
00:07:01,140 --> 00:07:07,590
And this gives us the ability to add in variables so we can reference the content of the object using

101
00:07:07,590 --> 00:07:08,160
this.

102
00:07:08,550 --> 00:07:12,060
And because this one has a last name, so do last name.

103
00:07:12,390 --> 00:07:16,260
And then here we can write the rest of the string that we want to output.

104
00:07:16,620 --> 00:07:22,050
So again, we want to maybe reference the first name here, dollar sign and there are brackets and then

105
00:07:22,050 --> 00:07:22,690
the ID.

106
00:07:22,860 --> 00:07:25,350
So this is just regular string content here.

107
00:07:25,500 --> 00:07:28,630
The reference in the objects, we're going to add the ID.

108
00:07:29,010 --> 00:07:30,720
So lastly, so let's see what happens.

109
00:07:31,140 --> 00:07:34,500
So now we've got another one that we've created called person.

110
00:07:34,500 --> 00:07:38,580
If we want to get the first name or the last name, we can just do first.

111
00:07:38,970 --> 00:07:45,150
It returns back first name, person last returns back, last name so we can get that information and

112
00:07:45,150 --> 00:07:47,910
if we want to get personal and details.

113
00:07:48,000 --> 00:07:49,050
So this is a function.

114
00:07:49,050 --> 00:07:53,520
So we want to invoke the function, use the round of brackets to invoke the function and you can see

115
00:07:53,520 --> 00:07:58,890
that it returns back that template literal, that string there we just constructed using the content

116
00:07:58,890 --> 00:08:00,190
that's contained within the object.

117
00:08:00,210 --> 00:08:01,590
So go ahead, try this out.

118
00:08:01,710 --> 00:08:05,220
And we've got some more really cool things with JavaScript coming up.