Chrome- und Firefox-Verhalten nicht konstant

Ich habe mal einen kleinen Test in Chrome und Firefox gemacht. Im Normalfall verhalten sich beide, wie man es erwartet. Versucht man jedoch nachträglich eine Variable in eine Konstante zu verwandeln, reagieren die beiden unterschiedlich: Chrome ignoriert das „const“ und setzt den neuen Wert, während Firefox einen Fehler meldet und den neuen Wert ignoriert. Zumindest bleibt in beiden Fällen eine Variable variabel.

const a = 1;
a = 2;
console.log(a); // 1

const b = { b : 2 };
b = 3;
console.log(b); // Object { b=2}

var c = 3;
const c = 4; // Chrome: okay / FF: "TypeError: redeclaration of var c"
console.log(c); // Chrome: 4 / FF: 3
c = 5;
console.log(c); // 5

Scoping wie bei var

Bei der Sichtbarkeit verhält sich const genau wie var: Konstanten sind innerhalb von Funktionen beliebig tief sichtbar, außerhalb jedoch nicht.

(function() { const c1 = 1; console.log(c1); }()); // 1
console.log(c1); // ReferenceError: c1 is not defined

Ohne Scope werden Konstanten wie auch Variablen eine Eigenschaft des aktuellen Windows:

const c2 = 2;
console.log(window.c2); // 2

Menschenlesbares toString

Die folgende Funktion formt beliebig komplexe Datenstrukturen in einen String um, den man anschließend etwa mittels dump ausgeben kann.

function toString(obj) {
  return (function traverse(obj, depth) {
    var type   = typeof obj,
        string = '',
        indent = '',
        i;
    for (i = 0; i < depth; i += 1) indent += '  ';
    if (type === 'undefined') string += 'undefined';
    else if (obj === null) string += 'null';
    else if (type === 'object') {
      if (Object.prototype.toString.call(obj) === '[object Array]') { // array
        var length = obj.length, i;
        string += '[\n';
        for (i = 0; i < length; i += 1) {
          string += indent + '  ' + traverse(obj[i], depth + 1) + ',\n';
        }
        string += indent + '](' + length + ')';
      } else { // normal object
        var prop;
        string += '{\n';
        for (prop in obj) {
          if (obj.hasOwnProperty(prop)) {
            string += indent + '  ' + prop + ': '
                      + traverse(obj[prop], depth + 1) + ',\n';
          }
        }
        string += indent + '}';
      }
    }
    else string += obj;
    return string;
  }(obj, 0));
}

Die Funktion definiert eine neue Funktion, die für die Rekursion benötigt wird und direkt aufgerufen wird. Dieses Muster ((function(){ /* ... */ }());) ist als Immediate Function bekannt. Dann wird einfach geprüft, welcher Datentyp vorliegt und ggf. rekursiv der Wert in den String gepackt.

Für den Array-Test habe ich mich für Object.prototype.toString.call(obj) === '[object Array]' entschieden. Dieser Test ist absolut zuverlässig und im Gegensatz zum Array.isArray(obj) aus dem ECMA-Script-5-Standard überall vorhanden. Laut MDN ist Array.isArray erst im Internet Explorer 9 implementiert.

Anwendung

Mit dieser Funktion kann man sich nun eine beliebige Log-Funktion zusammenbauen:

function log(message) {
  dump(toString(message));
}

Im Ergebnis kann das ganze dann etwa so aussehen:

{
  a: true,
  b: 42,
  c: hallo,
  d: {
    e: 100,
  },
  f: [
    1,
    2,
    3,
    true,
    false,
    a,
  ](6),
  g: {
    h: {
      i: {
        j: 1,
      },
    },
  },
}