1
00:00:02,270 --> 00:00:08,540
So we know how we create an object, how we can dynamically add properties, how we can delete properties,

2
00:00:08,570 --> 00:00:13,510
how we can read properties and how we can call functions in objects.

3
00:00:13,520 --> 00:00:16,670
Now let's have a closer look at the property names we're using here,

4
00:00:16,700 --> 00:00:20,030
so at these keys. Thus far I always use keys

5
00:00:20,030 --> 00:00:26,270
like this, basically as I would use them for variable names, anything which you can use as a variable

6
00:00:26,270 --> 00:00:31,330
name can be used as a key name and keys are even more flexible than variables,

7
00:00:31,400 --> 00:00:35,540
so everything which you could use on a variable can be used as a key but not everything which you can

8
00:00:35,540 --> 00:00:37,890
use as a key name can be used as a variable

9
00:00:37,970 --> 00:00:44,320
and here's an example. Let's say I don't want to have name here as a key but first name but also not

10
00:00:44,330 --> 00:00:44,990
written like this

11
00:00:44,990 --> 00:00:47,580
but let's say written like this.

12
00:00:47,690 --> 00:00:53,360
Now as you already can tell, my IDE gives me an error here because this actually is not a valid Javascript

13
00:00:53,360 --> 00:00:54,080
syntax,

14
00:00:54,140 --> 00:00:58,520
having two separate words here, Javascript doesn't know what you mean by that,

15
00:00:58,550 --> 00:01:04,610
it tries to understand how these two words work combined and it sees that first is neither an operator

16
00:01:04,610 --> 00:01:06,260
nor some other keyword,

17
00:01:06,350 --> 00:01:13,760
so it doesn't know what first should do to name and that makes sense because if you had a variable or

18
00:01:13,760 --> 00:01:16,900
a constant, you could also not use first name like that,

19
00:01:16,910 --> 00:01:18,480
that's not supported, right?

20
00:01:18,500 --> 00:01:21,890
You must not have a whitespace in your variable name,

21
00:01:21,890 --> 00:01:27,230
it always has to be exactly one word without whitespace, without dashes and so on.

22
00:01:27,230 --> 00:01:32,720
Now the same is generally true for these object properties, first name like this for example is also

23
00:01:32,720 --> 00:01:40,790
not allowed but you have a way around that. You can use any string as a key in an object and actually

24
00:01:41,030 --> 00:01:46,730
any key you enter is automatically coerced, which is this behind the scenes automatic conversion you

25
00:01:46,730 --> 00:01:48,470
could say, to a string.

26
00:01:48,470 --> 00:01:56,720
So even age is kind of converted to a string in Javascript, so an object really just is a dictionary

27
00:01:56,720 --> 00:02:03,200
you could say of keys which are string values and of then values which can be of any kind of value.

28
00:02:03,410 --> 00:02:09,140
And for first name, Javascript is not able to automatically convert this for us because before this code

29
00:02:09,140 --> 00:02:15,200
runs and Javascript has a chance of converting it, it already breaks because it first of all tries to

30
00:02:15,200 --> 00:02:18,410
interpret this in another way which is not valid.

31
00:02:18,500 --> 00:02:21,900
Now therefore for names like this, we have to tell Javascript that

32
00:02:22,040 --> 00:02:26,870
no we want to use this as a key, it's not some calculation which you should perform or anything

33
00:02:26,870 --> 00:02:27,440
like that,

34
00:02:27,530 --> 00:02:29,240
it should just be a key name

35
00:02:29,300 --> 00:02:35,400
and how could we tell Javascript that this should be a key name which in the end is just a string?

36
00:02:35,480 --> 00:02:37,590
Well we just wrap it in quotes,

37
00:02:37,670 --> 00:02:41,090
single or double quotes, doesn't matter, either way works,

38
00:02:41,180 --> 00:02:47,120
so you can just use any string here as a key name, with a dash, with a whitespace, with multiple words,

39
00:02:47,240 --> 00:02:48,050
whatever you want,

