Javascript Mastery

1---
2name: javascript-mastery
3description: "Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. From fundamentals like primitives and closures to advanced patterns like async/await and functional programming. Use when explaining JS concepts, debugging JavaScript issues, or teaching JavaScript fundamentals."
4---
5 
6# 🧠 JavaScript Mastery
7 
8> 33+ essential JavaScript concepts every developer should know, inspired by [33-js-concepts](https://github.com/leonardomso/33-js-concepts).
9 
10## When to Use This Skill
11 
12Use this skill when:
13 
14- Explaining JavaScript concepts
15- Debugging tricky JS behavior
16- Teaching JavaScript fundamentals
17- Reviewing code for JS best practices
18- Understanding language quirks
19 
20---
21 
22## 1. Fundamentals
23 
24### 1.1 Primitive Types
25 
26JavaScript has 7 primitive types:
27 
28```javascript
29// String
30const str = "hello";
31 
32// Number (integers and floats)
33const num = 42;
34const float = 3.14;
35 
36// BigInt (for large integers)
37const big = 9007199254740991n;
38 
39// Boolean
40const bool = true;
41 
42// Undefined
43let undef; // undefined
44 
45// Null
46const empty = null;
47 
48// Symbol (unique identifiers)
49const sym = Symbol("description");
50```
51 
52**Key points**:
53 
54- Primitives are immutable
55- Passed by value
56- `typeof null === "object"` is a historical bug
57 
58### 1.2 Type Coercion
59 
60JavaScript implicitly converts types:
61 
62```javascript
63// String coercion
64"5" + 3; // "53" (number → string)
65"5" - 3; // 2    (string → number)
66 
67// Boolean coercion
68Boolean(""); // false
69Boolean("hello"); // true
70Boolean(0); // false
71Boolean([]); // true (!)
72 
73// Equality coercion
74"5" == 5; // true  (coerces)
75"5" === 5; // false (strict)
76```
77 
78**Falsy values** (8 total):
79`false`, `0`, `-0`, `0n`, `""`, `null`, `undefined`, `NaN`
80 
81### 1.3 Equality Operators
82 
83```javascript
84// == (loose equality) - coerces types
85null == undefined; // true
86"1" == 1; // true
87 
88// === (strict equality) - no coercion
89null === undefined; // false
90"1" === 1; // false
91 
92// Object.is() - handles edge cases
93Object.is(NaN, NaN); // true (NaN === NaN is false!)
94Object.is(-0, 0); // false (0 === -0 is true!)
95```
96 
97**Rule**: Always use `===` unless you have a specific reason not to.
98 
99---
100 
101## 2. Scope & Closures
102 
103### 2.1 Scope Types
104 
105```javascript
106// Global scope
107var globalVar = "global";
108 
109function outer() {
110  // Function scope
111  var functionVar = "function";
112 
113  if (true) {
114    // Block scope (let/const only)
115    let blockVar = "block";
116    const alsoBlock = "block";
117    var notBlock = "function"; // var ignores blocks!
118  }
119}
120```
121 
122### 2.2 Closures
123 
124A closure is a function that remembers its lexical scope:
125 
126```javascript
127function createCounter() {
128  let count = 0; // "closed over" variable
129 
130  return {
131    increment() {
132      return ++count;
133    },
134    decrement() {
135      return --count;
136    },
137    getCount() {
138      return count;
139    },
140  };
141}
142 
143const counter = createCounter();
144counter.increment(); // 1
145counter.increment(); // 2
146counter.getCount(); // 2
147```
148 
149**Common use cases**:
150 
151- Data privacy (module pattern)
152- Function factories
153- Partial application
154- Memoization
155 
156### 2.3 var vs let vs const
157 
158```javascript
159// var - function scoped, hoisted, can redeclare
160var x = 1;
161var x = 2; // OK
162 
163// let - block scoped, hoisted (TDZ), no redeclare
164let y = 1;
165// let y = 2; // Error!
166 
167// const - like let, but can't reassign
168const z = 1;
169// z = 2; // Error!
170 
171// BUT: const objects are mutable
172const obj = { a: 1 };
173obj.a = 2; // OK
174obj.b = 3; // OK
175```
176 
177---
178 
179## 3. Functions & Execution
180 
181### 3.1 Call Stack
182 
183```javascript
184function first() {
185  console.log("first start");
186  second();
187  console.log("first end");
188}
189 
190function second() {
191  console.log("second");
192}
193 
194first();
195// Output:
196// "first start"
197// "second"
198// "first end"
199```
200 
201Stack overflow example:
202 
203```javascript
204function infinite() {
205  infinite(); // No base case!
206}
207infinite(); // RangeError: Maximum call stack size exceeded
208```
209 
210### 3.2 Hoisting
211 
212```javascript
213// Variable hoisting
214console.log(a); // undefined (hoisted, not initialized)
215var a = 5;
216 
217console.log(b); // ReferenceError (TDZ)
218let b = 5;
219 
220// Function hoisting
221sayHi(); // Works!
222function sayHi() {
223  console.log("Hi!");
224}
225 
226// Function expressions don't hoist
227sayBye(); // TypeError
228var sayBye = function () {
229  console.log("Bye!");
230};
231```
232 
233### 3.3 this Keyword
234 
235```javascript
236// Global context
237console.log(this); // window (browser) or global (Node)
238 
239// Object method
240const obj = {
241  name: "Alice",
242  greet() {
243    console.log(this.name); // "Alice"
244  },
245};
246 
247// Arrow functions (lexical this)
248const obj2 = {
249  name: "Bob",
250  greet: () => {
251    console.log(this.name); // undefined (inherits outer this)
252  },
253};
254 
255// Explicit binding
256function greet() {
257  console.log(this.name);
258}
259greet.call({ name: "Charlie" }); // "Charlie"
260greet.apply({ name: "Diana" }); // "Diana"
261const bound = greet.bind({ name: "Eve" });
262bound(); // "Eve"
263```
264 
265---
266 
267## 4. Event Loop & Async
268 
269### 4.1 Event Loop
270 
271```javascript
272console.log("1");
273 
274setTimeout(() => console.log("2"), 0);
275 
276Promise.resolve().then(() => console.log("3"));
277 
278console.log("4");
279 
280// Output: 1, 4, 3, 2
281// Why? Microtasks (Promises) run before macrotasks (setTimeout)
282```
283 
284**Execution order**:
285 
2861. Synchronous code (call stack)
2872. Microtasks (Promise callbacks, queueMicrotask)
2883. Macrotasks (setTimeout, setInterval, I/O)
289 
290### 4.2 Callbacks
291 
292```javascript
293// Callback pattern
294function fetchData(callback) {
295  setTimeout(() => {
296    callback(null, { data: "result" });
297  }, 1000);
298}
299 
300// Error-first convention
301fetchData((error, result) => {
302  if (error) {
303    console.error(error);
304    return;
305  }
306  console.log(result);
307});
308 
309// Callback hell (avoid this!)
310getData((data) => {
311  processData(data, (processed) => {
312    saveData(processed, (saved) => {
313      notify(saved, () => {
314        // 😱 Pyramid of doom
315      });
316    });
317  });
318});
319```
320 
321### 4.3 Promises
322 
323```javascript
324// Creating a Promise
325const promise = new Promise((resolve, reject) => {
326  setTimeout(() => {
327    resolve("Success!");
328    // or: reject(new Error("Failed!"));
329  }, 1000);
330});
331 
332// Consuming Promises
333promise
334  .then((result) => console.log(result))
335  .catch((error) => console.error(error))
336  .finally(() => console.log("Done"));
337 
338// Promise combinators
339Promise.all([p1, p2, p3]); // All must succeed
340Promise.allSettled([p1, p2]); // Wait for all, get status
341Promise.race([p1, p2]); // First to settle
342Promise.any([p1, p2]); // First to succeed
343```
344 
345### 4.4 async/await
346 
347```javascript
348async function fetchUserData(userId) {
349  try {
350    const response = await fetch(`/api/users/${userId}`);
351    if (!response.ok) throw new Error("Failed to fetch");
352    const user = await response.json();
353    return user;
354  } catch (error) {
355    console.error("Error:", error);
356    throw error; // Re-throw for caller to handle
357  }
358}
359 
360// Parallel execution
361async function fetchAll() {
362  const [users, posts] = await Promise.all([
363    fetch("/api/users"),
364    fetch("/api/posts"),
365  ]);
366  return { users, posts };
367}
368```
369 
370---
371 
372## 5. Functional Programming
373 
374### 5.1 Higher-Order Functions
375 
376Functions that take or return functions:
377 
378```javascript
379// Takes a function
380const numbers = [1, 2, 3];
381const doubled = numbers.map((n) => n * 2); // [2, 4, 6]
382 
383// Returns a function
384function multiply(a) {
385  return function (b) {
386    return a * b;
387  };
388}
389const double = multiply(2);
390double(5); // 10
391```
392 
393### 5.2 Pure Functions
394 
395```javascript
396// Pure: same input → same output, no side effects
397function add(a, b) {
398  return a + b;
399}
400 
401// Impure: modifies external state
402let total = 0;
403function addToTotal(value) {
404  total += value; // Side effect!
405  return total;
406}
407 
408// Impure: depends on external state
409function getDiscount(price) {
410  return price * globalDiscountRate; // External dependency
411}
412```
413 
414### 5.3 map, filter, reduce
415 
416```javascript
417const users = [
418  { name: "Alice", age: 25 },
419  { name: "Bob", age: 30 },
420  { name: "Charlie", age: 35 },
421];
422 
423// map: transform each element
424const names = users.map((u) => u.name);
425// ["Alice", "Bob", "Charlie"]
426 
427// filter: keep elements matching condition
428const adults = users.filter((u) => u.age >= 30);
429// [{ name: "Bob", ... }, { name: "Charlie", ... }]
430 
431// reduce: accumulate into single value
432const totalAge = users.reduce((sum, u) => sum + u.age, 0);
433// 90
434 
435// Chaining
436const result = users
437  .filter((u) => u.age >= 30)
438  .map((u) => u.name)
439  .join(", ");
440// "Bob, Charlie"
441```
442 
443### 5.4 Currying & Composition
444 
445```javascript
446// Currying: transform f(a, b, c) into f(a)(b)(c)
447const curry = (fn) => {
448  return function curried(...args) {
449    if (args.length >= fn.length) {
450      return fn.apply(this, args);
451    }
452    return (...moreArgs) => curried(...args, ...moreArgs);
453  };
454};
455 
456const add = curry((a, b, c) => a + b + c);
457add(1)(2)(3); // 6
458add(1, 2)(3); // 6
459add(1)(2, 3); // 6
460 
461// Composition: combine functions
462const compose =
463  (...fns) =>
464  (x) =>
465    fns.reduceRight((acc, fn) => fn(acc), x);
466 
467const pipe =
468  (...fns) =>
469  (x) =>
470    fns.reduce((acc, fn) => fn(acc), x);
471 
472const addOne = (x) => x + 1;
473const double = (x) => x * 2;
474 
475const addThenDouble = compose(double, addOne);
476addThenDouble(5); // 12 = (5 + 1) * 2
477 
478const doubleThenAdd = pipe(double, addOne);
479doubleThenAdd(5); // 11 = (5 * 2) + 1
480```
481 
482---
483 
484## 6. Objects & Prototypes
485 
486### 6.1 Prototypal Inheritance
487 
488```javascript
489// Prototype chain
490const animal = {
491  speak() {
492    console.log("Some sound");
493  },
494};
495 
496const dog = Object.create(animal);
497dog.bark = function () {
498  console.log("Woof!");
499};
500 
501dog.speak(); // "Some sound" (inherited)
502dog.bark(); // "Woof!" (own method)
503 
504// ES6 Classes (syntactic sugar)
505class Animal {
506  speak() {
507    console.log("Some sound");
508  }
509}
510 
511class Dog extends Animal {
512  bark() {
513    console.log("Woof!");
514  }
515}
516```
517 
518### 6.2 Object Methods
519 
520```javascript
521const obj = { a: 1, b: 2 };
522 
523// Keys, values, entries
524Object.keys(obj); // ["a", "b"]
525Object.values(obj); // [1, 2]
526Object.entries(obj); // [["a", 1], ["b", 2]]
527 
528// Shallow copy
529const copy = { ...obj };
530const copy2 = Object.assign({}, obj);
531 
532// Freeze (immutable)
533const frozen = Object.freeze({ x: 1 });
534frozen.x = 2; // Silently fails (or throws in strict mode)
535 
536// Seal (no add/delete, can modify)
537const sealed = Object.seal({ x: 1 });
538sealed.x = 2; // OK
539sealed.y = 3; // Fails
540delete sealed.x; // Fails
541```
542 
543---
544 
545## 7. Modern JavaScript (ES6+)
546 
547### 7.1 Destructuring
548 
549```javascript
550// Array destructuring
551const [first, second, ...rest] = [1, 2, 3, 4, 5];
552// first = 1, second = 2, rest = [3, 4, 5]
553 
554// Object destructuring
555const { name, age, city = "Unknown" } = { name: "Alice", age: 25 };
556// name = "Alice", age = 25, city = "Unknown"
557 
558// Renaming
559const { name: userName } = { name: "Bob" };
560// userName = "Bob"
561 
562// Nested
563const {
564  address: { street },
565} = { address: { street: "123 Main" } };
566```
567 
568### 7.2 Spread & Rest
569 
570```javascript
571// Spread: expand iterable
572const arr1 = [1, 2, 3];
573const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
574 
575const obj1 = { a: 1 };
576const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }
577 
578// Rest: collect remaining
579function sum(...numbers) {
580  return numbers.reduce((a, b) => a + b, 0);
581}
582sum(1, 2, 3, 4); // 10
583```
584 
585### 7.3 Modules
586 
587```javascript
588// Named exports
589export const PI = 3.14159;
590export function square(x) {
591  return x * x;
592}
593 
594// Default export
595export default class Calculator {}
596 
597// Importing
598import Calculator, { PI, square } from "./math.js";
599import * as math from "./math.js";
600 
601// Dynamic import
602const module = await import("./dynamic.js");
603```
604 
605### 7.4 Optional Chaining & Nullish Coalescing
606 
607```javascript
608// Optional chaining (?.)
609const user = { address: { city: "NYC" } };
610const city = user?.address?.city; // "NYC"
611const zip = user?.address?.zip; // undefined (no error)
612const fn = user?.getName?.(); // undefined if no method
613 
614// Nullish coalescing (??)
615const value = null ?? "default"; // "default"
616const zero = 0 ?? "default"; // 0 (not nullish!)
617const empty = "" ?? "default"; // "" (not nullish!)
618 
619// Compare with ||
620const value2 = 0 || "default"; // "default" (0 is falsy)
621```
622 
623---
624 
625## Quick Reference Card
626 
627| Concept        | Key Point                         |
628| :------------- | :-------------------------------- |
629| `==` vs `===`  | Always use `===`                  |
630| `var` vs `let` | Prefer `let`/`const`              |
631| Closures       | Function + lexical scope          |
632| `this`         | Depends on how function is called |
633| Event loop     | Microtasks before macrotasks      |
634| Pure functions | Same input → same output          |
635| Prototypes     | `__proto__` → prototype chain     |
636| `??` vs `\|\|` | `??` only checks null/undefined   |
637 
638---
639 
640## Resources
641 
642- [33 JS Concepts](https://github.com/leonardomso/33-js-concepts)
643- [JavaScript.info](https://javascript.info/)
644- [MDN JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
645- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)
646