How can I know when the scope changes within an abstract syntax tree?

Question

Can someone help me with figuring out how to know when the scope changing while traversing the ast tree? I am using the esprima parser and I know that babel does this but I want to create my own to understand how it works and help increase my knowledge with using asts.

So how would I go about to knowing the scopes of each node?

var global = "I am in the global scope";

function scopeOne() {
  var one = "I am in the scope created by `scopeOne()`";

  function scopeTwo() {
    var two = "I am in the scope created by `scopeTwo()`";
  }
}

Answer 1

The base idea is to determine how many scopes is upper then current node. For this purpose we need to check:

• is current node is Program, the upper most node in AST;
• is current node is BlockStatements that is used by all kinds of functions and statements (like IfConditionStatement, loops etc);

Then we just increase counter of scopes, this way we can distinguish them in the similar to Babel way.

Here is how it can look like written in 🐊Putout, tool I'm working on:

export const traverse = () => {
    let uid = 0;
    return {
        'BlockStatement|Program'(path) {
            console.log('babel scope', path.scope.uid);
            console.log('our scope', ++uid);
        },
    }
};

For code like this:

var global = "I am in the global scope";

function scopeOne() {
  var one = "I am in the scope created by `scopeOne()`";

  function scopeTwo() {
    var two = "I am in the scope created by `scopeTwo()`";
  }
}

if (a > 3) {
    console.log('hello');
}

It outputs:

Playground: https://putout.cloudcmd.io/#/gist/06b547b6cd6f132b5300dd9d4473177e/b2a193c5c7233c309c46222cbb9ea8a46bd99a92