40
00:02:48,050 --> 00:02:50,250
these are all valid key names.

41
00:02:50,270 --> 00:02:56,150
Now I will say that names like this are the exception though, you typically use names which you could

42
00:02:56,150 --> 00:02:59,090
also use on variables because on variables, this does not work,

43
00:02:59,120 --> 00:03:00,830
that's just an important side note.

44
00:03:00,920 --> 00:03:03,950
You can't have const first name,

45
00:03:03,950 --> 00:03:06,280
this does not work as you can already see in the IDE,

46
00:03:06,290 --> 00:03:08,310
this is really exclusive to objects

47
00:03:08,420 --> 00:03:13,080
and again, whilst you can use it there, it's not so common to use it like this.

48
00:03:13,190 --> 00:03:15,080
But let's say we have first name like that,

49
00:03:15,080 --> 00:03:18,280
now we have a new problem, how do we access this?

50
00:03:18,290 --> 00:03:26,000
Well you would say okay person.firstName but we have pretty much the same problem as before now, Javascript

51
00:03:26,570 --> 00:03:33,560
tries to parse this as an expression and in Javascript, this is never a valid syntax, having two words

52
00:03:33,590 --> 00:03:39,830
after each other only works if one of the words is an operator or some keyword, like here with delete

53
00:03:39,860 --> 00:03:42,380
person.age, with this delete keyword, this delete

54
00:03:42,380 --> 00:03:43,360
operator here,

55
00:03:43,400 --> 00:03:45,210
well Javascript understands this

56
00:03:45,290 --> 00:03:51,470
and then it can have a look at the thing after that keyword and see how that is affected by that keyword,

57
00:03:51,500 --> 00:03:53,020
by that operator.

58
00:03:53,090 --> 00:03:58,520
Now it tries the same here and it sees I don't know first, it's not a built-in keyword, it's not some

59
00:03:58,520 --> 00:04:03,350
operator which I know so I don't know what to do with that and what to do with the thing after it,

60
00:04:03,410 --> 00:04:05,540
therefore this doesn't work in Javascript.

61
00:04:05,630 --> 00:04:10,790
So how can we now access this key name, which I told you is valid and which we see, we're not getting

62
00:04:10,790 --> 00:04:17,250
an error here, with this notation? Well the answer is with this notation, we can't

63
00:04:17,250 --> 00:04:22,980
but there is an alternative way of accessing properties on Javascript objects and that's the square

64
00:04:22,980 --> 00:04:24,340
bracket notation.

65
00:04:24,360 --> 00:04:27,240
Now we know this notation from arrays, in arrays

66
00:04:27,240 --> 00:04:31,530
we could also use that to access the elements at certain indexes. In the end,

67
00:04:31,530 --> 00:04:34,530
that makes sense because arrays are just objects

68
00:04:34,620 --> 00:04:41,130
and this is basically just a general object notation. For array objects, we just have that built-in special

69
00:04:41,130 --> 00:04:46,890
behavior that we have certain methods to add elements to the array and they automatically get the indexes

70
00:04:46,950 --> 00:04:48,250
assigned and so on

71
00:04:48,300 --> 00:04:53,460
but other than that, we have this square bracket notation available on any object.

72
00:04:53,460 --> 00:04:58,830
Now what we enter here is now not an index number because this person object doesn't have indexes,

73
00:04:58,830 --> 00:05:04,740
it's not an array but instead here, you can enter any key name but that's now important,

74
00:05:04,740 --> 00:05:05,720
not like this,

75
00:05:05,790 --> 00:05:12,180
this would look for a variable age outside of the object and then try to read that variables value and

76
00:05:12,180 --> 00:05:15,020
find a key with that variables value in here,

77
00:05:15,120 --> 00:05:17,990
instead you pass in a string here.

78
00:05:18,030 --> 00:05:20,980
So here, you can then type first name and this is

79
00:05:20,980 --> 00:05:26,460
now how you can access the first name of person with that square bracket notation.

80
00:05:26,520 --> 00:05:33,090
So now if we save that and we reload here, we see Max being printed here and that is that result of that

