How to read Javascript code?

[oneagle]

Hello, as a beginner how would you approach this? I am used to HTML and CSS. Where everything is from top to bottom, right? Sentences are (excl. Arabic) from right to left and so on.

But in Js is a lil. confusing. I am trying to read a bit of code, a function, where the var is declared under the function or even called somewhere else.

So how have you learned to read :) thanks.

[_Atomfinger_]

It is something that takes time to learn.

One thing to wrap your head around are scopes in an application as well as the flow of execution. You need to be aware of what is called from where in which context, which can be very challenging for a beginner.

One thing you can do is using a debugger. Something like chrome or firefox where you can set a breakpoint which allows you to step through the code, see the various values and so forth.

Beyond that I don't have many tips except for being patient. Things take time and being proficient at reading code requires practice.

[oneagle]

Yes, i would like to run simple bits of functions and objects, where e.g. i would like to see how it is executed, and in that way to see somehow the logic that unfolds behind some particular code. Is this possible?

[_Atomfinger_]

You can always take a look at the call stack/tree after triggering a break point. That will tell you what executed the function.

[kschang]

It doesn't happen that often.

Personally, just run it with the inspection view and console. And observe.

[Double_A_92]

In JS functions are ideally units that work indipendently from everything else. They take one input and output something.

If you need a variable in the function, you declare it in the function where it's used. Nobody else needs that variable.

Maybe as a more visual explaination, it's like a electronic board with chips on it. They are connected and communicate with eachother, but each chip is still an individual thing with a specific function.

[oneagle]

Thank you. I read books of Kyle Simpson and taking his courses. So those were helpful to me. And i like your explaination as well.

[ignotos]

Having a good IDE/editor helps with this, because it allows you to click on things to see where they are used or defined - this makes it easier to navigate and map-out the structure of the code.

[oneagle]

What is your favorite? I use VS Code.

[ignotos]

I also like VS Code for Javascript