wtfjs: The JavaScript Wizardry Encyclopedia — Not Jokes, But an ECMA Specification Mirror

{
  "repoFullName": "denysdovhan/wtfjs",
  "repoUrl": "https://github.com/denysdovhan/wtfjs",
  "repoName": "wtfjs",
  "language": "javascript",
  "stars": 37700,
  "analysisContent": "Hey front-end comrades, back-end lurkers, and Java veterans who’ve been dizzy-eyed by `null == undefined` — I’m Zhou Xiaoma, an 8-year Java veteran whose life was woven by Spring AOP and whose youth was cached by Hibernate’s second-level cache. Today, we won’t talk about JVM GC tuning or how to write MyBatis dynamic SQL that looks more like XML than SQL. Let’s go offbeat: open GitHub Trending’s #1 spot — [wtfjs](https://github.com/denysdovhan/wtfjs), a JavaScript-written technical field guide to *Human Confusion Behavior Awards*.\n\nDon’t get me wrong — this is *not* a joke collection. It’s a hardcore textbook disguised as comedy, hiding the full ECMAScript specification kernel beneath its humorous surface. Like your neighborhood crepe vendor who, on the surface, says \"add egg + sausage,\" is in fact a master of thermodynamics (griddle temperature), fluid dynamics (sauce drip trajectory), and materials science (the critical crispness point of scallions). wtfjs works the same way — behind every `[] == ![]` stands Section 7.2.15, *Abstract Equality Comparison Algorithm*; each line `NaN === NaN // -> false` resurrects the ghost of IEEE 754 floating-point standard.\n\nBottom line: this isn’t a toy project — it’s a spec mirror. It doesn’t teach you *how to write JS* — it forces you to confront *how JS actually executes*. As a Java developer who lives and breathes `Optional.ofNullable()`, my coffee nearly spilled onto the keyboard the first time I saw `document.all == null // -> true` but `document.all === null // -> false`: this isn’t a programming language — it’s Schrödinger’s spec!\n\n### Installation? No — it’s a ‘subscription’\n\nwtfjs never intended for you to import it as a dependency. It follows a hacker publishing model — npm is just its distribution channel:\n\n```bash\n$ npm install -g wtfjs\n```\n\nOnce installed, run `wtfjs` directly in your terminal — it opens the entire handbook inside your `$PAGER` (e.g., `less`). This design *gets* developers: not a documentation website, but *The JavaScript Wizardry Encyclopedia* inside your CLI. No bloated `package.json` full of `devDependencies`, no `node_modules` hiding 23 versions of `lodash` — clean as ES5 code freshly escaped from a TypeScript compiler.\n\n### Hello WTF? — Starting from the most absurd\n\nIt doesn’t give you `console.log('Hello World')`. It gives you this:\n\n```js\n[] == ![]; // -> true\n```\n\nFirst glance: blood pressure spikes. Closer read: spine-chilling. Why does an empty array equal a *non-empty* array? Because JS secretly converts both sides to numbers during `==`: `[]` becomes `0` (per Array’s `ToNumber` rule), and `![]` first becomes boolean `false`, then number `0`, so `0 == 0` holds. This isn’t a bug — it’s ECMA-262 Section 7.2.15’s officially stamped *‘legitimate nonsense’*.\n\nNow consider something even wilder:\n\n```js\n(![] + [])[+[]] +\n  (![] + [])[+!+[]] +\n  ([![]] + [][[]])[+!+[] + [+[]]] +\n  (![] + [])[!+[] + !+[]];\n// -> 'fail'\n```\n\nIs this code? It’s Morse code written in JavaScript! It generates the string `'false'` via `![] + []`, then uses `+[]` (coerces to number `0`) and `+!+[]` (`!+[]` → `false`, `+false` → `0`, but wait — `+!+[]` is actually `+(!![])` → `+true` → `1`!), precisely indexing characters to spell `'fail'`. This isn’t programming anymore — it’s bytecode-level JavaScript performance art.\n\n### ‘Common knowledge’ you thought you understood — but got burned hard\n\n- **`null` is an object?** `typeof null === 'object'` — this is a legacy V8 engine bug dating back to 1995, when Brendan Eich set `null`’s internal representation to all zeros — same as object pointers at the time — so `typeof` misidentified it. The spec still hasn’t fixed it, because fixing it would break millions of production lines of code. In Java, `null instanceof Object` throws immediately; in JS, it lives on as a philosophical paradox.\n\n- **`0.1 + 0.2 !== 0.3`?** Not JavaScript’s fault — it’s IEEE 754 binary floating-point doing its absolute best to simulate decimal arithmetic. Like asking a Michelin-starred chef to make sushi out of flour — not a skill issue, but a fundamental mismatch of raw materials. wtfjs teaches you: this isn’t a flaw — it’s physics manifesting in code.\n\n- **Why does `parseInt("Infinity", 19)` equal `18`?** Because `I` is the 18th digit in base-19 (digits: 0–9, A–I). `parseInt` doesn’t care what you’re parsing — it faithfully translates characters using the radix table. This isn’t a function — it’s an emotionless radix translator.\n\n### Architecture? Doesn’t exist — it’s a living spec annotation\n\nwtfjs has no architecture diagram, no module boundaries, no CI/CD pipeline. Its ‘architecture’ *is* the GitHub repo structure: one README.md, dozens of anchor-linked headings, each containing code blocks + explanations + spec links. It practices Unix philosophy in its purest form: *‘do one thing well.’* It performs no runtime checks, exposes no API, wraps no utility classes — it only *presents*, turning cold spec algorithms into live, moving examples right in your terminal.\n\nThis design maximizes pedagogical impact: seeing `Array.prototype.sort()` default to string-sorting and produce `[10, 1, 3] → [1, 10, 3]` instantly reveals why production code *must* supply a `compareFn`; seeing `{a: 1}{b: 2}` throw in the console immediately clarifies how `{}` behaves differently as an object literal vs. a code block — this kind of cognitive shock beats reading ten pages of MDN docs.\n\n### A Java veteran’s honest take: Should you learn this?\n\nLet’s be frank: if your goal is *‘ship a React admin dashboard ASAP’*, wtfjs should rank *after* learning how to set breakpoints in Chrome DevTools. But if your goal is *‘become a frontend architect capable of submitting PRs to V8 within three years’*, then this is your *‘Nine Yin Manual’ Volume II*.\n\nIn Java, I write `Objects.equals(a, b)` daily — because I fear `==` failing on boxed types; JS developers, meanwhile, must actively embrace `==`’s implicit coercion, then patch cracks with `Object.is()`. This mental gap reflects deeper language philosophies: Java pursues determinism (`final`, `private`, generics pre-erasure), while JS embraces dynamism (duck typing, prototype chains, runtime modification of `Function.prototype`).\n\nSo my advice: don’t treat it as a tutorial — treat it as a *‘JavaScript anatomy lab’*. Pick three examples weekly, close your browser, type them manually, and read the original ECMA-262 spec. One day, when you realize `[].toString() === ''` and `{}.toString() === '[object Object]'` stem from differentiated implementations of the internal `[[ToString]]` method — congratulations: you’re no longer *writing* JavaScript. You’re *talking to the JS engine*.\n\nFinally, here’s the spirit of wtfjs: **Don’t panic. Just read the spec.** Because every `WTF` inevitably ends in `Aha!`.",
  "codeExamples": [
    {
      "type": "installation",
      "description": "Globally install the CLI handbook tool",
      "code": "$ npm install -g wtfjs"
    },
    {
      "type": "quickstart",
      "description": "The classic ‘empty array equals non-empty array’ paradox",
      "code": "[] == ![]; // -> true"
    },
    {
      "type": "advanced",
      "description": "Construct the string 'fail' using native JS syntax — no letters, no quotes",
      "code": "(![] + [])[+[]] +\n  (![] + [])[+!+[]] +\n  ([![]] + [][[]])[+!+[] + [+[]]] +\n  (![] + [])[!+[] + !+[]];\n// -> 'fail'"
    }
  ],
  "keyFeatures": ["Covers *all* JavaScript implicit type conversion pitfalls", "Each example links directly to the relevant ECMA spec clause", "Supports multilingual translations (including Chinese)"]
}}

## Translation guidelines:

### 1. Technical term handling
Common term mapping:
- 微服务 → microservices
- 高并发 → high concurrency
- 分布式 → distributed
- 负载均衡 → load balancing
- 依赖注入 → dependency injection
- 控制反转 → inversion of control
- 中间件 → middleware
- 消息队列 → message queue
- 缓存 → cache/caching
- 线程池 → thread pool
(Use industry-standard translations; proper nouns remain unchanged)

### 2. Code block handling (critical)
- Preserve all code blocks exactly as-is
- Only translate Chinese comments *inside* code
- Example:
Original:
```java
// 初始化配置
Config config = new Config();

// Initialize configuration
Config config = new Config();

{
  "title": "English title (highlighting technical value)",
  "summary": "English summary (emphasizing key technical highlights)",
  "content": "Full English content (with all code preserved)",
  "category": "Open Source",
  "tags": "GitHub,OpenSource,corresponding tech tags",
  "zhBlogId": "509",
  "repoUrl": "https://github.com/denysdovhan/wtfjs",
  "repoName": "wtfjs"
}