Are JavaScript variable names changed to random letters when the file is minified?

Question

I am learning JavaScript and one of my learning methods I use (same as html, CSS/SCSS) is to read source code to learn the language and try to understand what is happening.

But I am having trouble with JavaScript, as it's full of random letters and I can't work out what the code is doing. Is there a process of changing the JavaScript code (variable names etc...) when the file is minified and published on the web with the rest of the website files.

It is minified/obfuscated when someone does it. Normally done as part of a build step that changes the code. It is more to save space than anything else. There are tools that can clean it up, but it will not get the variable names back. There are source maps that help with debugging, but most people do not publish them on the web. — epascarello, Aug 05 '21 at 17:35
If you have the map file you could try using [SO - How to use sourcemaps to restore the original file?](https://stackoverflow.com/q/32383865/5923666) to restore it — Raz Luvaton, Aug 05 '21 at 17:37
You could use a code-map if exists to __revert minification__. See [this question](https://stackoverflow.com/questions/30720482/revert-javascript-minification-using-source-map). — hc_dev, Aug 05 '21 at 17:38
The answer to your question in most cases of minification is: __Yes__, most minifiers will randomly rename variable/function/etc. names, starting with single letters, if needed extend to 2-letters, and continuing to avoid long names. What is your real point to solve. Probably you could rephrase for a concrete solvable question, then [edit]. — hc_dev, Aug 05 '21 at 17:48

score 1 · Answer 1 · 2021-08-05T17:47:02.537

1

It depends on what minifier or optimizer you're using, but I'd assume that any quality optimizer should reduce variable names to shorter versions.

Using TerserWebpackPlugin:

// src/index.ts

const greeting = 'Hello World!'

console.log(greeting)

export default {
  greeting: greeting,
}

Compiles to:

// /lib/build.js

...{return(()=>{"use strict";var e,r,n,t,o,i={607:(e,r,n)=>{n.r(r),n.d(r,{default:()=>o});const t="Hello World!";console.log(t);const o={greeting:t}}},d={};function c(e){var r=d[e];...

Variable greeting was changed to t.

Which would also make sense because if you have 10k variables in your project, each ~10 letters long, reducing it to 1 letter would be 10k * 9 = 90kb reduction in bundle size.

If you want to study javascript code then don't do it with minified versions of code, it's incredibly hard to read such code.

edited Aug 05 '21 at 17:47

answered Aug 05 '21 at 17:39

Thanks for the answers and comments. I look at websites source code to try and learn what is happening with the code. Now I have some understanding that the variable names have been changed to random letters when minified. This explains why i have struggled to read and understand the source code. – Will Aug 05 '21 at 17:52
It's great that you're learning, but I'd suggest rather create your own html file with a script tag on your desktop and play around with javascript and look up the things you want to know, you'll learn a lot better than viewing minified versions of it. Or if you really want to learn then look up how to set up npm and create-react-app then figure out how to create your own site. – Aug 05 '21 at 17:54
Thanks, I have been learning to code for the last 12+ months. Now I am looking at JavaScript (been doing HTML, CSS) and also been building React Apps using create-react-app . I was confused to why I was unable to understand website source code and thought I was doing something wrong. BUT things now make sense when the JavaScript file is minified and pushed to the web with the rest of the website. – Will Aug 05 '21 at 17:59

Guerric P · Accepted Answer · 2021-08-05T18:08:59.953

JavaScript, as a interpreted language, is not being compiled. One of the downsides of this is that the code is supposed to be human readable but also as small as possible in order to have fast web pages.

That's why web developer tools include "bundlers" (like Webpack or Rollup) which help reduce the number of files by grouping them, remove unused code (also known as tree-shaking) and minify the code by reducing the number of characters as much as possible while not changing the code behavior.

For example:

var variable becomes var a
true becomes !0
false becomes !1
...

Even global objects can be minified by using this pattern:

(function(window) {
  // You can write code that uses window while window is eligible to minification
  // Because it's a regular variable in this context
})(window)

Many other minification techniques exist...

When the code has been minified, it's impossible to revert, unless it has been built with source maps which make the code look like it's not minified in the debugger.

If source maps don't exist for the code you are reverse engineering, then you don't have any solution unless the source code is public. In that case you'll probably be able to find it on https://www.github.com

Are JavaScript variable names changed to random letters when the file is minified?

2 Answers2