All language subtitles for 12. Modern, Clean and Declarative JavaScript Programming

So in this section,

we have been talking about modern JavaScript development.

So things like tooling and modules.

But now let's finish the section

by also talking about modern JavaScript programming itself.

So basically, about how to write modern

and clean JavaScript code.

And this lecture is actually mostly gonna be

a review lecture.

So, a lecture where I'm gonna bring together all the clean

and modern JavaScript techniques and practices

that I've been showing you throughout the course.

And so with this, he will then have all this information

in one place.

Then in the next lecture,

we will actually bring some of these topics to practice

by fixing a bad coding example

that does not follow these practices.

But anyway, let's now get started.

So one of the most important things when your code

is that you should write readable code,

which basically means that you should write code

so that others can understand it,

and also so that you can understand it yourself

in the future.

Also, you should try to avoid writing too clever

and maybe over complicated solutions

that might make you feel really smart as a developer,

but which also might make your code

very confusing and unreadable.

And so in many situations it's best to simply write

the most straightforward solutions.

Another thing that's very important for readable code,

is to give functions and variables very descriptive names.

So for variables, you should name them

according to what they contain.

and for functions, you should name them

according to what they do.

And so by doing this, you will make it really clear

and obvious to everyone what each variable is

and what each function does.

Next, there are some more general rules

that you should follow

in order to write modern and clean code,

which are to use the DRY principle.

So don't repeat yourself,

which means that you should essentially refactor your code

whenever you can.

Also, you should not pollute the global namespace

and instead encapsulate your data into functions

or classes or modules.

Also, you shouldn't use Var for declaring variables, right?

So I've mentioned this one, many times in the course.

And so by now you already know

that you should always use Const,

and only if you want to change any variable, then use Let,

but never Var.

And finally you should always use strong type checks.

So always use the triple equals

over the simple double equals,

which do not perform type checks.

Now about writing functions,

which is one of the most important things

that we do as JavaScript developers,

a domain rule that we should follow by writing functions

is that each function

should usually only do one thing, all right?

Now, many times of course, we will want to break that rule,

but in general, it's good to keep this rule in mind.

So that you always write like small functions,

which only do one thing, but do it really well, all right?

Next, you shouldn't use more than three parameters

in a function.

And this actually goes in line with the previous guideline

because of course, if a function only does one thing,

then probably it doesn't need so many parameters

in the first place.

Also use default parameters in your functions

whenever that's possible,

and in general return the same data type as you received.

So for example, if you receive two or three numbers

as an input to a function,

then probably you will want to return a number as well.

So that then makes more sense for when you consume,

so for when you use the function later.

And again, this is a rule that you can of course break,

but it's again, good to keep this one in mind.

Finally, you can and should use arrow functions

whenever they make the code more readable, okay?

And here, many people actually have different opinions.

So some people started to use arrow functions everywhere,

and some people don't like them at all

because they think that they completely make code unreadable

no matter when they're used.

But personally, I like to kind of follow a middle ground.

So I still use the more regular functions

in many situations,

but if arrow functions make the code more readable,

then I will totally use arrow functions.

And one great use case in my opinion,

is in the callback functions of array methods.

And now after functions,

our next topic is Object Oriented Programming.

And in my opinion, in order to implement OOP in JavaScript,

you should now use ES6 classes.

And so that's also what I did after OOP section, right?

Now, when designing your classes,

make sure that you encapsulate any data

that shouldn't be accessible from the outside

so that you don't mutate that data

from outside the class, all right?

Now, probably you will still need to at least manipulate

some data that's in the class,

but for that, you should then implement a public API.

So basically a couple of methods

that can then manipulate that data

exactly as you want that to happen.

And again, we talked about all of this already before.

So this is really just a review of all these big topics

that we have been handling throughout all of this course.

Now, as you implement your methods in your classes,

make sure that you implement chaining in all the methods

where it actually makes sense

because this can make your methods way easier to use,

not only for you,

but maybe also for other developers on your team.

So this is yet another great practice

when you are writing your classes.

Finally, one important thing to also mention here

