Are the codes written/read left to right ?! (a misconception among beginners)

Before we begin, we would like to mention that if you are a professional programmer, this article will most probably be a repeat for you, But if you think you are just starting out, or even as an experienced programmer, you are looking to rethink this concept, reading this article is not a waste.
In this article, we are not going to talk about the direction or order of code execution in a programming language (that is the way a computer looks at and interprets code, which of course has a different architecture in different programming languages), But what we mean here is something else, and that is our mental path in writing code, "the way we look at code"! at first, these sentences may be a little vague or even clear, but let us explain further; Consider the following example:

A car designer receives an order from a company to design a vehicle specifically for a crowded city. Probably the first thing that comes to the designer's mind is to visualize the crowded city space and the image of a small and light car (possibly low-consumption) with a good design to reduce traffic. Let's pause here for a moment. has the designer ever thought about technical issues such as "Engine Type" or "Body Material"? No! because at this stage, it is better to just look at the data carefully and think about them very simply. after all the aspects have been considered, the designer will probably start drawing his own designs according to the company's budget and taste and will enter a more technical phase. Probably after a lot of trial and error in the design and arguing with the company, the final design will be approved and the car will be ready to use.

Let's get to the point

Why did we use this example at all? Let's go back to the beginning of the example. If you were asked to design this car, wouldn't you have started "Designing the Car" directly in the first place? (I.e. the opposite of the above steps). This means that our minds may confuse and don't distinguish the order of the stages of "Production of something", with the order of the stages of "Thinking" about the Production of that thing! Programming is very similar to this example! Just because a code is written/read from left to right (in most cases) does not mean that you should think the same way! Take a look at the image below:

The above code is part of a JavaScript file that stores a "name" in the MongoDB database; in a simple word, by writing this code, a name (for example: "Hooman") is stored in the server storage. now pay close attention. If we want to read this code "from left to right", This is how it is analyzed :

const result

In this part of the code, the whole storing process is assigned to a variable called "result" (so that it can be used with the same name and its result can be used and processed as needed).

await

In this part of the code, the program is commanded to wait for the storing process (and not go to the next line until the result of the storing operation is known).

name.save()

and In this part of the code, the program is commanded to save the "name"!

And now with a fresh new look...

Now let's look at it differently and as we said at the beginning of the article, see how it is better for us as a programmers to "look at the code", that is like the same car designer, in order to achieve our desired goal. So let's forget the left-to-right order and look at the image below:

Now think again with new fresh look. if our goal is to "save a name in the database", what is the first code that comes to mind?! Yes ... the following code:

name.save()

What was the explanation of this part of the code?

With this part of code, the program is commanded to save the "name"!

So far, we have met our first need. the next step, like the car designer, is for us to see what our next need is. We want to "make sure that our data is stored in the database" and this is exactly where we write the await code on the left instead of the left-to-right view. (Note that this code only makes sense for this example, and based on your programming language and work environment, you should make your own interpretation of this example).

await name.save()

As we mentioned above:

With this part of code, the program is commanded to wait for the storing process (and not go to the next line until the result of the storing operation is determined).

And now we decide in our minds to "save this process somewhere", so we can use it in the next lines. what should we do? Yes, the answer appears! Now on the left side of the code, we add const result to save it under the name "result":

const result = await name.save()

Wrapping up

Before wrapping up, I should clarify that the approach described above is not the only path, it is just an example. There is no doubt that you can rearrange the steps of thinking based on your mind and your program environment.
I hope instead of simplifying this, I didn't make it more difficult to understand, but considering all we have discussed, I would reach the following conclusion:

Don't think about the Order or Direction of code execution first when you are writing code. instead, write down what is on your mind, without thinking about the final complicated rules, and then, each code will find its place!

My name is "Hooman Talakian" and you can follow me on LinkedIn if you liked this article.

Comments

[jzombie]

When you write asynchronous code, you can write in any direction:

For example, bottom up:

let message = ''

await Promise.all([
  new Promise(resolve => setTimeout(() => {message += 'world'; resolve()}, 200)),
  new Promise(resolve => setTimeout(() => {message += 'hello '; resolve()}, 100))
])

console.log(message) // Hello world

[Hooman Talakian]

exactly. that is what I'm talking about .as I mentioned in the article :
" Note that this code only makes sense for this example, and based on your programming language and work environment, you should make your own interpretation of this example "
It's all about "thinking" about your code and the order depends on your environment. are we in the same page?

[jzombie]

Yep, absolutely.

[john]

Great

[Eljay-Adobe]

Let's say you want to get the user's name, capitalize it (which may be incorrect... sorry k d lang), convert it to a greeting, and print it out.

Most languages would do it this way, in pseudo-code:

string name = input();
name = capitalize(name);
string greeting = greet(name);
println(greeting);

And could do it as a one liner, also in pseudo-code:

println(greet(capitalize(input())));

See the onion-like nesting? Just like what the article is talking about. This code is read inside-out to see the order of operations.

There are other programming languages that would do the one-liner in a slightly different way, in pseudo-code:

input() | capitalize | greet | println

No onion! It reads in order, more like the first step-by-step example.

[Hooman Talakian]

I'm not sure if I understand your point, but in every instance you have listed (aside from code direction or difference in programming languages), the syntax would follow the raw data. Am I right? I mean you have a Raw data in the first place and after that you decide how to manage it (based on specific syntax of your program).

[Eljay-Adobe]

My point is only that there are programming languages which do have the codes such that they are read from left to right, like the ML family of languages.

[Hooman Talakian]

Yes, there are many syntactic differences between programming languages, but in this case we are just discussing the path of thought. Thank you for your attention

[Damian Demasi]

const result = await name.save()

I would read this code as follows: “create a constant variable named result and store in it the result/response of awaiting for the name to be saved”.

But even better, I think is best to read it as we read mathematical equations: from outside to inside.

[Hooman Talakian]

Of course, this code can be read, just as you said. This is exactly what "different thinking" is all about. We have just mentioned "one" way of thinking.
By the way, I appreciate your point of view about the mathematical approach.

[Hooman Talakian]

Thank you for mentioning. Exactly. "Top to bottom" is the same.