Each day, SitePoint sends a newsletter called Versioning, and today’s had one link in particular that got the geek in me excited. There’s a tool where you can write Python, Java, JavaScript, TypeScript, Ruby, C, and C++ programs in your Web browser and visualize what the computer is doing step-by-step as it executes those programs.
[Here’s a JavaScript program you can step through that demonstrates variables in frames.](http://pythontutor.com/visualize.html#code=var+x+%3D+10%3B+//+global function+foo()+{ ++var+x+%3D+10%3B ++function+bar()+{ ++++var+y+%3D+x%3B ++++x+*%3D+2%3B ++++console.log(x,+y)%3B ++} ++return+bar%3B } var+b+%3D+foo()%3B //+x+inside+of+bar+should+be+the+x+in+foo,+*not*+the+global+x b()%3B&mode=display&origin=opt-frontend.js&cumulative=false&heapPrimitives=false&textReferences=false&py=js&rawInputLstJSON=[]&curInstr=0)
[Here’s a JavaScript program you can step through that demonstrates objects.](http://pythontutor.com/visualize.html#code=function+Vector(x,+y)+{ ++this.x+%3D+x%3B ++this.y+%3D+y%3B } Vector.prototype.plus+%3D+function(other)+{ ++return+new+Vector(this.x+%2B+other.x,+this.y+%2B+other.y)%3B }%3B var+v1+%3D+new+Vector(1,+2)%3B var+v2+%3D+Vector(20,+30)%3B+//+whoops,+forgot+‘new’&mode=display&origin=opt-frontend.js&cumulative=false&heapPrimitives=false&textReferences=false&py=js&rawInputLstJSON=[]&curInstr=0)
Press the “Forward” button to step through the code and watch the frames and objects. The “frames” column represents local variables / lexical environments / stack frames (the terminology varies by language), and you can see a new frame created for each function invocation. And the “objects” column represents dynamic memory / the free store / the heap.