In console.log output, what does the i stand for?

Question

I am trying to clone (by value) a fabric.js object and when I console.log() both objects, one has an i before it:

old-objects i {_objects: Array(56), width: 350, height: 350, toBeParsed: false, minX: -0, …}

new-objects {_objects: Array(56), width: 350, height: 350, toBeParsed: false, minX: -0, …}

The new object is created by newo = Object.assign({}, o); where o is the original fabric.js (5.3) object from canvas.getObjects()

Everything else is the same.

The output is copied directly from the console, one object is preceded by an i and the clone is not.

The i apparently signifies something important to fabric.js because fabric.js does not recognize the clone as valid, even though they are identical in every other aspect.

Note: this is not talking about the blue "i" link seen in this question. In my case, the i is on the left, is part of the object, is not blue, and is not hoverable.

Answer 1

The i you're seeing before the object's properties is the name of the class that that object is an instance of. You might be wondering, "who would name a class i?"; well, depending on the context of the library in use, they might not, and that i might as well be a uglified/compressed/minified version of that class. Which is to say, the class had its name replaced with a single character to reduce the overall size of the library in question.

The i does not appear before the cloned object's properties as you don't clone the class itself, just its visible(as in, enumerable) properties.

You can replicate this easily in just your console, but I included a snippet below to illustrate:

class i {
    test1 = 'one';
    test2 = 'two';
}

Object.defineProperty(i, 'test3', {
  value: 'three',
  enumerable: false,
});

const j = new i();

console.log(j);

const k = Object.assign({}, j);

console.log(k);

Make sure you check your browser console for the i of course. It won't show up in stack snippets it seems.

Note that this only works in chromium-based browsers; in Firefox for example, it's a bit more clear that its a class, however you have to expand the objects to find it:

The second way to replicate this is roughly the same, but it involves minifying the code before you execute the code.