Why and when should you obfuscate your JavaScript code?

Discover why and when should you obfuscate your JavaScript code.

Serving a JavaScript file without obfuscation, simply means that the code in the file will be readable by anyone. So if that person understands JavaScript, your source code is public now. So if the JavaScript code works without server interaction, someone could just download the HTML of your page, the resources (JS and CSS) and will obtain the same result locally. So, if the code is readable as well, this person could steal your work and modify it at its will.

Consider the following example of JavaScript. The code is easily readable by someone that understands JavaScript, we do have a user object that is scoped within a function and there's a public object with methods in the window. In this case, one of the methods allows modifying the user level directly by providing its new level as the first argument:

(function(){
    let user = {
        "level": 2,
        "username": "OrangeJuice"
    };

    window.helpers = {
        "updateUserLevel": function(newLevel){
            user.level = newLevel;
        },
        "getUser": function(){
            return user;
        }
    };
})();

Now, consider the same code obfuscated with js-obfuscator.com

(function () {
  var _0x;
  let _0xab59aa = JSON['\x70\x61\x72\x73\x65']("}\n\"eciuJegnarO\" :\"emanresu\"  \n,2 :\"level\"  \n{"['\x73\x70\x6c\x69\x74']("")['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e'](""));
  _0x = eval(String.fromCharCode(40, 50, 51, 54, 51, 51, 53, 32, 94, 32, 50, 51, 54, 51, 51, 50, 41, 32, 43, 32, 40, 52, 53, 51, 57, 55, 55, 32, 94, 32, 52, 53, 51, 57, 55, 54, 41));
  window['\x68\x65\x6c\x70\x65\x72\x73'] = {
   "\u0075\u0070\u0064\u0061\u0074\u0065\u0055\u0073\u0065\u0072\u004c\u0065\u0076\u0065\u006c": function (newLevel) {
      _0xab59aa['\x6c\x65\x76\x65\x6c'] = newLevel;
    },
    "\u0067\u0065\u0074\u0055\u0073\u0065\u0072": function () {
      return _0xab59aa;
    }
  };
})();

Without knowing what the original code looks like, it will be difficult for the one who reads to identify that there's an object in the window named helpers. As mentioned, the special characteristic of the obfuscators is that the code works anyway as expected, if you inject the code into the console, you should be able to interact with the code just like the original one.

Advantages of obfuscating JS

Prevent people from copying or modifying your code without authorization.
The obfuscated JavaScript will be way larger and difficult to understand. Most obfuscators use control-flow flattening, an obfuscation technique that splits the source code basic blocks as loops and conditional branches and places them inside a single infinite loop with a switch statement, making the code harder to follow.
Exact functionality, not because the code is different it will behave differently.
Debug protection, useful if you don't want people to simply open the console to see what's going on with the JavaScript.

Disadvantages of obfuscating JS

Although the output JavaScript is harder to read, this doesn't mean that it's impossible. If someone takes enough time, dedication, and knowledge to read it, in the end, he will.
The speed of your code may be affected especially when using a high obfuscation level.
The size of your code may increase drastically as well, which may affect the loading times of your webpage. Although usually, if you use GZIP to serve your files, as a big part of the code is repetitive, it may end up well compressed.

When should you obfuscate your JavaScript code?
The main condition to using a js obfuscator is that the JavaScript code that can be obtained publicly, shouldn't be read by anyone. I know, it's difficult considering that serving JavaScript from your server makes it immediately public, so the least we can do is to obfuscate it.