DEV Community

Cover image for Amazing tools for better understanding Scope and Block in javaScript!
Hooman Talakian
Hooman Talakian

Posted on

5 2

Amazing tools for better understanding Scope and Block in javaScript!

If you are reading this article, we assume that you are familiar with the concept of scope and block in JavaScript, and we only intend to introduce you to some practical tools in order to better understand this concept.

JS Scope Visualizer

JS Scope Visualizer preview

In JavaScript, the "Scope" concept has always been tricky for programmers, no matter how experienced they are. here is a simple tool for visualizing the scope of every part of your code. this online tool illustrates your scopes with colors. code sections with the same color are in the same scope! enjoy.
🌎 https://js-scope-visualizer.firebaseapp.com/#visualizer

VS Code Trick

VS Code preview

If you are a programmer seeking perfect control over your code, I strongly recommend copying these two lines from here (at the bottom) into your VScode "setting.json" file. Why?!
As you can see (in GIF), by doing this, you activate a built-in function that automatically colorizes the matching brackets and at the same time indicates the scope/block you are in! So what are you waiting for?
Copy these two lines into your VScode "setting.json" file :

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
Enter fullscreen mode Exit fullscreen mode

There are, of course, other tools and methods that can be used to better understand Scope and Block. Please feel free to refer to it in the comments section so it can be included in the article if it is useful.

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

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay