1
00:00:02,266 --> 00:00:05,300
- [Maximilian] So that's
how we can create objects.

2
00:00:05,300 --> 00:00:07,900
Now, the bigger your objects get

3
00:00:07,900 --> 00:00:10,833
the harder it can get to fully read

4
00:00:10,833 --> 00:00:14,600
and understand them if you
are looking at code like this.

5
00:00:14,600 --> 00:00:18,633
And that's why typically we split objects

6
00:00:18,633 --> 00:00:22,200
and their properties
across multiple lines.

7
00:00:22,200 --> 00:00:24,066
After the opening curly brace,

8
00:00:24,066 --> 00:00:28,400
we often add a line break to
have the first key value pair.

9
00:00:28,400 --> 00:00:29,933
The label is our key

10
00:00:29,933 --> 00:00:31,766
and then this is the value.

11
00:00:31,766 --> 00:00:33,333
And after the comma,

12
00:00:33,333 --> 00:00:35,400
if we have another property,

13
00:00:35,400 --> 00:00:37,400
we add another line break.

14
00:00:37,400 --> 00:00:38,566
And again,

15
00:00:38,566 --> 00:00:41,700
and then another one in front
of the closing curly brace.

16
00:00:41,700 --> 00:00:43,533
This is a bit easier to read.

17
00:00:44,500 --> 00:00:46,666
And hear you now see that some

18
00:00:46,666 --> 00:00:50,400
white space was added
automatically by my IDE.

19
00:00:50,400 --> 00:00:53,700
It's not required technically,
we could remove it

20
00:00:53,700 --> 00:00:55,833
and the code works either way.

21
00:00:55,833 --> 00:00:56,666
But of course,

22
00:00:56,666 --> 00:00:59,866
it is a bit easier to read if
we do have that white space,

23
00:00:59,866 --> 00:01:01,900
and if you wanna re add it,

24
00:01:01,900 --> 00:01:04,733
you can simply hit the tab button

25
00:01:04,733 --> 00:01:07,000
and it will automatically indented a bit

26
00:01:07,000 --> 00:01:09,266
or that format document button

27
00:01:09,266 --> 00:01:10,700
or shortcut,

28
00:01:10,700 --> 00:01:14,300
which also will automatically format this.

29
00:01:14,300 --> 00:01:16,500
And that's now simply
a bit easier to read.

30
00:01:17,400 --> 00:01:21,333
You could also add line
breaks like this for arrays,

31
00:01:21,333 --> 00:01:22,600
if you wanted to,

32
00:01:22,600 --> 00:01:24,833
if that helps you with readability.

33
00:01:24,833 --> 00:01:25,666
And there,

34
00:01:25,666 --> 00:01:28,933
it also makes sense if this
would be a longer array,

35
00:01:28,933 --> 00:01:30,266
but for this array,

36
00:01:30,266 --> 00:01:33,000
I think having it in one
line is okay as well.

37
00:01:33,000 --> 00:01:36,066
But you could add those
line breaks as well.

38
00:01:36,066 --> 00:01:38,133
Now, when it comes to adding a line breaks

39
00:01:38,133 --> 00:01:40,500
and splitting code across multiple lines,

40
00:01:40,500 --> 00:01:43,300
there also are a couple of other rules

41
00:01:43,300 --> 00:01:46,200
which are worth keeping in mind.

42
00:01:46,200 --> 00:01:47,133
And for example,

43
00:01:47,133 --> 00:01:48,833
inside of a string,

44
00:01:48,833 --> 00:01:50,366
so between those quotes,

45
00:01:50,366 --> 00:01:53,233
you are not allowed to add a line break.

46
00:01:53,233 --> 00:01:55,933
You'll see, I'm getting
an error here in my IDE,

47
00:01:55,933 --> 00:01:58,000
if I try to do that.

48
00:01:58,000 --> 00:01:59,966
If you would have a longer text

49
00:01:59,966 --> 00:02:03,200
and you wanna split it
across multiple lines,

50
00:02:03,200 --> 00:02:05,733
there are two main ways of doing that.

