1
00:00:02,200 --> 00:00:06,160
Now to start, let me again clarify what exactly objects are.

2
00:00:06,220 --> 00:00:11,620
Now of course we worked with objects a lot throughout this course but it's super important to make sure that

3
00:00:11,620 --> 00:00:17,110
we all understand and are on the same page regarding the definition of objects.

4
00:00:17,110 --> 00:00:24,310
Now objects are core data structures in Javascript, an object is a super important data structure because

5
00:00:24,310 --> 00:00:29,590
it typically is used or helps us reflect real world entities.

6
00:00:29,590 --> 00:00:30,910
Now this might sound strange,

7
00:00:30,910 --> 00:00:32,220
what does this mean?

8
00:00:32,230 --> 00:00:39,250
It means that with objects in Javascript, we have a way of working with things like buttons or movies

9
00:00:39,250 --> 00:00:41,610
which are things to us, right?

10
00:00:41,620 --> 00:00:47,860
A button, even if it's on a web page which is digital of course, even there it's a thing to us humans.

11
00:00:47,860 --> 00:00:49,570
We all know what's meant

12
00:00:49,570 --> 00:00:55,420
if I talk about a button on a web page, we have something in mind if I talk about a movie.

13
00:00:55,570 --> 00:01:01,510
It's no coincidence that when we then create a movie here for example in code, it has things that would

14
00:01:01,510 --> 00:01:05,430
make sense for a movie to have, a title, a preview image

15
00:01:05,440 --> 00:01:11,160
basically, a rating. So we can think as we think in the real world

16
00:01:11,200 --> 00:01:17,470
but now when we write our code and that's how we do want to write our code. We don't want to write some

17
00:01:17,920 --> 00:01:24,910
abstract code which you don't really understand if you're not a programmer, you might not understand

18
00:01:24,910 --> 00:01:30,730
the syntax but having a look at that, it's probably fairly easy to understand that we're describing a

19
00:01:30,730 --> 00:01:35,490
movie, we might not know what we do with it but this describes a movie.

20
00:01:35,530 --> 00:01:43,480
So that's the idea behind objects, we describe real world entities, we allow ourselves to write code that

21
00:01:43,480 --> 00:01:46,130
makes sense to humans if you will,

22
00:01:46,420 --> 00:01:50,770
so we can apply our real world logic to coding in the end.

23
00:01:50,770 --> 00:01:56,600
Now technically, objects in Javascript are of course data structures that are made up of properties,

24
00:01:56,620 --> 00:02:02,470
these are these key-value pairs and methods. Methods in the end are also key-value pairs but the value

25
00:02:02,470 --> 00:02:05,560
is a function that's tied to that object.

26
00:02:05,560 --> 00:02:09,400
So you could say properties are variables in an object,

27
00:02:09,400 --> 00:02:11,800
methods are functions in an object.

28
00:02:12,220 --> 00:02:18,520
So we use properties to store data, data that somehow is related in one and the same object and then

29
00:02:18,520 --> 00:02:21,490
maybe some actions that makes sense for this object.

30
00:02:21,490 --> 00:02:26,560
Now we haven't worked too much with methods throughout this course, that will change in this module and that

31
00:02:26,560 --> 00:02:31,600
will actually be a very powerful feature when we work with objects in Javascript.

32
00:02:31,600 --> 00:02:37,390
So in the end, objects allow us to group related data together and also they allow us to split our code

33
00:02:37,660 --> 00:02:39,470
into logical pieces.

34
00:02:39,520 --> 00:02:45,920
We don't have to manage everything in tons of variables which are thrown into our script file,

35
00:02:45,970 --> 00:02:50,860
instead we have some objects that help us do different things,

36
00:02:50,890 --> 00:02:57,420
now of course there's a broad variety of use cases for such objects. You might have simple objects like

37
00:02:57,540 --> 00:03:03,210
just a movie which you use somewhere and more complex objects like such a DOM node which actually has

38
00:03:03,210 --> 00:03:08,810
a lot of built-in methods that help you interact with it, query its children

