JavaScript tutorial:
Focus your editing with Code Folding / Unfolding

 

 

Code Folding / Unfolding (also called code collapsing) greatly adds to the organization and readability of documents you are working on. Big chunks of code that you have completed make it harder to locate the code you wish to edit and can be distracting. In this case, code folding makes your editing a lot easier.

With a single click you can collapse or expand all the folds in your document.

You can also collapse or expand individual folds. JavaScript Editor assists you by automatically providing the fold buttons for every {..} scope in your code (functions, loops, switch statements, etc), and for multi-line /* .. */ comments.

Example: Folded function (the '+' button unfolds it).

Folded function

Example: The same function unfolded.

Unfolded function

Example: Folded multi-line comment

Folder comment

Example: Unfolded multi-line comment

Unfolded comment

Code folding / unfolding can be found in other top editors too. However, JavaScript Editor allows you to organize code better than any competing coding environment by allowing you to arbitrarily fold / unfold any piece of code.

Why is this important? In many cases you will have your functions grouped depending on the task they perform. For example, you may have a group of functions for getting/setting cookies, another one for special effects, etc. In this case, you want to be able to fold the entire group with one click, and with JavaScript Editor you can.

How? Simply highlight the code you wish to fold and select Fold selection. Give your fold a name to better organize your code. This way you can collapse a file of several thousand lines of code into few well-chosen folds:

Folded selection

You will be able to logically organize your code in no time by using selection folding, a functionality unique to JavaScript Editor (well, at least until the competitors steal our design).