81
00:05:33,090 --> 00:05:36,390
property access with square brackets.

82
00:05:36,450 --> 00:05:41,640
So this is really important to know, that you have this alternative and that this allows you to use key

83
00:05:41,640 --> 00:05:46,250
names which you normally could not use without the quotes around them.

84
00:05:46,440 --> 00:05:51,930
By the way, this is also pretty interesting because you might remember that on DOM nodes when we worked

85
00:05:51,930 --> 00:05:58,230
with the styles, for the things like background color, we had to use this camel case notation.

86
00:05:58,230 --> 00:05:59,920
Let me quickly show you what I mean.

87
00:06:00,000 --> 00:06:05,670
We have a bunch of stuff here in our HTML file and let's say I want to select that movie list for

88
00:06:05,670 --> 00:06:06,450
now,

89
00:06:06,450 --> 00:06:12,030
that's in the end an unordered list where I later want to output the movies we added. So right up here,

90
00:06:12,150 --> 00:06:16,770
I'll add movie list with document get element by ID,

91
00:06:16,830 --> 00:06:18,480
that's something you learned.

92
00:06:18,480 --> 00:06:20,310
So now we have access to the movie list

93
00:06:20,310 --> 00:06:26,610
and here, we can access the style object to work with the different CSS styles and as I said, we can for

94
00:06:26,610 --> 00:06:34,190
example access background color, color written like this and set this to red and we have to use

95
00:06:34,190 --> 00:06:38,900
this notation because background color like that would not work and therefore Javascript automatically

96
00:06:38,900 --> 00:06:41,700
gives us these translated property names

97
00:06:41,720 --> 00:06:43,430
if we want to call them like this.

98
00:06:43,440 --> 00:06:45,500
So now we could see that,

99
00:06:45,500 --> 00:06:51,890
however for this movie list we'll also have to set the style of display to block because by default

100
00:06:51,890 --> 00:06:53,660
it's hidden at the moment.

101
00:06:53,720 --> 00:07:00,320
So with these two lines added, if we save that and we reload, we got this red background down there.

102
00:07:00,320 --> 00:07:06,230
Now the interesting thing is with the square bracket notation, we can of course also access background

103
00:07:06,230 --> 00:07:07,060
color like that,

104
00:07:07,060 --> 00:07:13,790
however not exactly like that but with quotes around it as I mentioned, without quotes this here would

105
00:07:13,790 --> 00:07:20,570
lead Javascript to search for a background color variable in our other code and use the value inside

106
00:07:20,570 --> 00:07:26,360
of that variable to then look for a key on the style object with that variables value.

107
00:07:26,360 --> 00:07:29,350
So we have to wrap this in quotes and this will also work

108
00:07:29,360 --> 00:07:30,940
if we save that and reload

109
00:07:31,160 --> 00:07:37,730
but the interesting thing now is that actually the style object does not only have these translated

110
00:07:37,730 --> 00:07:42,930
property names but you also find the original CSS property names in here

111
00:07:43,040 --> 00:07:49,250
because if you wrap your property access in quotes and you use the square bracket notation, you can of

112
00:07:49,250 --> 00:07:55,370
course use background color like this because your key is a string and in the string, you can have any

113
00:07:55,370 --> 00:08:01,290
characters you want - dashes, whitespace, question mark, whatever you want, it's all possible.

114
00:08:01,370 --> 00:08:07,730
So therefore now actually we can set the background color like this and it will also work as you can

115
00:08:07,730 --> 00:08:08,510
tell.

116
00:08:08,600 --> 00:08:16,030
So that's also nice to know I guess and it shows the power of this square bracket access feature and also

117
00:08:16,040 --> 00:08:21,200
of the flexibility we have since we can use any string as a key name

118
00:08:21,320 --> 00:08:27,530
and just again because it's important, all non-string keys here which I have, like age and hobbies are

119
00:08:27,650 --> 00:08:34,310
kind of automatically converted to strings, coerced to strings by Javascript.