Scope Analysis for JavaScript Code
Join the DZone community and get the full member experience.
Join For Freewalking the syntax tree of a javascript code is often the first step toward building a specialized static analyzer . in some cases, however, when the analysis involves variables and functions within the code, an additional scope analysis is necessary. this permits a more thorough examination of those variables and functions, including to check if some identifiers accidentally leak to the global scope.
of course, such a simple leak detector is not new. in my previous blog post, polluting and unused javascript variables , i covered two simple javascript utilities for catching this sloppy practice. in addition, i reviewed the concept of identifier highlighting and rename refactoring in an editor. as a bonus of this highlighting feature, it is easy to spot the missing declaration that leads to the global leak (unless we’re in strict mode), as shown in the following screenshot of the online highlighting demo .
in the above code,
widht
is where the cursor is (hence, the yellow highlight). due to the typo, it is not a match for the local variable declared as
width
. the problem is caught at run-time if the code is running in
strict mode
.
however, obviously it is fantastic to notice the mistake ahead
of time. this is where a static analysis of the scope of every variable
and function will be tremendously useful.
fortunately, these days you can use a microlibrary called escope (github: constellation/escope ) which can analyze the scope of the entire code. this adds another useful library to the existing family of esprima (for parsing), estraverse (syntax traversal tool), and escodegen (code regeneration). this arsenal of tools can be quite deadly.
the detailed operation and usage of escope is beyond the scope (pun intended) of this blog post. instead, let me just show you one built-in feature of the library: implicit declaration at the global scope. in other words, this is a collection of all variables that leak unintentionally, as in the previous highlighting example. it is as easy as this function:
function find_leak(code) { var leaks, syntax, globalscope; leaks = []; syntax = esprima.parse(code, { loc: true }); globalscope = escope.analyze(syntax).scopes[0]; globalscope.implicit.variables.foreach(function (v) { var id = v.identifiers[0]; leaks.push({ name: id.name, line: id.loc.start.line }); }); return leaks; }
first, we need to parse the code and store its abstract syntax tree in
syntax
.
note that location tracking is enabled because we want to locate the
line number of every leaking variable. after that, scope analysis is
being invoked and we grab the first one, its global scope. now it is a
matter of iterating
variables
within its implicit
declaration and collecting the necessary information, i.e. the name and
the location. this is the return value of the function and you can
easily process it.
real-world analysis will involve more processing than just a simple global leak collection (you can even visualize the scopes). hopefully, this simple example will spark your interest in leveraging the scope information of any piece of javascript code.
Published at DZone with permission of Ariya Hidayat, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Trending
-
Step Into Serverless Computing
-
Microservices With Apache Camel and Quarkus (Part 3)
-
Transactional Outbox Patterns Step by Step With Spring and Kotlin
-
Essential Architecture Framework: In the World of Overengineering, Being Essential Is the Answer
Comments