39
00:03:08,940 --> 00:03:15,210
and also a lot of built-in properties that help you style this node or change its value or whatever it

40
00:03:15,210 --> 00:03:15,770
is,

41
00:03:15,780 --> 00:03:20,310
so there are a lot of things you can do with it depending on which kind of object you're working with.

42
00:03:20,310 --> 00:03:25,140
So objects are extremely versatile and in the end, power Javascript.

43
00:03:25,140 --> 00:03:30,380
So what is an object in Javascript then or how do you see that something is an object

44
00:03:30,390 --> 00:03:36,330
if you didn't create it yourself with the curly braces? Well in Javascript you must never forget that

45
00:03:36,330 --> 00:03:42,750
you have two types of values - primitive values and reference values and in the end, reference values are

46
00:03:42,810 --> 00:03:47,270
objects, so only objects are reference values to put it like that.

47
00:03:47,490 --> 00:03:54,150
Now primitive values are these types of values - numbers, strings, booleans, null, undefined and symbol and

48
00:03:54,150 --> 00:03:56,260
we haven't had a look at symbol yet,

49
00:03:56,280 --> 00:04:00,570
it's an advanced niche type which I'll cover way later in the course

50
00:04:00,720 --> 00:04:05,860
but the other types should be familiar to you, especially numbers, strings and booleans.

51
00:04:06,180 --> 00:04:07,850
Now on the other hand, reference values

52
00:04:07,860 --> 00:04:13,550
as I said, that are just objects. So everything else with which you work, for example DOM nodes and so

53
00:04:13,560 --> 00:04:13,940
on,

54
00:04:14,070 --> 00:04:15,650
well that's an object.

55
00:04:15,650 --> 00:04:18,960
Objects are the things you create on your own with these curly braces,

56
00:04:18,960 --> 00:04:22,880
this is called the object literal notation to create an object,

57
00:04:22,890 --> 00:04:29,640
so you're creating an object by creating or by writing such an object literal but we also for example

58
00:04:29,640 --> 00:04:37,050
have arrays and whilst arrays are of course specific types of objects with that length property which automatically

59
00:04:37,050 --> 00:04:37,910
adjusts

60
00:04:37,950 --> 00:04:44,280
and with that special functionality where we can use it in a for/of loop and we can't do that with any

61
00:04:44,280 --> 00:04:50,280
object, only with these iterables as you learned. So arrays are special types of objects but they're also just

62
00:04:50,310 --> 00:04:55,920
objects in the end. DOM nodes, these are also objects, the things which we select in our DOM,

63
00:04:55,920 --> 00:05:02,010
these are objects and much much more. Anything which is not a number, a string, a boolean, null, undefined

64
00:05:02,070 --> 00:05:05,520
or such a symbol and you don't have to worry about the symbol here,

65
00:05:05,520 --> 00:05:10,950
that's not something you'll encounter in your normal Javascript code, so anything else is an object.

66
00:05:11,670 --> 00:05:14,060
So now that we clarified what objects are,

67
00:05:14,090 --> 00:05:17,490
let's dive into some code. Now for this module here,

68
00:05:17,490 --> 00:05:22,830
I prepared a simple demo application for you again where we will actually do more than just log stuff

69
00:05:22,830 --> 00:05:24,060
to the console.

70
00:05:24,090 --> 00:05:30,360
Again, we're back to some movies, here we'll later be able to add our favorite movies, add some extra information

71
00:05:30,360 --> 00:05:34,280
of our choice to them and then add them to a list which we then can even filter,

72
00:05:34,290 --> 00:05:37,200
so where we can enter a search term and filter.

73
00:05:37,200 --> 00:05:42,630
Now we start with absolutely nothing because we have all the tools we need but we also won't dive right

74
00:05:42,690 --> 00:05:49,890
into this app because there are a couple of things I want to recap about objects and I want to introduce

75
00:05:49,980 --> 00:05:51,900
about objects which we haven't learned yet.