To round out this last section, I want to take a step back and talk about coding styles in general. What we've been striving for in this course and the coding style you want to avoid throughout your programming career, whether you are just writing code for yourself or for others.

Coding styles (imperative vs. declarative)

What styles am I talking about?

These are arguably two styles of writing code. A person's code usually never strictly falls into one category or another, but we refer to them according to the general style:

Code can be imperative or declarative. More complex sounding words for simple concepts:

Imperative code is when we write code more suitable for a computer and declarative code is that which a person would actually like to read.

In more specific terms, imperative code is when we tell JavaScript what to do and how to do it. This is a coding style that we've tried to avoid in this course and I'll show you why:

Let’s say we had an array of people that we wanted to write an individual invitation to for our birthday party. So let's create our list of people

const people = [‘Doug’, ‘Fred’, ‘Jane’];

const invitations = [];

and then we want to store each written invitation as well, so let's create an invitations array for those to be put in.

So as you might have already guessed, we need to iterate over this array. And this time we're going to do in the way it needed to be done for most of JavaScript lifetime, with a for loop.

Here's how to write one:

for (let i = 0; i < people.length; i++) {
  invitations[i] = `Hi ${people[i]}, come to my party!`;
}

So you know what we’re doing, according to the steps I mentioned, looping or iterating over an array, getting each element, a person's name, which we add to a message and then adding it to a new array. But does the code tell the same story?

If we were to read the code, we’re setting a variable i to 0, checking if it is less than the current length of the array, adding one to i, interpolating the ith value of the array to a string and putting it in the same index in a new array.

So again this is all imperative, we're telling JavaScript exactly what to do and how to do it. And all of this code is correct.

If we run it, we'll get all of our messages, just like we wanted. But if this course has lead you on the right path whatsoever, you're first intuition is that this code doesn't look right. That's my feeling whenever I look at a for loop and that's why we didn't cover it in the course. It has undeniably been the most popular way to iterate over arrays, but it's imperative, hard to read and remember, even for experienced JavaScript developers.

What about if we wrote it in a declarative style, what would that look like? Declarative code is different. As the name implies, we declare with it what we want to accomplish, and JavaScript will do it, simple as that. In other words, it is readable to us as humans, and not just to the computer. In fact its readability to other developers is the priority.

So let's rewrite our code in a style you probably wanted to use in the first place now that we know so many great array methods. We just want to a send an invitation message to an array of people, so here’s our declarative code:

const invitations = people.map((person) => `Hi ${person}, come to my party!`);

It all sits on one line, and at the same time is far more comprehensible. Vastly more succinct and clear at the same time. That's what pursuing a declarative code style can deliver.

Unlike the first example, we didn’t need to create any confusing variables (such as i) or tell JavaScript how to go through the array. We just mapped (or iterated over the array), added each person’s name to our invitation and it was returned to us.

Review: declarative > imperative

So which way do we want to write our code?

  • Let’s review our examples. What is more understandable, especially if we were looking at this code for the first time? What is more memorable? Overtime, we’ve all had to review how to write a for loop, precisely because it is imperative. Without a doubt, the declarative style is what we want to pursue. It may seem like a confusing concept, but the reason we are making the distinction is for an important reason:

Code is written for human beings, not for computers.

Keep this in your mind as we reach the finish line of the course and build our most impressive project yet. Scrutinize and reread your code for legibility and understanding, just as if you were writing an essay, and strive for practices that make your code more declarative. It won't just help people around you, but yourself as well, especially when you're revisiting code years later and you've long forgotten what it does.