51
00:02:05,733 --> 00:02:08,366
You can either add a plus here,

52
00:02:08,366 --> 00:02:12,200
which actually will add another
string to the first one,

53
00:02:12,200 --> 00:02:15,033
it will combine two strings together.

54
00:02:15,033 --> 00:02:18,500
so you can use plus not just with numbers,

55
00:02:18,500 --> 00:02:20,200
but also with strings.

56
00:02:20,200 --> 00:02:24,466
And then you could have your
other string in a new line

57
00:02:24,466 --> 00:02:28,100
and that would work because
JavaScript would understand

58
00:02:28,100 --> 00:02:30,600
that it should look for another value

59
00:02:30,600 --> 00:02:34,866
that belongs to this
operation in the next line.

60
00:02:34,866 --> 00:02:36,866
So that would work.

61
00:02:36,866 --> 00:02:38,833
You could even write it like this

62
00:02:38,833 --> 00:02:40,800
and it would still work.

63
00:02:40,800 --> 00:02:43,233
That is all valid Java script,

64
00:02:43,233 --> 00:02:47,066
though typically you would
not write it like this because

65
00:02:47,066 --> 00:02:49,233
that's not super obvious

66
00:02:49,233 --> 00:02:50,766
that this belongs together.

67
00:02:52,133 --> 00:02:54,666
But you can split longer
strings like this.

68
00:02:54,666 --> 00:02:56,433
Alternatively,

69
00:02:56,433 --> 00:03:01,433
you can also use back ticks
instead of single quotes.

70
00:03:01,533 --> 00:03:02,800
It looks similar,

71
00:03:02,800 --> 00:03:05,900
but it's a different
character on your keyboard.

72
00:03:05,900 --> 00:03:08,300
And if you use such back ticks,

73
00:03:08,300 --> 00:03:13,300
then you can actually add a
line break inside of the string.

74
00:03:13,466 --> 00:03:18,033
So that would be an
alternative for longer text.

75
00:03:18,033 --> 00:03:20,933
Here I will go back to single quotes since

76
00:03:20,933 --> 00:03:24,566
those are also easier to
reach for me on the keyboard

77
00:03:24,566 --> 00:03:26,700
and are more commonly used.

78
00:03:26,700 --> 00:03:30,166
But these back ticks
can actually help you,

79
00:03:30,166 --> 00:03:33,933
if you need such a line
break inside of the string.

80
00:03:33,933 --> 00:03:35,333
Now throughout the course,

81
00:03:35,333 --> 00:03:38,566
you will also see some
other line breaks here

82
00:03:38,566 --> 00:03:42,500
and there and you will see
how I structure my code.

83
00:03:42,500 --> 00:03:44,533
I will also typically explain

84
00:03:44,533 --> 00:03:47,800
why something is structured
in a certain way,

85
00:03:47,800 --> 00:03:50,366
but in general, as a developer,

86
00:03:50,366 --> 00:03:52,766
especially in JavaScript code,

87
00:03:52,766 --> 00:03:55,000
but also in HTML code,

88
00:03:55,000 --> 00:03:57,700
where we also work with indentation

89
00:03:57,700 --> 00:03:59,466
and new lines,

90
00:03:59,466 --> 00:04:03,533
our goal is always code readability.

91
00:04:03,533 --> 00:04:05,733
We always want to write our code,

92
00:04:05,733 --> 00:04:07,766
no matter which kind of code it is,

93
00:04:07,766 --> 00:04:10,700
such that it's easy to read,

94
00:04:10,700 --> 00:04:12,600
that is easy to grasp,

95
00:04:12,600 --> 00:04:14,466
and we don't need to check if

96
00:04:14,466 --> 00:04:18,565
there are multiple statements
in one of the same line,

97
00:04:18,565 --> 00:04:21,132
but instead we go for short lines,

98
00:04:21,132 --> 00:04:25,000
concise code and clearly structured code.

99
00:04:25,000 --> 00:04:26,333
And that's there for also

100
00:04:26,333 --> 00:04:28,233
what we'll go for in this course

101
00:04:28,233 --> 00:04:30,233
and what we'll teach you in this course.