1
00:00:00,570 --> 00:00:06,480
This lesson, we are going to be looking at JavaScript objects and how objects work within JavaScript

2
00:00:06,660 --> 00:00:11,340
and they're very much like arrays, they give us the ability to hold multiple pieces of information.

3
00:00:11,550 --> 00:00:17,130
There's an example over at the Mozilla developer network where they've got an object as a person and

4
00:00:17,130 --> 00:00:19,320
then they build out the person's properties.

5
00:00:19,320 --> 00:00:25,770
So person has a name, age, gender, interests, and then also with JavaScript objects.

6
00:00:25,860 --> 00:00:31,590
And this is one that big difference between JSON and JavaScript objects within the JavaScript objects

7
00:00:31,590 --> 00:00:36,460
we can run functions, but within JSON it's a strictly for data.

8
00:00:36,630 --> 00:00:40,850
So we are going to be focusing on the data part of the JavaScript objects.

9
00:00:41,130 --> 00:00:46,060
So let's open up the ED and we're going to construct our own JavaScript object.

10
00:00:46,080 --> 00:00:51,090
So this is going to be a person and a person will have multiple properties.

11
00:00:51,390 --> 00:00:57,340
They can have their first name and they can also have a last name.

12
00:00:57,390 --> 00:01:03,010
So in order to construct an object, you use the colon to assign a value to the property.

13
00:01:03,330 --> 00:01:04,860
So this is going to be the property.

14
00:01:04,860 --> 00:01:09,300
And then each property can have a value with JavaScript objects.

15
00:01:09,310 --> 00:01:16,590
You can also quote around the property and name and you don't have to within JSON.

16
00:01:16,590 --> 00:01:19,580
You do need to use the double quotes around the property name.

17
00:01:19,890 --> 00:01:25,770
So with there is also, again, that slight difference between the JavaScript objects and JSON where

18
00:01:25,770 --> 00:01:31,500
you don't have to code around the property name, but you can also use property names that have spaces.

19
00:01:31,680 --> 00:01:37,410
And in this case, you do need to code around it because with JavaScript it doesn't handle spaces for

20
00:01:37,410 --> 00:01:38,610
the property names.

21
00:01:38,940 --> 00:01:45,780
So whether you're creating a property name and if you are using one with spaces, then don't forget

22
00:01:45,780 --> 00:01:46,830
to code around it.

23
00:01:46,830 --> 00:01:48,030
And it's always good practice.

24
00:01:48,030 --> 00:01:54,390
If you want to keep and work with JSON, then to construct your JavaScript object just as it would be

25
00:01:54,390 --> 00:01:55,900
a valid adjacent item.

26
00:01:56,220 --> 00:02:03,960
So let's set up a first name for this person and also it can have multiple values so it can also have

27
00:02:03,960 --> 00:02:05,980
a last name for the person.

28
00:02:06,330 --> 00:02:10,860
So set up a last name and you could do this for yourself as well.

29
00:02:10,890 --> 00:02:13,810
So I'm just doing, as an example, setting up my name.

30
00:02:13,830 --> 00:02:15,450
So first name, last name.

31
00:02:15,720 --> 00:02:22,810
And then also we can see here within the example at the Mozilla developer network that there are interests.

32
00:02:23,010 --> 00:02:31,050
So this is an array and this allows us to have a combination of an object with an array and then make

33
00:02:31,050 --> 00:02:32,380
use of them together.

34
00:02:32,400 --> 00:02:40,080
So let's go ahead and we're going to select also one called interests and arrays as well as objects

35
00:02:40,080 --> 00:02:43,730
are are valid properties, values.

36
00:02:43,980 --> 00:02:49,860
So you can have an array and an object within an object, an array within an object, an object within

37
00:02:49,860 --> 00:02:50,270
an array.

38
00:02:50,280 --> 00:02:53,930
And so word sofort and we are going to have multiple examples coming up.

39
00:02:54,210 --> 00:03:03,730
So some of my interests might include JavaScript, of course, and I also might be interested in HTML.

40
00:03:03,750 --> 00:03:06,440
So let me add in another item in there.

41
00:03:06,870 --> 00:03:13,850
So HTML and then also let's go ahead and add in CSR for cascading style sheets.

42
00:03:14,460 --> 00:03:22,110
So this constructs the object person and in order to see that within the console and the console is

43
00:03:22,110 --> 00:03:28,410
a really nice way to output object information as well as array information so that you can really see

44
00:03:28,410 --> 00:03:30,440
it output really nice and neatly.

45
00:03:30,660 --> 00:03:39,330
I'm going to move the doc at the bottom and then let's open up the console and it's giving me an error

46
00:03:39,330 --> 00:03:43,290
because it's not running the index files.

47
00:03:43,290 --> 00:03:48,120
So let's stop the live server and then we'll open with the live server.

48
00:03:48,390 --> 00:03:50,260
So it looked like the live server had stopped.

49
00:03:50,790 --> 00:03:58,500
So now when I run the live server, the index file is running and we see the object information here

