1
00:00:00,600 --> 00:00:06,330
This lesson, we're going to be looking at JavaScript objects and arrays, how objects work, what arrays

2
00:00:06,330 --> 00:00:12,540
are, how to output a value of an object or an array, also using let and const within objects.

3
00:00:12,870 --> 00:00:17,370
So objects give us the ability to contain more values within a single variable.

4
00:00:17,580 --> 00:00:20,520
There's an example of an object on the right hand side.

5
00:00:20,730 --> 00:00:24,090
So the values are written as naem value pairs.

6
00:00:24,330 --> 00:00:30,080
So they include a property that you're going to be referencing in order to pull back that property value.

7
00:00:30,300 --> 00:00:33,930
So each one of them will have a property and a value associated with it.

8
00:00:34,050 --> 00:00:38,460
And that's how we get back and that's how we can reference the values that are contained within the

9
00:00:38,460 --> 00:00:38,930
object.

10
00:00:39,150 --> 00:00:41,410
So the property doesn't need quotes.

11
00:00:41,640 --> 00:00:44,910
It's got the same naming rules as variables.

12
00:00:45,090 --> 00:00:50,640
So in giving it a variable name, just keep that in mind that it works the same way as variables which

13
00:00:50,640 --> 00:00:51,690
we are familiar with.

14
00:00:51,900 --> 00:00:58,670
Objects can also contain functions which are referred to as methods when they are inside of an object.

15
00:00:58,890 --> 00:01:05,550
So this one over here, we can call to person dot message, invoke the function and then we've got the

16
00:01:05,550 --> 00:01:07,620
function which is going to return back.

17
00:01:07,620 --> 00:01:08,120
Hello.

18
00:01:08,250 --> 00:01:14,490
And using a value that's contained within the object as well, using person first and that will return

19
00:01:14,490 --> 00:01:15,480
back that value.

20
00:01:15,930 --> 00:01:21,600
There's also a quick code snippet on describing a car as an object.

21
00:01:21,610 --> 00:01:22,110
So a notice.

22
00:01:22,110 --> 00:01:23,760
We've got a color, we've got a year.

23
00:01:23,760 --> 00:01:26,000
We've got to make a brand a price.

24
00:01:26,190 --> 00:01:32,600
So this is a typical object structure where we've got related information all contained within one value.

25
00:01:32,610 --> 00:01:39,140
When we look at car console, you can see all of the nice data is being referenced and return back there.

26
00:01:39,180 --> 00:01:43,590
There's more information available about objects at the Mozilla Developer Network.

27
00:01:43,600 --> 00:01:47,560
They have examples as well as some of the object structure.

28
00:01:47,700 --> 00:01:52,530
So first, we're declaring the objects of this person and it can be empty.

29
00:01:52,710 --> 00:01:57,180
This is how we declare that it is an object and then we can fill in the information about the object

30
00:01:57,180 --> 00:01:57,870
later on.

31
00:01:58,030 --> 00:02:03,780
You can also see more complex object where we've got an array, which we are looking at later on in

32
00:02:03,810 --> 00:02:04,770
upcoming lessons.

33
00:02:05,010 --> 00:02:11,280
We also have a number of value, string value, another array, and then we've got a couple functions

34
00:02:11,430 --> 00:02:15,830
that are making use and they're all being contained within the one variable person.

35
00:02:15,960 --> 00:02:21,430
So if you need to reference any of this information or any of these functions, you can access it with

36
00:02:21,430 --> 00:02:25,610
the person, get the information that's contained within there so you can invoke the functions.

37
00:02:25,860 --> 00:02:31,170
So it's the same way that we were typically invoking functions, except that we prefix it with the object

38
00:02:31,170 --> 00:02:35,620
name, which is person in order to reference it and access that information.

39
00:02:35,700 --> 00:02:42,330
There are two ways to get the values of DOT notation, which we've seen, and there's also bracket notation.

40
00:02:42,360 --> 00:02:46,700
So there's more dynamic in the variables can hold a property name as well.

41
00:02:46,920 --> 00:02:53,490
So this gives us more option on returning back the values and being able to utilize that information.

