Original subtitles

1 1

So maybe you've been noticing 2

2

that we have been talking a lot about ES6 features 3

3

and even newer additions to the language. 4

4

And so let's continue with that now 5

5

with yet another enhancement, 6

6

which is enhanced object literals. 7

7

And so let's take a closer look at 8

8

or restaurant object here. 9

9

So this restaurant object is an object literal, 10

10

so you can see that because we basically wrote 11

11

this object literally in our code using 12

12

this curly braces syntax. 13

13

So well you get the point, so all of this object here has 14

14

been written using the object literal syntax. 15

15

Now ES6 introduced three ways, which make it easier 16

16

to write object literals like this. 17

17

And so let's go through them one by one now, first off let's 18

18

say that we have an object that is outside of this object. 19

19

So let's take this one and create a separate object with it. 20

20

So, const opening hours equal and so now 21

21

this is its separate variable. 22

22

Now here, we need a semicolon to fix this error there 23

23

but now, we still want to have the opening hours object 24

24

inside of the restaurant. 25

25

So before ES6, we would have to write opening hours 26

26

so that's the property name that we want 27

27

and then set it equal to opening hours. 28

28

And so then, basically the restaurant object 29

29

is restored let's see that here quickly. 30

30

So you see that, here we still have 31

31

the opening hours just like before. 32

32

Now the problem here is and it's not really a problem 33

33

but it can become annoying is that this property name 34

34

is exactly the same as the variable name 35

35

from which we're getting this new object, right? 36

36

And so with enhanced object literals you don't need to write 37

37

this, so we can just do this, let me write this ES6 enhanced 38

38

object literals and so what this will do now is to take 39

39

this opening hours object and put it 40

40

into the restaurant object and create a property name 41

41

with exactly that variable name. 42

42

So as we will reload now, then you will see 43

43

that it's still here just like before. 44

44

And of course we could change this now 45

45

but then we would also have to change it here. 46

46

Otherwise, JavaScript will not know what this variable is. 47

47

And so now as you can guess we have a property called hours. 48

48

All right, so that's a very handy enhancement 49

49

and so let's not check out the second one. 50

50

So the second enhancement to object literals 51

51

is about writing methods. 52

52

So in ES6 we no longer have to create a property, 53

53

and then set it to a function expression, 54

54

like we have always been doing, right? 55

55

So essentially, we create a property just like we do all 56

56

the other properties and then we set that 57

57

to a function expression. 58

58

But again, now we no longer need to do that 59

59

we can write it in an easier way which is to get rid 60

60

of this function, even of the semicolon 61

61

and then just like this. 62

62

And so this now works exactly the same as before 63

63

but with a slightly easier syntax. 64

64

And I actually personally really prefer this new syntax, 65

65

so I'm gonna change this entire object to the new way 66

66

of writing methods, but this actually comes down 67

67

to personal preference once again. 68

68

So if you prefer the old way you can just keep it like that. 69

69

So maybe you think it's more explicit 70

70

if you can actually read the function keyword there, 71

71

but for me it's enough that we have the parenthesis here. 72

72

So that alone already shows that it has to be a function 73

73

and VS code itself is also helpful as it changes the color 74

74

of the methods to green. 75

75

So VS code is really smart in that regard. 76

76

And finally, the third enhancement is 77

77

that we can now actually compute property names instead 78

78

of having to write them out manually and literally. 79

79

And compute just means like calculate 80

80

and so let's try that here. 81

81

So let's say that we had an array with all the weekdays. 82

82

Weekdays, so Monday, Tuesday, Wednesday, Thursday, Friday, 83

83

Saturday and Sunday. 84

84

And now we wanted to take these property names here out 85

85

of that array, okay? 86

86

So instead of having to write them here manually, 87

87

so we can do that by using again the square bracket syntax. 88

88

And then in here, we can put any expression basically, 89

89

so this was Thursday, so let's say weekdays 90

90

on position number zero, one, two, three. 91

91

And of course we could use this structuring here, 92

92

but this is just a demonstration. 93

93

Anyways, so weekdays four and then here weekdays five. 94

94

But let me just show you that we could really 95

95

do anything here, so we could also compute the name 96

96

in some other way. 97

97

Let's just say, two plus two or two plus four, 98

98

so this doesn't make sense but yeah, I just want to show you 99

99

that we can do this. 100

100

Let's take a look at the object now here, opening hours 101

101

and so you see that we still get Thursday and Friday 102

102

and then here we get day six. 103

103

So we computed this property name using a template literal 104

104

and then also this expression in here. 105

105

And this is sometimes extremely helpful 106

106

to be able to do this. 107

107

So before we could only compute the values so here 108

108

for example, this could be 12 plus 12, right? 109

109

But we could not compute these property names 110

110

but now we can do that as well.