DEV Community

Cover image for Are the codes written/read left to right ?! (a misconception among beginners)
Hooman Talakian
Hooman Talakian

Posted on

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

#beginners #productivity #help #programming

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:

Save a "name" to the MongoDB database

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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:

How we should think about storing a "name" in the MongoDB database

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()
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (12)

Collapse
 
jzombie profile image
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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hoomantalakian profile image
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?

Collapse
 
jzombie profile image
jzombie •

Yep, absolutely.

Collapse
 
johnbabu021 profile image
john •

Great

Collapse
 
eljayadobe profile image
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);
Enter fullscreen mode Exit fullscreen mode

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

println(greet(capitalize(input())));
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
hoomantalakian profile image
Hooman Talakian • • Edited

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).

Collapse
 
eljayadobe profile image
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.

Thread Thread
 
hoomantalakian profile image
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

Collapse
 
colocodes profile image
Damian Demasi • • Edited

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.

Collapse
 
hoomantalakian profile image
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.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
hoomantalakian profile image
Hooman Talakian •

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

Read next

annoh_karlgusta profile image

What is the Difference between "sequel" and "SQL"?

Karl Esi -

dbillion profile image

Understanding Java Exceptions: A Guide with Practical Examples

Oludayo Adeoye -

furkangozukara profile image

OneTrainer Fine Tuning vs Kohya SS DreamBooth & Huge Research of OneTrainer’s Masked Training

Furkan Gözükara -

afif profile image

css-shape.com: The Ultimate Collection of CSS-only Shapes ⚡️

Temani Afif -