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 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.
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 atrue becomes !0false becomes !1Even 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