is that in regular objects, when you're writing methods,

then please don't use the arrow functions there,

because by doing that, you will not get access

to the disc keywords of that object.

Remember, and so always avoid arrow functions,

even if you're not even using the disc keyword in a method,

because simply by getting into the habit

of avoiding arrow functions as methods in this situation,

you will then not commit any mistakes ever, all right?

Okay, next up, let's talk about avoiding nested code.

So writing nested code,

which basically means writing code inside of blocks,

inside of other blocks is really, really bad

for readable code.

And so we should avoid nested code at all costs.

And one great way of avoiding nested code

is to use guard clauses as we have been doing

over the last couple of sections, right?

So guard clauses basically simply means

to use an early return in case some condition is not met.

Also, you can use the ternary operator

or even logical operators instead of an if statement,

because the ternary operator,

of course, does not create a new code block

while the if statement does.

Now, if you really do need an if statement,

then instead of an if else statement,

you should use multiple ifs instead.

Because again, this will make code a lot more readable

than having to go through all these if, and else if,

and else blocks.

So that's also another modern practice

that we start to see more and more

in modern JavaScript code basis.

Next, you should complete the avoid any kind of loops.

And with that, I mean any for loops.

So the for and also the for off loops should be avoided

if you want to avoid nested code.

And so instead you can use array methods

like a map, filter and reduce.

And finally you should avoid

callback based asynchronous APIs whenever you can.

And so that actually brings us to our next topic,

which is asynchronous code.

So for best readability, always consume promises

using async await

and not using the den and the catch methods,

because these methods actually require callback functions,

which will then introduce even more nested code.

And so that's again,

something that we really want to avoid, all right?

So these two go kind of together.

So avoiding callback-based, asynchronous APIs,

and instead opting for using promises

and then consume these promises with async await.

Now, something that's very important

is that whenever you can,

you should run promises in parallel

using the promise.all combinator function.

So when you have two promises that can run at the same time,

so promises that do not depend on each other,

then please run them in parallel

to make the application a little bit faster for your users.

And finally, always handle errors and promise rejections.

So this is simply a best practice

for clean code, all right.

So these are the main best practices for writing modern

and clean JavaScript code that I can think of.

But now let's turn our attention

to a completely different way of writing code.

And so we're gonna take a small detour here

and talk about declarative code.

So there are two fundamentally different ways

of writing code in programming,

which we also call paradigms.

And these two paradigms

are imperative code and declarative code.

Now, whenever we write imperative code,

we basically need to explain the computer

how to do a certain things.

So basically we need to explain every single step

that the computer needs to follow

in order to achieve a certain result.

But this might sound a little bit abstract.

So let's try a more real world example.

So let's say that we want someone to bake a cake for us.

And so if we would do that in an imperative way,

we will tell the person exactly the step by step recipe

that they would have to follow

in order to bake that cake, all right?

So again, it is telling every single step

that the person has to follow in order to achieve a result.

And now bringing that back into code,

here in this code example,

we are trying to double the R array.

And so this loop that I have here is a purely imperative way

of writing that.

So here we are telling the computer step-by-step

to create an empty array,

to create a counter that starts at zero,

then to increase that counter

until we reach the length of the original array

and then how exactly to store the new result

in each new position of the array.

So there's a lot of steps

that we really give the computer here

in order for us to achieve the result

of doubling that R array.

Okay, so that's imperative programming,

but on the other hand, we also have declarative programming

where the programmer tells the computer only what to do.

And so when we write declarative code,

we simply describe the way that a computer

should achieve a certain result,

but the how it should do it.

So basically the step by step instructions,

they get abstracted away.

So we do not care about them.

And going back to our cake example here,

the declarative way of instructing someone to bake the cake

would be to simply describe that cake to the person,

and then the person would have to come up

with the step by step recipe on their own.

So simply describing the task and the results

that should be achieved is the declarative way

of doing it, all right?

And now coming back to the code example

of duplicating the values in an array,

this is how we do it in the declarative way.

So we have R array and then we simply tell JavaScript

that it should map the values in the R array

to a new array.

