JavaScript Visualizer per l'analisi degli snippet JavaScript

Gli strumenti basati sul Web che sfruttano i browser per produrre risultati quantificabili, utili agli sviluppatori per testare i propri codici, sono in netto aumento. In quest'ottica nasce JavaScript Visualizer: un tool che permette di visualizzare i contesti di esecuzione di snippet di codice Javascript, ovvero come il codice Javascript viene interpretato.

Per prendere confidenza con lo strumento, che risulta in ogni caso molto semplice da utilizzare, nella pagina dell'applicazione sono presenti alcuni snippet di codice che è possibile selezione ed eseguire per vedere in pratica ed in azione Javascript Visualizer, tra cui:

Chiusure semplici e complesse:

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
})();
counter.value();
counter.increment();
counter.increment();
counter.value();
counter.decrement();
counter.value();

Hoisting (utilizzo delle variabili prima che queste vengano dichiarate) e Scope Chaining.

var topLevelVar = "Since this variable was declared outside of a function, it'll go on the global scope.";
function topLevelFn () {
  var localVar = "This variable should be local to topLevelFn's scope";
  function nestedFn () {
    var anotherLocalVar = "Local to nestedFn's scope.";
    var access = "Because of the scope chain, in this function we still have access to any of the variable declared in topLevelFn or the global scope.";
    console.log(localVar);
    console.log(topLevelVar);
  }
  nestedFn();
}
var fnExpression = function () {
  var hoisted = "Did you notice that fnExpression is a function expression? It's declaration is hoisted and set to undefined in the 'creation' phase.";
};
fnExpression();
topLevelFn();

Bubble Sort:

function bubbleSort (arr) {
  var length = arr.length;
  var swapped;
  do {
    swapped = false;
    for (var i = 0; i < length; i++) { if (arr[i] > arr[i + 1]) {
        var temp = arr[i];
        arr[i] = arr[i + 1];
        arr[i + 1] = temp;
        swapped = true;
      }
    }
  } while (swapped);
  return arr;
}
bubbleSort([5,19,1]);

Pseudoclassical Pattern:

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function () {
  alert(this.name);
};
var me = new Person('Tyler', 28);
me.sayName();

Keyword "this":

var user = {
  name: 'Tyler',
  age: 28,
  handle: '@tylermcginnis',
  greet: function () {
    console.log('Hello! My name is ', this.name);
  }
};
user.greet();

Essendo Javascript Visualizer un strumento nuovissimo, non è di certo esente da bug, come riportato dagli utenti che l'hanno provato nelle ultime ore. Un esempio è la classica chiamata ricorsiva alla funzione per la serie di Fibonacci. Il codice sorgente del progetto è disponibile nella pagina ufficiale su GitHub (e dove sennò?). I comandi utilizzabili con Javascript Visualizer sono: Run, Pause, Step, Serialize e Run Speed.

Non c'è che dire, Javascript Visualizer si pone come interessante strumento (online e gratuito) per gli sviluppatori Javascript che necessitano di monitorare il funzionamento dei propri snippet.

Via JavaScript Visualizer