[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EYYMWFWGD0TTAPRG251D1X":3,"skill-same:01M6EYYMWFWGD0TTAPRG251D1X":75},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":46,"commitSha":47,"skillDirectory":48,"forksCount":49,"repositoryHtmlUrl":50,"repositoryHomepageUrl":51,"ownerHtmlUrl":52,"ownerBlogUrl":6,"ownerDescription":53,"updatedAt":54,"install":55,"resources":68},"01M6EYYMWFWGD0TTAPRG251D1X","javascript-mastery",null,"Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. From fundamentals like primitives and closures to advanced patterns like async\u002Fawait and functional programming. Use when explaining JS concepts, debugging JavaScript issues, or teaching JavaScript fundamentals.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fjavascript-mastery\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"javascript mastery","javascript","primitives","advanced","functional","essential","teaching","patterns","async","reference","use","programming","js","developer","functional programming","issues","debugging","2026-11-10 10:12:30",false,"---\nname: javascript-mastery\ndescription: \"Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. From fundamentals like primitives and closures to advanced patterns like async\u002Fawait and functional programming. Use when explaining JS concepts, debugging JavaScript issues, or teaching JavaScript fundamentals.\"\n---\n\n# ? JavaScript Mastery\n\n> 33+ essential JavaScript concepts every developer should know, inspired by [33-js-concepts](https:\u002F\u002Fgithub.com\u002Fleonardomso\u002F33-js-concepts).\n\n## When to Use This Skill\n\nUse this skill when:\n\n- Explaining JavaScript concepts\n- Debugging tricky JS behavior\n- Teaching JavaScript fundamentals\n- Reviewing code for JS best practices\n- Understanding language quirks\n\n---\n\n## 1. Fundamentals\n\n### 1.1 Primitive Types\n\nJavaScript has 7 primitive types:\n\n```javascript\n\u002F\u002F String\nconst str = \"hello\";\n\n\u002F\u002F Number (integers and floats)\nconst num = 42;\nconst float = 3.14;\n\n\u002F\u002F BigInt (for large integers)\nconst big = 9007199254740991n;\n\n\u002F\u002F Boolean\nconst bool = true;\n\n\u002F\u002F Undefined\nlet undef; \u002F\u002F undefined\n\n\u002F\u002F Null\nconst empty = null;\n\n\u002F\u002F Symbol (unique identifiers)\nconst sym = Symbol(\"description\");\n```\n\n**Key points**:\n\n- Primitives are immutable\n- Passed by value\n- `typeof null === \"object\"` is a historical bug\n\n### 1.2 Type Coercion\n\nJavaScript implicitly converts types:\n\n```javascript\n\u002F\u002F String coercion\n\"5\" + 3; \u002F\u002F \"53\" (number → string)\n\"5\" - 3; \u002F\u002F 2    (string → number)\n\n\u002F\u002F Boolean coercion\nBoolean(\"\"); \u002F\u002F false\nBoolean(\"hello\"); \u002F\u002F true\nBoolean(0); \u002F\u002F false\nBoolean([]); \u002F\u002F true (!)\n\n\u002F\u002F Equality coercion\n\"5\" == 5; \u002F\u002F true  (coerces)\n\"5\" === 5; \u002F\u002F false (strict)\n```\n\n**Falsy values** (8 total):\n`false`, `0`, `-0`, `0n`, `\"\"`, `null`, `undefined`, `NaN`\n\n### 1.3 Equality Operators\n\n```javascript\n\u002F\u002F == (loose equality) - coerces types\nnull == undefined; \u002F\u002F true\n\"1\" == 1; \u002F\u002F true\n\n\u002F\u002F === (strict equality) - no coercion\nnull === undefined; \u002F\u002F false\n\"1\" === 1; \u002F\u002F false\n\n\u002F\u002F Object.is() - handles edge cases\nObject.is(NaN, NaN); \u002F\u002F true (NaN === NaN is false!)\nObject.is(-0, 0); \u002F\u002F false (0 === -0 is true!)\n```\n\n**Rule**: Always use `===` unless you have a specific reason not to.\n\n---\n\n## 2. Scope & Closures\n\n### 2.1 Scope Types\n\n```javascript\n\u002F\u002F Global scope\nvar globalVar = \"global\";\n\nfunction outer() {\n  \u002F\u002F Function scope\n  var functionVar = \"function\";\n\n  if (true) {\n    \u002F\u002F Block scope (let\u002Fconst only)\n    let blockVar = \"block\";\n    const alsoBlock = \"block\";\n    var notBlock = \"function\"; \u002F\u002F var ignores blocks!\n  }\n}\n```\n\n### 2.2 Closures\n\nA closure is a function that remembers its lexical scope:\n\n```javascript\nfunction createCounter() {\n  let count = 0; \u002F\u002F \"closed over\" variable\n\n  return {\n    increment() {\n      return ++count;\n    },\n    decrement() {\n      return --count;\n    },\n    getCount() {\n      return count;\n    },\n  };\n}\n\nconst counter = createCounter();\ncounter.increment(); \u002F\u002F 1\ncounter.increment(); \u002F\u002F 2\ncounter.getCount(); \u002F\u002F 2\n```\n\n**Common use cases**:\n\n- Data privacy (module pattern)\n- Function factories\n- Partial application\n- Memoization\n\n### 2.3 var vs let vs const\n\n```javascript\n\u002F\u002F var - function scoped, hoisted, can redeclare\nvar x = 1;\nvar x = 2; \u002F\u002F OK\n\n\u002F\u002F let - block scoped, hoisted (TDZ), no redeclare\nlet y = 1;\n\u002F\u002F let y = 2; \u002F\u002F Error!\n\n\u002F\u002F const - like let, but can't reassign\nconst z = 1;\n\u002F\u002F z = 2; \u002F\u002F Error!\n\n\u002F\u002F BUT: const objects are mutable\nconst obj = { a: 1 };\nobj.a = 2; \u002F\u002F OK\nobj.b = 3; \u002F\u002F OK\n```\n\n---\n\n## 3. Functions & Execution\n\n### 3.1 Call Stack\n\n```javascript\nfunction first() {\n  console.log(\"first start\");\n  second();\n  console.log(\"first end\");\n}\n\nfunction second() {\n  console.log(\"second\");\n}\n\nfirst();\n\u002F\u002F Output:\n\u002F\u002F \"first start\"\n\u002F\u002F \"second\"\n\u002F\u002F \"first end\"\n```\n\nStack overflow example:\n\n```javascript\nfunction infinite() {\n  infinite(); \u002F\u002F No base case!\n}\ninfinite(); \u002F\u002F RangeError: Maximum call stack size exceeded\n```\n\n### 3.2 Hoisting\n\n```javascript\n\u002F\u002F Variable hoisting\nconsole.log(a); \u002F\u002F undefined (hoisted, not initialized)\nvar a = 5;\n\nconsole.log(b); \u002F\u002F ReferenceError (TDZ)\nlet b = 5;\n\n\u002F\u002F Function hoisting\nsayHi(); \u002F\u002F Works!\nfunction sayHi() {\n  console.log(\"Hi!\");\n}\n\n\u002F\u002F Function expressions don't hoist\nsayBye(); \u002F\u002F TypeError\nvar sayBye = function () {\n  console.log(\"Bye!\");\n};\n```\n\n### 3.3 this Keyword\n\n```javascript\n\u002F\u002F Global context\nconsole.log(this); \u002F\u002F window (browser) or global (Node)\n\n\u002F\u002F Object method\nconst obj = {\n  name: \"Alice\",\n  greet() {\n    console.log(this.name); \u002F\u002F \"Alice\"\n  },\n};\n\n\u002F\u002F Arrow functions (lexical this)\nconst obj2 = {\n  name: \"Bob\",\n  greet: () => {\n    console.log(this.name); \u002F\u002F undefined (inherits outer this)\n  },\n};\n\n\u002F\u002F Explicit binding\nfunction greet() {\n  console.log(this.name);\n}\ngreet.call({ name: \"Charlie\" }); \u002F\u002F \"Charlie\"\ngreet.apply({ name: \"Diana\" }); \u002F\u002F \"Diana\"\nconst bound = greet.bind({ name: \"Eve\" });\nbound(); \u002F\u002F \"Eve\"\n```\n\n---\n\n## 4. Event Loop & Async\n\n### 4.1 Event Loop\n\n```javascript\nconsole.log(\"1\");\n\nsetTimeout(() => console.log(\"2\"), 0);\n\nPromise.resolve().then(() => console.log(\"3\"));\n\nconsole.log(\"4\");\n\n\u002F\u002F Output: 1, 4, 3, 2\n\u002F\u002F Why? Microtasks (Promises) run before macrotasks (setTimeout)\n```\n\n**Execution order**:\n\n1. Synchronous code (call stack)\n2. Microtasks (Promise callbacks, queueMicrotask)\n3. Macrotasks (setTimeout, setInterval, I\u002FO)\n\n### 4.2 Callbacks\n\n```javascript\n\u002F\u002F Callback pattern\nfunction fetchData(callback) {\n  setTimeout(() => {\n    callback(null, { data: \"result\" });\n  }, 1000);\n}\n\n\u002F\u002F Error-first convention\nfetchData((error, result) => {\n  if (error) {\n    console.error(error);\n    return;\n  }\n  console.log(result);\n});\n\n\u002F\u002F Callback hell (avoid this!)\ngetData((data) => {\n  processData(data, (processed) => {\n    saveData(processed, (saved) => {\n      notify(saved, () => {\n        \u002F\u002F ? Pyramid of doom\n      });\n    });\n  });\n});\n```\n\n### 4.3 Promises\n\n```javascript\n\u002F\u002F Creating a Promise\nconst promise = new Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve(\"Success!\");\n    \u002F\u002F or: reject(new Error(\"Failed!\"));\n  }, 1000);\n});\n\n\u002F\u002F Consuming Promises\npromise\n  .then((result) => console.log(result))\n  .catch((error) => console.error(error))\n  .finally(() => console.log(\"Done\"));\n\n\u002F\u002F Promise combinators\nPromise.all([p1, p2, p3]); \u002F\u002F All must succeed\nPromise.allSettled([p1, p2]); \u002F\u002F Wait for all, get status\nPromise.race([p1, p2]); \u002F\u002F First to settle\nPromise.any([p1, p2]); \u002F\u002F First to succeed\n```\n\n### 4.4 async\u002Fawait\n\n```javascript\nasync function fetchUserData(userId) {\n  try {\n    const response = await fetch(`\u002Fapi\u002Fusers\u002F${userId}`);\n    if (!response.ok) throw new Error(\"Failed to fetch\");\n    const user = await response.json();\n    return user;\n  } catch (error) {\n    console.error(\"Error:\", error);\n    throw error; \u002F\u002F Re-throw for caller to handle\n  }\n}\n\n\u002F\u002F Parallel execution\nasync function fetchAll() {\n  const [users, posts] = await Promise.all([\n    fetch(\"\u002Fapi\u002Fusers\"),\n    fetch(\"\u002Fapi\u002Fposts\"),\n  ]);\n  return { users, posts };\n}\n```\n\n---\n\n## 5. Functional Programming\n\n### 5.1 Higher-Order Functions\n\nFunctions that take or return functions:\n\n```javascript\n\u002F\u002F Takes a function\nconst numbers = [1, 2, 3];\nconst doubled = numbers.map((n) => n * 2); \u002F\u002F [2, 4, 6]\n\n\u002F\u002F Returns a function\nfunction multiply(a) {\n  return function (b) {\n    return a * b;\n  };\n}\nconst double = multiply(2);\ndouble(5); \u002F\u002F 10\n```\n\n### 5.2 Pure Functions\n\n```javascript\n\u002F\u002F Pure: same input → same output, no side effects\nfunction add(a, b) {\n  return a + b;\n}\n\n\u002F\u002F Impure: modifies external state\nlet total = 0;\nfunction addToTotal(value) {\n  total += value; \u002F\u002F Side effect!\n  return total;\n}\n\n\u002F\u002F Impure: depends on external state\nfunction getDiscount(price) {\n  return price * globalDiscountRate; \u002F\u002F External dependency\n}\n```\n\n### 5.3 map, filter, reduce\n\n```javascript\nconst users = [\n  { name: \"Alice\", age: 25 },\n  { name: \"Bob\", age: 30 },\n  { name: \"Charlie\", age: 35 },\n];\n\n\u002F\u002F map: transform each element\nconst names = users.map((u) => u.name);\n\u002F\u002F [\"Alice\", \"Bob\", \"Charlie\"]\n\n\u002F\u002F filter: keep elements matching condition\nconst adults = users.filter((u) => u.age >= 30);\n\u002F\u002F [{ name: \"Bob\", ... }, { name: \"Charlie\", ... }]\n\n\u002F\u002F reduce: accumulate into single value\nconst totalAge = users.reduce((sum, u) => sum + u.age, 0);\n\u002F\u002F 90\n\n\u002F\u002F Chaining\nconst result = users\n  .filter((u) => u.age >= 30)\n  .map((u) => u.name)\n  .join(\", \");\n\u002F\u002F \"Bob, Charlie\"\n```\n\n### 5.4 Currying & Composition\n\n```javascript\n\u002F\u002F Currying: transform f(a, b, c) into f(a)(b)(c)\nconst curry = (fn) => {\n  return function curried(...args) {\n    if (args.length >= fn.length) {\n      return fn.apply(this, args);\n    }\n    return (...moreArgs) => curried(...args, ...moreArgs);\n  };\n};\n\nconst add = curry((a, b, c) => a + b + c);\nadd(1)(2)(3); \u002F\u002F 6\nadd(1, 2)(3); \u002F\u002F 6\nadd(1)(2, 3); \u002F\u002F 6\n\n\u002F\u002F Composition: combine functions\nconst compose =\n  (...fns) =>\n  (x) =>\n    fns.reduceRight((acc, fn) => fn(acc), x);\n\nconst pipe =\n  (...fns) =>\n  (x) =>\n    fns.reduce((acc, fn) => fn(acc), x);\n\nconst addOne = (x) => x + 1;\nconst double = (x) => x * 2;\n\nconst addThenDouble = compose(double, addOne);\naddThenDouble(5); \u002F\u002F 12 = (5 + 1) * 2\n\nconst doubleThenAdd = pipe(double, addOne);\ndoubleThenAdd(5); \u002F\u002F 11 = (5 * 2) + 1\n```\n\n---\n\n## 6. Objects & Prototypes\n\n### 6.1 Prototypal Inheritance\n\n```javascript\n\u002F\u002F Prototype chain\nconst animal = {\n  speak() {\n    console.log(\"Some sound\");\n  },\n};\n\nconst dog = Object.create(animal);\ndog.bark = function () {\n  console.log(\"Woof!\");\n};\n\ndog.speak(); \u002F\u002F \"Some sound\" (inherited)\ndog.bark(); \u002F\u002F \"Woof!\" (own method)\n\n\u002F\u002F ES6 Classes (syntactic sugar)\nclass Animal {\n  speak() {\n    console.log(\"Some sound\");\n  }\n}\n\nclass Dog extends Animal {\n  bark() {\n    console.log(\"Woof!\");\n  }\n}\n```\n\n### 6.2 Object Methods\n\n```javascript\nconst obj = { a: 1, b: 2 };\n\n\u002F\u002F Keys, values, entries\nObject.keys(obj); \u002F\u002F [\"a\", \"b\"]\nObject.values(obj); \u002F\u002F [1, 2]\nObject.entries(obj); \u002F\u002F [[\"a\", 1], [\"b\", 2]]\n\n\u002F\u002F Shallow copy\nconst copy = { ...obj };\nconst copy2 = Object.assign({}, obj);\n\n\u002F\u002F Freeze (immutable)\nconst frozen = Object.freeze({ x: 1 });\nfrozen.x = 2; \u002F\u002F Silently fails (or throws in strict mode)\n\n\u002F\u002F Seal (no add\u002Fdelete, can modify)\nconst sealed = Object.seal({ x: 1 });\nsealed.x = 2; \u002F\u002F OK\nsealed.y = 3; \u002F\u002F Fails\ndelete sealed.x; \u002F\u002F Fails\n```\n\n---\n\n## 7. Modern JavaScript (ES6+)\n\n### 7.1 Destructuring\n\n```javascript\n\u002F\u002F Array destructuring\nconst [first, second, ...rest] = [1, 2, 3, 4, 5];\n\u002F\u002F first = 1, second = 2, rest = [3, 4, 5]\n\n\u002F\u002F Object destructuring\nconst { name, age, city = \"Unknown\" } = { name: \"Alice\", age: 25 };\n\u002F\u002F name = \"Alice\", age = 25, city = \"Unknown\"\n\n\u002F\u002F Renaming\nconst { name: userName } = { name: \"Bob\" };\n\u002F\u002F userName = \"Bob\"\n\n\u002F\u002F Nested\nconst {\n  address: { street },\n} = { address: { street: \"123 Main\" } };\n```\n\n### 7.2 Spread & Rest\n\n```javascript\n\u002F\u002F Spread: expand iterable\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1, 4, 5]; \u002F\u002F [1, 2, 3, 4, 5]\n\nconst obj1 = { a: 1 };\nconst obj2 = { ...obj1, b: 2 }; \u002F\u002F { a: 1, b: 2 }\n\n\u002F\u002F Rest: collect remaining\nfunction sum(...numbers) {\n  return numbers.reduce((a, b) => a + b, 0);\n}\nsum(1, 2, 3, 4); \u002F\u002F 10\n```\n\n### 7.3 Modules\n\n```javascript\n\u002F\u002F Named exports\nexport const PI = 3.14159;\nexport function square(x) {\n  return x * x;\n}\n\n\u002F\u002F Default export\nexport default class Calculator {}\n\n\u002F\u002F Importing\nimport Calculator, { PI, square } from \".\u002Fmath.js\";\nimport * as math from \".\u002Fmath.js\";\n\n\u002F\u002F Dynamic import\nconst module = await import(\".\u002Fdynamic.js\");\n```\n\n### 7.4 Optional Chaining & Nullish Coalescing\n\n```javascript\n\u002F\u002F Optional chaining (?.)\nconst user = { address: { city: \"NYC\" } };\nconst city = user?.address?.city; \u002F\u002F \"NYC\"\nconst zip = user?.address?.zip; \u002F\u002F undefined (no error)\nconst fn = user?.getName?.(); \u002F\u002F undefined if no method\n\n\u002F\u002F Nullish coalescing (??)\nconst value = null ?? \"default\"; \u002F\u002F \"default\"\nconst zero = 0 ?? \"default\"; \u002F\u002F 0 (not nullish!)\nconst empty = \"\" ?? \"default\"; \u002F\u002F \"\" (not nullish!)\n\n\u002F\u002F Compare with ||\nconst value2 = 0 || \"default\"; \u002F\u002F \"default\" (0 is falsy)\n```\n\n---\n\n## Quick Reference Card\n\n| Concept        | Key Point                         |\n| :------------- | :-------------------------------- |\n| `==` vs `===`  | Always use `===`                  |\n| `var` vs `let` | Prefer `let`\u002F`const`              |\n| Closures       | Function + lexical scope          |\n| `this`         | Depends on how function is called |\n| Event loop     | Microtasks before macrotasks      |\n| Pure functions | Same input → same output          |\n| Prototypes     | `__proto__` → prototype chain     |\n| `??` vs `\\|\\|` | `??` only checks null\u002Fundefined   |\n\n---\n\n## Resources\n\n- [33 JS Concepts](https:\u002F\u002Fgithub.com\u002Fleonardomso\u002F33-js-concepts)\n- [JavaScript.info](https:\u002F\u002Fjavascript.info\u002F)\n- [MDN JavaScript Guide](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FGuide)\n- [You Don't Know JS](https:\u002F\u002Fgithub.com\u002Fgetify\u002FYou-Dont-Know-JS)\n","# ? JavaScript Mastery\n\n> 33+ essential JavaScript concepts every developer should know, inspired by [33-js-concepts](https:\u002F\u002Fgithub.com\u002Fleonardomso\u002F33-js-concepts).\n\n## When to Use This Skill\n\nUse this skill when:\n\n- Explaining JavaScript concepts\n- Debugging tricky JS behavior\n- Teaching JavaScript fundamentals\n- Reviewing code for JS best practices\n- Understanding language quirks\n\n---\n\n## 1. Fundamentals\n\n### 1.1 Primitive Types\n\nJavaScript has 7 primitive types:\n\n```javascript\n\u002F\u002F String\nconst str = \"hello\";\n\n\u002F\u002F Number (integers and floats)\nconst num = 42;\nconst float = 3.14;\n\n\u002F\u002F BigInt (for large integers)\nconst big = 9007199254740991n;\n\n\u002F\u002F Boolean\nconst bool = true;\n\n\u002F\u002F Undefined\nlet undef; \u002F\u002F undefined\n\n\u002F\u002F Null\nconst empty = null;\n\n\u002F\u002F Symbol (unique identifiers)\nconst sym = Symbol(\"description\");\n```\n\n**Key points**:\n\n- Primitives are immutable\n- Passed by value\n- `typeof null === \"object\"` is a historical bug\n\n### 1.2 Type Coercion\n\nJavaScript implicitly converts types:\n\n```javascript\n\u002F\u002F String coercion\n\"5\" + 3; \u002F\u002F \"53\" (number → string)\n\"5\" - 3; \u002F\u002F 2    (string → number)\n\n\u002F\u002F Boolean coercion\nBoolean(\"\"); \u002F\u002F false\nBoolean(\"hello\"); \u002F\u002F true\nBoolean(0); \u002F\u002F false\nBoolean([]); \u002F\u002F true (!)\n\n\u002F\u002F Equality coercion\n\"5\" == 5; \u002F\u002F true  (coerces)\n\"5\" === 5; \u002F\u002F false (strict)\n```\n\n**Falsy values** (8 total):\n`false`, `0`, `-0`, `0n`, `\"\"`, `null`, `undefined`, `NaN`\n\n### 1.3 Equality Operators\n\n```javascript\n\u002F\u002F == (loose equality) - coerces types\nnull == undefined; \u002F\u002F true\n\"1\" == 1; \u002F\u002F true\n\n\u002F\u002F === (strict equality) - no coercion\nnull === undefined; \u002F\u002F false\n\"1\" === 1; \u002F\u002F false\n\n\u002F\u002F Object.is() - handles edge cases\nObject.is(NaN, NaN); \u002F\u002F true (NaN === NaN is false!)\nObject.is(-0, 0); \u002F\u002F false (0 === -0 is true!)\n```\n\n**Rule**: Always use `===` unless you have a specific reason not to.\n\n---\n\n## 2. Scope & Closures\n\n### 2.1 Scope Types\n\n```javascript\n\u002F\u002F Global scope\nvar globalVar = \"global\";\n\nfunction outer() {\n  \u002F\u002F Function scope\n  var functionVar = \"function\";\n\n  if (true) {\n    \u002F\u002F Block scope (let\u002Fconst only)\n    let blockVar = \"block\";\n    const alsoBlock = \"block\";\n    var notBlock = \"function\"; \u002F\u002F var ignores blocks!\n  }\n}\n```\n\n### 2.2 Closures\n\nA closure is a function that remembers its lexical scope:\n\n```javascript\nfunction createCounter() {\n  let count = 0; \u002F\u002F \"closed over\" variable\n\n  return {\n    increment() {\n      return ++count;\n    },\n    decrement() {\n      return --count;\n    },\n    getCount() {\n      return count;\n    },\n  };\n}\n\nconst counter = createCounter();\ncounter.increment(); \u002F\u002F 1\ncounter.increment(); \u002F\u002F 2\ncounter.getCount(); \u002F\u002F 2\n```\n\n**Common use cases**:\n\n- Data privacy (module pattern)\n- Function factories\n- Partial application\n- Memoization\n\n### 2.3 var vs let vs const\n\n```javascript\n\u002F\u002F var - function scoped, hoisted, can redeclare\nvar x = 1;\nvar x = 2; \u002F\u002F OK\n\n\u002F\u002F let - block scoped, hoisted (TDZ), no redeclare\nlet y = 1;\n\u002F\u002F let y = 2; \u002F\u002F Error!\n\n\u002F\u002F const - like let, but can't reassign\nconst z = 1;\n\u002F\u002F z = 2; \u002F\u002F Error!\n\n\u002F\u002F BUT: const objects are mutable\nconst obj = { a: 1 };\nobj.a = 2; \u002F\u002F OK\nobj.b = 3; \u002F\u002F OK\n```\n\n---\n\n## 3. Functions & Execution\n\n### 3.1 Call Stack\n\n```javascript\nfunction first() {\n  console.log(\"first start\");\n  second();\n  console.log(\"first end\");\n}\n\nfunction second() {\n  console.log(\"second\");\n}\n\nfirst();\n\u002F\u002F Output:\n\u002F\u002F \"first start\"\n\u002F\u002F \"second\"\n\u002F\u002F \"first end\"\n```\n\nStack overflow example:\n\n```javascript\nfunction infinite() {\n  infinite(); \u002F\u002F No base case!\n}\ninfinite(); \u002F\u002F RangeError: Maximum call stack size exceeded\n```\n\n### 3.2 Hoisting\n\n```javascript\n\u002F\u002F Variable hoisting\nconsole.log(a); \u002F\u002F undefined (hoisted, not initialized)\nvar a = 5;\n\nconsole.log(b); \u002F\u002F ReferenceError (TDZ)\nlet b = 5;\n\n\u002F\u002F Function hoisting\nsayHi(); \u002F\u002F Works!\nfunction sayHi() {\n  console.log(\"Hi!\");\n}\n\n\u002F\u002F Function expressions don't hoist\nsayBye(); \u002F\u002F TypeError\nvar sayBye = function () {\n  console.log(\"Bye!\");\n};\n```\n\n### 3.3 this Keyword\n\n```javascript\n\u002F\u002F Global context\nconsole.log(this); \u002F\u002F window (browser) or global (Node)\n\n\u002F\u002F Object method\nconst obj = {\n  name: \"Alice\",\n  greet() {\n    console.log(this.name); \u002F\u002F \"Alice\"\n  },\n};\n\n\u002F\u002F Arrow functions (lexical this)\nconst obj2 = {\n  name: \"Bob\",\n  greet: () => {\n    console.log(this.name); \u002F\u002F undefined (inherits outer this)\n  },\n};\n\n\u002F\u002F Explicit binding\nfunction greet() {\n  console.log(this.name);\n}\ngreet.call({ name: \"Charlie\" }); \u002F\u002F \"Charlie\"\ngreet.apply({ name: \"Diana\" }); \u002F\u002F \"Diana\"\nconst bound = greet.bind({ name: \"Eve\" });\nbound(); \u002F\u002F \"Eve\"\n```\n\n---\n\n## 4. Event Loop & Async\n\n### 4.1 Event Loop\n\n```javascript\nconsole.log(\"1\");\n\nsetTimeout(() => console.log(\"2\"), 0);\n\nPromise.resolve().then(() => console.log(\"3\"));\n\nconsole.log(\"4\");\n\n\u002F\u002F Output: 1, 4, 3, 2\n\u002F\u002F Why? Microtasks (Promises) run before macrotasks (setTimeout)\n```\n\n**Execution order**:\n\n1. Synchronous code (call stack)\n2. Microtasks (Promise callbacks, queueMicrotask)\n3. Macrotasks (setTimeout, setInterval, I\u002FO)\n\n### 4.2 Callbacks\n\n```javascript\n\u002F\u002F Callback pattern\nfunction fetchData(callback) {\n  setTimeout(() => {\n    callback(null, { data: \"result\" });\n  }, 1000);\n}\n\n\u002F\u002F Error-first convention\nfetchData((error, result) => {\n  if (error) {\n    console.error(error);\n    return;\n  }\n  console.log(result);\n});\n\n\u002F\u002F Callback hell (avoid this!)\ngetData((data) => {\n  processData(data, (processed) => {\n    saveData(processed, (saved) => {\n      notify(saved, () => {\n        \u002F\u002F ? Pyramid of doom\n      });\n    });\n  });\n});\n```\n\n### 4.3 Promises\n\n```javascript\n\u002F\u002F Creating a Promise\nconst promise = new Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve(\"Success!\");\n    \u002F\u002F or: reject(new Error(\"Failed!\"));\n  }, 1000);\n});\n\n\u002F\u002F Consuming Promises\npromise\n  .then((result) => console.log(result))\n  .catch((error) => console.error(error))\n  .finally(() => console.log(\"Done\"));\n\n\u002F\u002F Promise combinators\nPromise.all([p1, p2, p3]); \u002F\u002F All must succeed\nPromise.allSettled([p1, p2]); \u002F\u002F Wait for all, get status\nPromise.race([p1, p2]); \u002F\u002F First to settle\nPromise.any([p1, p2]); \u002F\u002F First to succeed\n```\n\n### 4.4 async\u002Fawait\n\n```javascript\nasync function fetchUserData(userId) {\n  try {\n    const response = await fetch(`\u002Fapi\u002Fusers\u002F${userId}`);\n    if (!response.ok) throw new Error(\"Failed to fetch\");\n    const user = await response.json();\n    return user;\n  } catch (error) {\n    console.error(\"Error:\", error);\n    throw error; \u002F\u002F Re-throw for caller to handle\n  }\n}\n\n\u002F\u002F Parallel execution\nasync function fetchAll() {\n  const [users, posts] = await Promise.all([\n    fetch(\"\u002Fapi\u002Fusers\"),\n    fetch(\"\u002Fapi\u002Fposts\"),\n  ]);\n  return { users, posts };\n}\n```\n\n---\n\n## 5. Functional Programming\n\n### 5.1 Higher-Order Functions\n\nFunctions that take or return functions:\n\n```javascript\n\u002F\u002F Takes a function\nconst numbers = [1, 2, 3];\nconst doubled = numbers.map((n) => n * 2); \u002F\u002F [2, 4, 6]\n\n\u002F\u002F Returns a function\nfunction multiply(a) {\n  return function (b) {\n    return a * b;\n  };\n}\nconst double = multiply(2);\ndouble(5); \u002F\u002F 10\n```\n\n### 5.2 Pure Functions\n\n```javascript\n\u002F\u002F Pure: same input → same output, no side effects\nfunction add(a, b) {\n  return a + b;\n}\n\n\u002F\u002F Impure: modifies external state\nlet total = 0;\nfunction addToTotal(value) {\n  total += value; \u002F\u002F Side effect!\n  return total;\n}\n\n\u002F\u002F Impure: depends on external state\nfunction getDiscount(price) {\n  return price * globalDiscountRate; \u002F\u002F External dependency\n}\n```\n\n### 5.3 map, filter, reduce\n\n```javascript\nconst users = [\n  { name: \"Alice\", age: 25 },\n  { name: \"Bob\", age: 30 },\n  { name: \"Charlie\", age: 35 },\n];\n\n\u002F\u002F map: transform each element\nconst names = users.map((u) => u.name);\n\u002F\u002F [\"Alice\", \"Bob\", \"Charlie\"]\n\n\u002F\u002F filter: keep elements matching condition\nconst adults = users.filter((u) => u.age >= 30);\n\u002F\u002F [{ name: \"Bob\", ... }, { name: \"Charlie\", ... }]\n\n\u002F\u002F reduce: accumulate into single value\nconst totalAge = users.reduce((sum, u) => sum + u.age, 0);\n\u002F\u002F 90\n\n\u002F\u002F Chaining\nconst result = users\n  .filter((u) => u.age >= 30)\n  .map((u) => u.name)\n  .join(\", \");\n\u002F\u002F \"Bob, Charlie\"\n```\n\n### 5.4 Currying & Composition\n\n```javascript\n\u002F\u002F Currying: transform f(a, b, c) into f(a)(b)(c)\nconst curry = (fn) => {\n  return function curried(...args) {\n    if (args.length >= fn.length) {\n      return fn.apply(this, args);\n    }\n    return (...moreArgs) => curried(...args, ...moreArgs);\n  };\n};\n\nconst add = curry((a, b, c) => a + b + c);\nadd(1)(2)(3); \u002F\u002F 6\nadd(1, 2)(3); \u002F\u002F 6\nadd(1)(2, 3); \u002F\u002F 6\n\n\u002F\u002F Composition: combine functions\nconst compose =\n  (...fns) =>\n  (x) =>\n    fns.reduceRight((acc, fn) => fn(acc), x);\n\nconst pipe =\n  (...fns) =>\n  (x) =>\n    fns.reduce((acc, fn) => fn(acc), x);\n\nconst addOne = (x) => x + 1;\nconst double = (x) => x * 2;\n\nconst addThenDouble = compose(double, addOne);\naddThenDouble(5); \u002F\u002F 12 = (5 + 1) * 2\n\nconst doubleThenAdd = pipe(double, addOne);\ndoubleThenAdd(5); \u002F\u002F 11 = (5 * 2) + 1\n```\n\n---\n\n## 6. Objects & Prototypes\n\n### 6.1 Prototypal Inheritance\n\n```javascript\n\u002F\u002F Prototype chain\nconst animal = {\n  speak() {\n    console.log(\"Some sound\");\n  },\n};\n\nconst dog = Object.create(animal);\ndog.bark = function () {\n  console.log(\"Woof!\");\n};\n\ndog.speak(); \u002F\u002F \"Some sound\" (inherited)\ndog.bark(); \u002F\u002F \"Woof!\" (own method)\n\n\u002F\u002F ES6 Classes (syntactic sugar)\nclass Animal {\n  speak() {\n    console.log(\"Some sound\");\n  }\n}\n\nclass Dog extends Animal {\n  bark() {\n    console.log(\"Woof!\");\n  }\n}\n```\n\n### 6.2 Object Methods\n\n```javascript\nconst obj = { a: 1, b: 2 };\n\n\u002F\u002F Keys, values, entries\nObject.keys(obj); \u002F\u002F [\"a\", \"b\"]\nObject.values(obj); \u002F\u002F [1, 2]\nObject.entries(obj); \u002F\u002F [[\"a\", 1], [\"b\", 2]]\n\n\u002F\u002F Shallow copy\nconst copy = { ...obj };\nconst copy2 = Object.assign({}, obj);\n\n\u002F\u002F Freeze (immutable)\nconst frozen = Object.freeze({ x: 1 });\nfrozen.x = 2; \u002F\u002F Silently fails (or throws in strict mode)\n\n\u002F\u002F Seal (no add\u002Fdelete, can modify)\nconst sealed = Object.seal({ x: 1 });\nsealed.x = 2; \u002F\u002F OK\nsealed.y = 3; \u002F\u002F Fails\ndelete sealed.x; \u002F\u002F Fails\n```\n\n---\n\n## 7. Modern JavaScript (ES6+)\n\n### 7.1 Destructuring\n\n```javascript\n\u002F\u002F Array destructuring\nconst [first, second, ...rest] = [1, 2, 3, 4, 5];\n\u002F\u002F first = 1, second = 2, rest = [3, 4, 5]\n\n\u002F\u002F Object destructuring\nconst { name, age, city = \"Unknown\" } = { name: \"Alice\", age: 25 };\n\u002F\u002F name = \"Alice\", age = 25, city = \"Unknown\"\n\n\u002F\u002F Renaming\nconst { name: userName } = { name: \"Bob\" };\n\u002F\u002F userName = \"Bob\"\n\n\u002F\u002F Nested\nconst {\n  address: { street },\n} = { address: { street: \"123 Main\" } };\n```\n\n### 7.2 Spread & Rest\n\n```javascript\n\u002F\u002F Spread: expand iterable\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1, 4, 5]; \u002F\u002F [1, 2, 3, 4, 5]\n\nconst obj1 = { a: 1 };\nconst obj2 = { ...obj1, b: 2 }; \u002F\u002F { a: 1, b: 2 }\n\n\u002F\u002F Rest: collect remaining\nfunction sum(...numbers) {\n  return numbers.reduce((a, b) => a + b, 0);\n}\nsum(1, 2, 3, 4); \u002F\u002F 10\n```\n\n### 7.3 Modules\n\n```javascript\n\u002F\u002F Named exports\nexport const PI = 3.14159;\nexport function square(x) {\n  return x * x;\n}\n\n\u002F\u002F Default export\nexport default class Calculator {}\n\n\u002F\u002F Importing\nimport Calculator, { PI, square } from \".\u002Fmath.js\";\nimport * as math from \".\u002Fmath.js\";\n\n\u002F\u002F Dynamic import\nconst module = await import(\".\u002Fdynamic.js\");\n```\n\n### 7.4 Optional Chaining & Nullish Coalescing\n\n```javascript\n\u002F\u002F Optional chaining (?.)\nconst user = { address: { city: \"NYC\" } };\nconst city = user?.address?.city; \u002F\u002F \"NYC\"\nconst zip = user?.address?.zip; \u002F\u002F undefined (no error)\nconst fn = user?.getName?.(); \u002F\u002F undefined if no method\n\n\u002F\u002F Nullish coalescing (??)\nconst value = null ?? \"default\"; \u002F\u002F \"default\"\nconst zero = 0 ?? \"default\"; \u002F\u002F 0 (not nullish!)\nconst empty = \"\" ?? \"default\"; \u002F\u002F \"\" (not nullish!)\n\n\u002F\u002F Compare with ||\nconst value2 = 0 || \"default\"; \u002F\u002F \"default\" (0 is falsy)\n```\n\n---\n\n## Quick Reference Card\n\n| Concept        | Key Point                         |\n| :------------- | :-------------------------------- |\n| `==` vs `===`  | Always use `===`                  |\n| `var` vs `let` | Prefer `let`\u002F`const`              |\n| Closures       | Function + lexical scope          |\n| `this`         | Depends on how function is called |\n| Event loop     | Microtasks before macrotasks      |\n| Pure functions | Same input → same output          |\n| Prototypes     | `__proto__` → prototype chain     |\n| `??` vs `\\|\\|` | `??` only checks null\u002Fundefined   |\n\n---\n\n## Resources\n\n- [33 JS Concepts](https:\u002F\u002Fgithub.com\u002Fleonardomso\u002F33-js-concepts)\n- [JavaScript.info](https:\u002F\u002Fjavascript.info\u002F)\n- [MDN JavaScript Guide](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FGuide)\n- [You Don't Know JS](https:\u002F\u002Fgithub.com\u002Fgetify\u002FYou-Dont-Know-JS)\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fjavascript-mastery",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill javascript-mastery",{"tool":61,"command":62},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill javascript-mastery",{"tool":64,"command":65},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill javascript-mastery","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fjavascript-mastery\u002FSKILL.md",true,[69],{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"skill-report.json","REFERENCE","参考文档",8635,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fjavascript-mastery\u002Fskill-report.json",[76,90,100,109,115,122],{"skillNo":77,"name":78,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":86,"publishedAt":41},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[81],{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[87,88,89],"model","model hierarchy","model hierarchy skill",{"skillNo":91,"name":92,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":96,"publishedAt":41},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[95],{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},[97,98,99],"MCP","zoom","zoom mcp",{"skillNo":101,"name":102,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":105,"publishedAt":41},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[106,107,108,98],"sdk","zoom apps sdk","apps",{"skillNo":110,"name":111,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":41},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[111],{"skillNo":116,"name":117,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":121,"publishedAt":41},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[120],{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},[117],{"skillNo":123,"name":124,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":127,"publishedAt":41},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[124]]