And each of these values should be multiplied by two.

And so if you compare this code example

with the one on the left,

then you will really see that in this example,

all we are doing is to describe in the way

that the computer should achieve the result

that we are looking for.

We are simply telling it what to do,

which in this case is to simply map the original array

onto a new array and doubling all the elements.

But all these super detailed steps

that we have on the left side,

like creating an empty array and initializing a counter,

all of these steps have been abstracted away

because we don't really care about them, all right?

And this is pretty important to understand

because more and more,

this is how modern JavaScript code is actually written.

So the difference between imperative and declarative

is not just some theoretical difference.

So the declarative paradigm is actually a really big

and popular programming paradigm,

which has even given rise

to a sub paradigm called functional programming.

And functional programming is basically

a declarative paradigm,

which is based on the idea of writing software

simply by combining multiple so-called pure functions

while avoiding side effects and mutating data.

And actually functional programming

and to writing declarative code

has now basically become the modern way of writing code

in the JavaScript world.

So you will see declarative and functional code everywhere.

And in fact, we have even been using it all along,

but without really knowing that the style

was called declarative and functional, all right.

But let's quickly go back

to the definition of functional programming

and talk about what side effects and pure functions are.

So a side effect is basically simply a modification

of any data that's outside of a function.

So for example, mutating any variable data is external

to the function is causing a side effect.

So basically any variable that is outside of the scope

of the function, all right?

Now data does not only refer to variables.

So for example, logging stuff to the console,

or also changing something in the DOM

is also causing side effects.

But don't worry too much about this for now

because we will talk a lot more about all this

in a whole section on functional programming

that is at the end of this course.

Now, by the time I'm launching this course,

that section might not be there yet,

but after some month it will be there,

and by then you should totally check that out, all right?

Now, next up, a pure function is a function

without side effects.

So basically a function that does not mutate

any external variables and that does also not depend

on any external variables.

So basically if we give the same inputs to a pure function,

it will always return the same output.

And again, that's because it does not depend

on any external variables

and it also does not manipulate them, okay?

And again, we will talk more deeply about this

in the functional programming with JavaScript section.

But I'm telling you all this already at this point,

so before that functional programming section,

because this actually has implications on the way

that we write or code.

So even if you're not a functional programmer yet,

you can still start to incorporate

some functional programming techniques into your code.

So for example, you can try to avoid data mutations

as often as possible.

And of course this will not always be possible,

but it's also not really necessary.

So these are mainly just suggestions,

but which will still create more readable

and overall better and cleaner code.

So another thing that you can do

is to always prefer built in methods

or functions that do not produce side effects

over the ones that do.

And this is really important for data transformations.

So whenever you want to do that,

you should use a method such as map, filter, and reduce.

So this is the functional and modern way

of doing data transformations.

And many times this is actually the first contact

that many people have with functional programming.

So map, filter, and reduce are actually present

in all functional programming languages,

and they are very important to implement functional code

and more declarative code in our code.

And finally, you can also try to avoid side effects

in the functions that you write yourself.

And again, this is of course not always possible

and also not always necessary.

So we will never be able to avoid all side effects

in applications,

because of course, at some point

the application needs to do something.

So we need to display something on the DOM

or lock something to the console,

or really create some side effect, okay?

But you can still try to think about this

and to start incorporating a side effects

more into your own code.

And why all of this is such a good idea,

we will discuss at length again

in the functional programming section.

So this lecture here is really more about

suggestions and things that you should start doing

when you write your own code, all right?

And now to finish, let's come back to declarative syntax,

because functional programming

is only a part of using and writing declarative code.

So in order to write code debt is more declarative,

you should use array and object destructuring

whenever that's possible.

You should also use the spread operator,

the ternary operator, and also template literals

whenever that is possible.

Because if you think about it,

then all of these four ways of writing code

actually makes the code more declarative.

So these operators are more about telling the code

what to do and not exactly the steps

that it should take, right?

And that's again true

for all these four pieces of syntax, all right.

But that's enough talk for one lecture.

And so let's now put some of these guidelines

that I gave you for clean and modern code in practice.