Arbu Posted February 26, 2020 Share Posted February 26, 2020 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. Link to comment Share on other sites More sharing options...
Ingolme Posted February 27, 2020 Share Posted February 27, 2020 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. Link to comment Share on other sites More sharing options...
Arbu Posted February 27, 2020 Author Share Posted February 27, 2020 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. Link to comment Share on other sites More sharing options...
Ingolme Posted February 27, 2020 Share Posted February 27, 2020 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 Link to comment Share on other sites More sharing options...
Arbu Posted February 28, 2020 Author Share Posted February 28, 2020 OK, thanks. So it sounds like they weren't trying to make it harder to read, just more efficient. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now