Original subtitles

1 1

So after arrays, 2

2

it's now time to learn about 3

3

another data structure in JavaScript, which is objects. 4

4

So up until this point, 5

5

we have been using arrays as a data structure 6

6

to basically store multiple related values 7

7

in the same variable. 8

8

So let's just quickly recap that. 9

9

So Jonah's array, 10

10

and you don't need to write this code, okay? 11

11

I'm really just trying to recap here. 12

12

So we have the first name, 13

13

and you see that I'm writing this in multiple lines now. 14

14

And that is perfectly acceptable. 15

15

So, sometimes that's easier to give us 16

16

an overview of a data structure. 17

17

As long as we remember the commas here 18

18

after each of the elements, we're gonna be fine. 19

19

So then we have kind of this age calculation here. 20

20

Then we add the job, 21

21

and even an array of friends. 22

22

So we have an array inside an array. 23

23

So Michael, Peter, and Steven. 24

24

So again, this is basically a data structure 25

25

which combines multiple values 26

26

which all belong to this Jonas entity. 27

27

Now we know intuitively 28

28

that this first element here of the array 29

29

should be called the first name. 30

30

And this one is the last name. 31

31

This one could be called age, 32

32

this one could be called job, 33

33

and this one could be called the friends. 34

34

But in arrays, 35

35

there is no way of giving these elements a name. 36

36

And so we can't reference them by name, 37

37

but only by their order number 38

38

in which they appear in the array. 39

39

And so to solve that problem, 40

40

we have another data structure in JavaScript, 41

41

which is objects. 42

42

So in objects, we actually define key value pairs. 43

43

And so then we can give each of these values here, a name. 44

44

So let's see how. 45

45

So again, we're defining a variable. 46

46

And so I'm calling this one Jonas now, 47

47

and then this is the actual object. 48

48

So now instead of the square brackets 49

49

that we use for arrays, 50

50

we use the curly brackets or curly braces. 51

51

So this is the second time we're seeing the curly braces. 52

52

First, we saw them to define a code block, 53

53

for example, in an if else statement, 54

54

or if a switch statement, 55

55

or even to define a function body. 56

56

But this is different, okay? 57

57

So these curly braces here are to define a new object. 58

58

And so let's now fill up this object with key value pairs. 59

59

So the key is basically the variable name. 60

60

So let's say, first name, 61

61

then a colon, 62

62

and then the value. 63

63

And the value can be of any type that we want here. 64

64

Then to define another key value pair, 65

65

we just separate them with commas, 66

66

just like in the array. 67

67

So last name, 68

68

and then colon, remember, 69

69

Schmedtmann, then the age, 70

70

and once more, we can put any expression here. 71

71

So this will be calculated, 72

72

and then will be assigned to age. 73

73

Then the job, 74

74

which is teacher. 75

75

And finally, 76

76

the friends, 77

77

and let's just copy this array from here, okay? 78

78

And so with this we have now an object 79

79

which contains five key value pairs. 80

80

So again, 81

81

these are the five keys, 82

82

and then each key has a value. 83

83

And so essentially with this, 84

84

we were able to assign a name 85

85

to each of these values that we had. 86

86

So that's something that was impossible in arrays, 87

87

but now it is possible. 88

88

Now each of these keys is also called a property. 89

89

So we say that this object here, 90

90

so this object, which is called Jonas has five properties. 91

91

So property first name with the value of Jonas, 92

92

property last name with the value of Schmedtmann, 93

93

and so on and so forth. 94

94

Now, objects are probably the most fundamental concept 95

95

in the whole of JavaScript language. 96

96

So there are many ways of creating objects. 97

97

And simply writing an object in the code like this 98

98

is probably the simplest way of creating an object. 99

99

So here with the curly braces. 100

100

So there are multiple ways of creating objects. 101

101

But again, using the curly braces like this 102

102

is the easiest one, 103

103

and it's called the object literal Syntax 104

104

because we are literally writing down 105

105

the entire object content. 106

106

So to recap, just like arrays, 107

107

we use objects to essentially group together 108

108

different variables that really belong together 109

109

such as the properties of Jonas 110

110

that we've been working with. 111

111

Now, the big difference between objects and arrays, 112

112

is that in objects, the order of these values 113

113

does not matter at all when we want to retrieve them. 114

114

And that's important to keep in mind. 115

115

So in arrays, 116

116

the order in which we specify the elements matters a lot 117

117

because that's how we access these elements, right? 118

118

So we can only access array elements 119

119

using their order number. 120

120

This means that we should use arrays for more order data, 121

121

and objects for more unstructured data. 122

122

And data that we actually want to name, 123

123

and then retrieve from the object, 124

124

based on that name. 125

125

But how do we actually do that? 126

126

So how do we get data from an object? 127

127

And that's exactly what the next lecture is about. 128

128

So, see you there in a second.