42
00:02:53,490 --> 00:02:56,040
You can see that there is an example of the dot notation.

43
00:02:56,190 --> 00:02:58,920
So that's how we reference the information in the DOT notation.

44
00:02:59,070 --> 00:03:03,690
And then later on they also have how we can do it with the bracket notation.

45
00:03:03,930 --> 00:03:05,260
So this is the same thing.

46
00:03:05,280 --> 00:03:10,860
So this is dot notation, this is bracket notation and it's referencing the same information that's

47
00:03:10,860 --> 00:03:12,250
contained within that object.

48
00:03:12,270 --> 00:03:14,770
We also have another code snippet, code samples.

49
00:03:14,790 --> 00:03:16,650
So first, let's set up a variable.

50
00:03:16,650 --> 00:03:22,410
We can just give it a variable name of a equal to one and declaring an object.

51
00:03:22,620 --> 00:03:23,640
So this object.

52
00:03:23,910 --> 00:03:26,310
So this will be equal to test one.

53
00:03:26,520 --> 00:03:29,730
So comma, separate them object value in here.

54
00:03:29,910 --> 00:03:37,050
So test two and we can consider logout test, we can do test a one and then with bracket notation we

55
00:03:37,050 --> 00:03:43,440
can do test and a one and notice that we do need to quote around there in order to return that value

56
00:03:43,440 --> 00:03:43,830
back.

57
00:03:44,010 --> 00:03:50,400
And what the bracket notation, we do have some more flexibility where we can add a value of a variable

58
00:03:50,550 --> 00:03:57,960
so we can do test A plus the variable A and that's going to still return back test one because a plus

59
00:03:57,960 --> 00:04:00,690
A is equivalent to a one.

60
00:04:00,870 --> 00:04:07,080
You can also, if you increment the value of A and then if you do the same statement, you're going

61
00:04:07,080 --> 00:04:14,850
to get test two, because now the value of A is two and we're looking to return back a plus A, which

62
00:04:14,850 --> 00:04:15,720
is a two.

63
00:04:15,840 --> 00:04:17,820
So now it comes to the lesson challenge.

64
00:04:18,120 --> 00:04:19,950
So favorite things object.

65
00:04:19,960 --> 00:04:23,430
So look around the room or think of whatever your favourite thing is.

66
00:04:23,430 --> 00:04:28,230
It could be a computer, a car or house friend and describe them as a JavaScript object.

67
00:04:28,440 --> 00:04:31,470
What are their properties and what are those values?

68
00:04:31,650 --> 00:04:38,790
Add the values with dot notation or bracket notation and then output that information into the console.

69
00:04:39,040 --> 00:04:41,490
Try it out and I'll show you a solution.

70
00:04:41,700 --> 00:04:44,610
So go ahead, pause the video and I'll do a quick solution for you.

71
00:04:44,850 --> 00:04:46,620
Coming up with a set up, an object.

72
00:04:46,620 --> 00:04:49,500
We can call it my car and we already have a car down there.

73
00:04:49,500 --> 00:04:51,480
And then we can use my car.

74
00:04:51,510 --> 00:04:54,960
We can add in colour values to just equal it.

75
00:04:54,990 --> 00:04:59,940
And you can console log out my car to see what's contained with.

76
00:05:00,000 --> 00:05:04,980
In the myCar object, you can see right now, all we have is black in there and notice as well that

77
00:05:05,130 --> 00:05:10,740
the object is CONSED because this is just referencing and there's going to be a little bit more on why

78
00:05:10,740 --> 00:05:14,110
it's CONSED later on in the course of my car.

79
00:05:14,130 --> 00:05:16,290
And we'll also try the bracket notation.

80
00:05:16,620 --> 00:05:22,710
So adding in a value for a year and then we can equal that to whatever year we want to select.

81
00:05:23,220 --> 00:05:27,420
And let's log out the value of car in the console.

82
00:05:27,450 --> 00:05:33,000
So now that we see we've got color, we've got a year and we can continue to add in values as well as

83
00:05:33,080 --> 00:05:36,980
we're declaring the object, we can set up some values at that point as well.