Instructor: Now let's move on to horizontal formatting.
With horizontal formatting,
we are talking about a single line of code
and that these lines of code should be readable
without horizontal scrolling.
So we should simply avoid very long unreadable sentences.`
And that all starts with indentation.
We should use indentation,
even if it's not required technically.
Now here is an extreme example.
This again is the disk storage class from before,
with the same code as before, but I changed the constructor.
I removed all indentation,
and instead I put all the code in one line,
it looks like this.
It's a very long line of code
and we have to scroll horizontally in order to read it.
This code would execute.
This is technically valid JavaScript code,
but of course it's not readable at all.
Hence, we should use multiple lines and also indentation,
to make it readable.
Because like this, it's perfectly readable.
If we just had multiple lines, but no indentation at all,
and if it looked like this,
therefore it would be readable.
But especially for longer functions,
it's not necessarily immediately obvious
that this code all belongs in one and the same function.
So using multiple shorter lines and using indentation
helps a lot with code readability and understandability.
Now, in addition to using indentation,
you should also break long statements
into multiple shorter ones.
And with that, I don't just mean the extreme example
I showed you a minute ago.
For example, consider line 19 here.
I changed this line to be a bit longer
because I'm not referring to this storage path
property of the class anymore, which holds the storage path,
but I'm creating the path in line instead.
And therefore we have a rather long line here.
In such cases, it would be better to extract this code
into a separate variable or constant,
like this for example,
and then use this variable or constant.
Now, it's way more readable,
even though it's the same code as before,
but we simply split this long line into multiple lines.
Now, last but not least,
when it comes to horizontal formatting,
you should also use clear and descriptive,
but not unreadably long names.
Names of variables and properties and methods
can be a bit longer.
This is totally fine, they can consist of multiple words.
But consider this extreme example,
I now renamed this constant to be very descriptive.
It's the storage path
for storing images in a temporary folder, for the year 2020.
Now, this is a very descriptive name,
but it doesn't help with readability.
It's simply too long.
It hides the rest of the line,
which would actually be more explanatory than the long name.
Because if we would see this code immediately,
it would be pretty clear
that we are creating a images folder in some temp folder,
which is somehow related to the year 2020.
This would be much clearer
than if we have to read this long name.
In addition, this long name does not just impact line 19,
but also line 20, where we use this long name.
This line now also is partially hidden
and requires some scrolling,
of course, always depending on your zoom level,
but still it's a way too long line.
And hence here, the older name was definitely better
and helped with readability way more.