1
00:00:02,440 --> 00:00:07,060
So before we work on the actual application here with all the logic we need,

2
00:00:07,060 --> 00:00:10,420
let's quickly make sure we all understand what an object is.

3
00:00:10,420 --> 00:00:11,820
Well I guess we already did that

4
00:00:11,830 --> 00:00:18,030
but let's create one. So we can create an object and store it in a constant or in a variable, both works,

5
00:00:18,020 --> 00:00:19,970
it's a normal value in the end,

6
00:00:20,040 --> 00:00:25,240
now for example create that good old person object with which we worked multiple times already.

7
00:00:25,240 --> 00:00:30,310
Now we create it here with the curly braces and that's the object literal notation as it's called

8
00:00:30,520 --> 00:00:32,910
and in there, you can have these key-value pairs.

9
00:00:32,920 --> 00:00:39,760
Now as I said, properties are key-value pairs which store some static values or some values and not

10
00:00:39,760 --> 00:00:40,900
functions basically

11
00:00:40,900 --> 00:00:45,970
and if you store a function as a value on a certain key, then this is called a method.

12
00:00:45,970 --> 00:00:53,140
Now both properties and methods are created here by entering some name of your choice, for example name

13
00:00:53,680 --> 00:00:55,920
and then a colon and then the value. Important,

14
00:00:55,960 --> 00:01:01,720
in here you don't have any const or let or anything like that, you just have name or whatever name

15
00:01:01,720 --> 00:01:06,570
you want to use for your key, colon and then the value, for example Max.

16
00:01:06,580 --> 00:01:10,890
Now we can also add an age here for example and store 30, 

17
00:01:10,900 --> 00:01:16,120
we could add hobbies and have an array in there, an array is an object and therefore this of course proves

18
00:01:16,150 --> 00:01:22,720
that we can have an object inside of an object, that is absolutely okay. There there we could have sports and

19
00:01:22,720 --> 00:01:30,430
cooking as hobbies and we could also add a method, for example greet which simply is a function assigned

20
00:01:30,640 --> 00:01:36,610
to a property here where we can then for example use the console here for the moment or also alert of

21
00:01:36,610 --> 00:01:41,020
course to show an alert box where we say hi there,

22
00:01:41,050 --> 00:01:42,160
something like that.

23
00:01:42,460 --> 00:01:48,640
Now with that we created a person, an object and we can interact with that with that dot notation,

24
00:01:48,640 --> 00:01:54,130
we did this multiple times and this is probably not new. You can enter a dot and now you have access to

25
00:01:54,130 --> 00:02:02,080
all the properties and methods that are stored on this object, for example .age, .greet which

26
00:02:02,080 --> 00:02:07,360
is a function in which we therefore can call as such and so on and hence if I for example save that

27
00:02:07,360 --> 00:02:12,490
code and we go to our site, this is by the way what's getting rendered with that HTML and CSS

28
00:02:12,490 --> 00:02:17,620
which is part of the project and we reload this, we see hi there before this renders.

29
00:02:17,890 --> 00:02:24,460
So this is what happens here with this basic object and thus far that's nothing too new.

30
00:02:24,460 --> 00:02:30,490
Now let me dive into some new things regarding the properties, how you can add them dynamically after

31
00:02:30,490 --> 00:02:37,630
an object was created, how you can delete them and which restrictions but also flexibility you have

32
00:02:37,660 --> 00:02:40,540
when it comes to picking a name and to accessing a property.