I look at code and it might as well be in hieroglyphics

[Arbu]

I've learnt javascript through w3schools and it seemed fine. But when I go to look at and try to understand some code I don't feel as if my learning has got me anywhere. Here's an example:

      enlivenObjects: function(t, e, n, s) {
            var o = []
              , i = 0
              , r = (t = t || []).length;
            function a() {
                ++i === r && e && e(o.filter(function(t) {
                    return t
                }))
            }
            r ? t.forEach(function(i, r) {
                i && i.type ? fabric.util.getKlass(i.type, n).fromObject(i, function(t, e) {
                    e || (o[r] = t),
                    s && s(i, t, e),
                    a()
                }) : a()
            }) : e && e(o)
        },

So a few questions:

1. Is the function declaration simply a different way to say function enlivenObjects(t,e,n,s){...}?

2. what on earth does this mean "r = (t = t || []).length;"?

3. Is "r ?" shorthand for "if r!== null"?

4. What does "i && i.type" mean?

5. And this "e || (o[r] = t),"? I do know that || means "or". How can you have a line of code like that? If someone says to me "If it's raining or snowing stay indoors" I understand. If they just say "raining or snowing" it's not an instruction. Computer code should be about giving instructions surely?

Maybe someone can help me out.

Thanks.

 

[Ingolme]

The code is obfuscated in order to make it hard to read. All of it is ordinary Javascript syntax but arranged in a deliberately confusing fashion.

1. That's how you declare a function as a property of an object. A simple example is below:

var obj = {
  doSomething : function(a) { alert(a); }
};
obj.doSomething();

2. This line of code is doing a lot of operations at once, so I'll have to unpack it.

// 1. Using || to choose a non-empty value.
// The || operator returns the first value which evaluates to a boolean "true".
// If "t" already exists, then assign "t" to itself.
// Otherwise, assign an empty array.
t = t || []; 

// 2. The return value of the assignment operator is the assigned value.
// In this example, a takes the value that was assigned to b, so a = 5.
a = (b = 5);

// 3. Since "t" is an array it has a length property, which we assign to "r".
r = (t = t || []).length;

// Same as:
t = t || [];
r = t.length;

3. The "?" is the conditional operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

It is like an if...else block but shorter. It has the format condition ? expression : expression where if the condition is true, the first expression is executed and if it is false then the second expression is executed. In the block of code that you are looking at, the code is equivalent to the following:

if(r) {
  // FIRST EXPRESSION
  t.forEach(function(i, r) {
    i && i.type ? fabric.util.getKlass(i.type, n).fromObject(i, function(t, e) {
      e || (o[r] = t),
      s && s(i, t, e),
      a()
    }) : a()
  })
} else {
  // SECOND EXPRESSION
  e && e(o)
}

4. The && operator evaluates items from left to right until it finds that one of them returns a false value. It will not evaluate any of the other expressions once a false value has been found. In this example, they're using it so that the expression "i.type ? ... : ..." only gets executed if the variable "i" exists.

5. The || operator behaves the opposite to the && operator. It evaluates expressions from left to right and stops at the first one that returns a true value. If "e" exists and evaluates to a true value then the || operator will stop there and not evaluate the (o[r] = t) expression, therefore preventing the assignment from happening. It is equivalent to the following code.

if(!e) {
  o[r] = t;
}

 

It's good to know these things, but if you ask me, it's not usually worth trying to look into obfuscated code.

[Arbu]

Thanks very much, I'll have a read through.

The code is from a library called fabricjs. The library isn't working in relation to a particular matter for me. So I have been looking at the code to try to figure out why.

Why would someone produce an open source library and obfuscate it? Aren't the two things contradictory?

I have asked the authors why it's not working. They helped me a bit but then have stopped responding.

[Ingolme]

Obfuscated (minified) code is shorter and takes less time to download. Usually they'll have two versions of the code: the minified version and the regular version. If you're doing debugging it's best to use the regular version of the code. Minified code usually has the extension .min.js.

I checked FabricJS. Here's the unminified version of it: https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.js

 

[Arbu]

OK, thanks. So it sounds like they weren't trying to make it harder to read, just more efficient.