50
00:03:58,500 --> 00:04:00,540
is being presented within the console.

51
00:04:00,840 --> 00:04:01,920
So there's the first name.

52
00:04:01,920 --> 00:04:06,480
There's the last name in the interests and the interests, just as we saw on the last lesson, because

53
00:04:06,480 --> 00:04:11,700
this is an array, it can hold multiple pieces of information and then we can see them listed out.

54
00:04:11,700 --> 00:04:14,130
And arrays always have the same properties.

55
00:04:14,340 --> 00:04:18,040
So you can always get the length of the items contained within the array.

56
00:04:19,220 --> 00:04:22,230
So we go ahead and create your own object.

57
00:04:22,260 --> 00:04:27,930
So create first name, last name, some interests and you can include other property names.

58
00:04:29,230 --> 00:04:34,180
You can possibly do here, do it at the end of the lesson, so a few other things before we conclude

59
00:04:34,180 --> 00:04:40,890
this lesson about objects and that's assigning and returning back values are contained within the object.

60
00:04:41,230 --> 00:04:47,560
So this particular object, the object name is person, and we're already liking it out into the console.

61
00:04:47,740 --> 00:04:53,080
But if we want to get information that's contained within the person, we use the property names.

62
00:04:53,080 --> 00:04:56,830
So if we want to get the first name, we could specify the first name.

63
00:04:56,830 --> 00:05:02,370
And that's going to return back the associated value for first time with objects.

64
00:05:02,380 --> 00:05:04,380
You can either use the DOT notation.

65
00:05:04,390 --> 00:05:10,240
So that's the one that we're most familiar with doing with the person and dot first name.

66
00:05:10,570 --> 00:05:12,800
And you can also use the bracket notation.

67
00:05:13,120 --> 00:05:20,140
Now, oftentimes, if you are using more of a JSON type format, you might prefer to use the bracket

68
00:05:20,140 --> 00:05:24,080
notation because it does provide Fleck's more flexibility within the property name.

69
00:05:24,430 --> 00:05:31,780
So in this case, when we list out person, I can't say person space first name as this won't return

70
00:05:31,780 --> 00:05:33,820
back anything that's going to return back an error.

71
00:05:34,150 --> 00:05:39,250
So it is the property name, but because there's a space, it's throwing an error.

72
00:05:39,280 --> 00:05:44,980
So if I do want to return back, I would use the bracket notation and then within the bracket notation

73
00:05:45,130 --> 00:05:52,280
I can specify the property name of first name and then we get the right value being returned back.

74
00:05:52,840 --> 00:05:58,120
Now, common practice is not to include the spaces, but this is just something that you can be aware

75
00:05:58,120 --> 00:05:58,350
of.

76
00:05:58,600 --> 00:06:06,120
And in addition to that, there's also what the bracket notation, you can make the values more flexible.

77
00:06:06,130 --> 00:06:12,670
So let's say, for instance, we have a value of X one and I'll just equal X one to.

78
00:06:15,200 --> 00:06:25,040
The word one and then X two will equal to the word two, so because we are using the bracket notation,

79
00:06:25,040 --> 00:06:30,720
this provides us a more dynamic ability to interact with the values that are contained in there.

80
00:06:31,190 --> 00:06:41,180
So let's set a value for X and set it at one and output into the console using the bracket notation.

81
00:06:42,740 --> 00:06:51,200
So person and then bracket notation, we're going to output the value of X one and also making this

82
00:06:51,200 --> 00:06:56,840
more dynamic, we're going to use the string value of X and then we're going to concatenate whatever

83
00:06:56,840 --> 00:06:58,610
our current value of access.

84
00:06:59,240 --> 00:07:02,730
So what do you think is going to be output here within the console log?

85
00:07:03,020 --> 00:07:07,500
Let's refresh it and we'll check it out so it gets returned back the value of one.

86
00:07:07,910 --> 00:07:14,120
So this what the bracket notation, it provides us some more dynamic capability of outputting content

87
00:07:14,360 --> 00:07:17,630
that is contained within the object property names.

88
00:07:17,870 --> 00:07:21,930
So even if we do something like X one plus plus.

89
00:07:22,250 --> 00:07:24,170
So that's going to increment it by one.

90
00:07:24,170 --> 00:07:27,230
And the current value of X here is going to be two.

91
00:07:27,470 --> 00:07:35,480
So X string value plus X number value of two is going to return back X to and that's where we're able

92
00:07:35,480 --> 00:07:42,590
to see X plus the value of X is going to be equal to that right property name.

93
00:07:43,760 --> 00:07:49,970
So try it out and we are going to be looping through and making more complex objects in the upcoming

94
00:07:49,970 --> 00:07:56,270
lesson challenge for this lesson, create an object, add some values into the object, use the bracket

95
00:07:56,270 --> 00:08:01,850
notation as well as the dot notation to return back to the values of the object, add an array within

96
00:08:01,850 --> 00:08:05,020
the object and return back to the values that are contained within the array.

97
00:08:05,180 --> 00:08:06,800
Before you move on to the next lesson.