🧠 JavaScript Mastery

33+ essential JavaScript concepts every developer should know, inspired by 33-js-concepts.

When to Use This Skill

Use this skill when:

• Explaining JavaScript concepts

• Debugging tricky JS behavior

• Teaching JavaScript fundamentals

• Reviewing code for JS best practices

• Understanding language quirks

1. Fundamentals

1.1 Primitive Types

JavaScript has 7 primitive types:

// String const str = "hello";

// Number (integers and floats) const num = 42; const float = 3.14;

// BigInt (for large integers) const big = 9007199254740991n;

// Boolean const bool = true;

// Undefined let undef; // undefined

// Null const empty = null;

// Symbol (unique identifiers) const sym = Symbol("description");

Key points:

• Primitives are immutable

• Passed by value

• typeof null === "object" is a historical bug

1.2 Type Coercion

JavaScript implicitly converts types:

// String coercion "5" + 3; // "53" (number → string) "5" - 3; // 2 (string → number)

// Boolean coercion Boolean(""); // false Boolean("hello"); // true Boolean(0); // false Boolean([]); // true (!)

// Equality coercion "5" == 5; // true (coerces) "5" === 5; // false (strict)

Falsy values (8 total): false , 0 , -0 , 0n , "" , null , undefined , NaN

1.3 Equality Operators

// == (loose equality) - coerces types null == undefined; // true "1" == 1; // true

// === (strict equality) - no coercion null === undefined; // false "1" === 1; // false

// Object.is() - handles edge cases Object.is(NaN, NaN); // true (NaN === NaN is false!) Object.is(-0, 0); // false (0 === -0 is true!)

Rule: Always use === unless you have a specific reason not to.

2. Scope & Closures

2.1 Scope Types

// Global scope var globalVar = "global";

function outer() { // Function scope var functionVar = "function";

if (true) { // Block scope (let/const only) let blockVar = "block"; const alsoBlock = "block"; var notBlock = "function"; // var ignores blocks! } }

2.2 Closures

A closure is a function that remembers its lexical scope:

function createCounter() { let count = 0; // "closed over" variable

return { increment() { return ++count; }, decrement() { return --count; }, getCount() { return count; }, }; }

const counter = createCounter(); counter.increment(); // 1 counter.increment(); // 2 counter.getCount(); // 2

Common use cases:

• Data privacy (module pattern)

• Function factories

• Partial application

• Memoization

2.3 var vs let vs const

// var - function scoped, hoisted, can redeclare var x = 1; var x = 2; // OK

// let - block scoped, hoisted (TDZ), no redeclare let y = 1; // let y = 2; // Error!

// const - like let, but can't reassign const z = 1; // z = 2; // Error!

// BUT: const objects are mutable const obj = { a: 1 }; obj.a = 2; // OK obj.b = 3; // OK

3. Functions & Execution

3.1 Call Stack

function first() { console.log("first start"); second(); console.log("first end"); }

function second() { console.log("second"); }

first(); // Output: // "first start" // "second" // "first end"

Stack overflow example:

function infinite() { infinite(); // No base case! } infinite(); // RangeError: Maximum call stack size exceeded

3.2 Hoisting

// Variable hoisting console.log(a); // undefined (hoisted, not initialized) var a = 5;

console.log(b); // ReferenceError (TDZ) let b = 5;

// Function hoisting sayHi(); // Works! function sayHi() { console.log("Hi!"); }

// Function expressions don't hoist sayBye(); // TypeError var sayBye = function () { console.log("Bye!"); };

3.3 this Keyword

// Global context console.log(this); // window (browser) or global (Node)

// Object method const obj = { name: "Alice", greet() { console.log(this.name); // "Alice" }, };

// Arrow functions (lexical this) const obj2 = { name: "Bob", greet: () => { console.log(this.name); // undefined (inherits outer this) }, };

// Explicit binding function greet() { console.log(this.name); } greet.call({ name: "Charlie" }); // "Charlie" greet.apply({ name: "Diana" }); // "Diana" const bound = greet.bind({ name: "Eve" }); bound(); // "Eve"

4. Event Loop & Async

4.1 Event Loop

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

// Output: 1, 4, 3, 2 // Why? Microtasks (Promises) run before macrotasks (setTimeout)

Execution order:

• Synchronous code (call stack)

• Microtasks (Promise callbacks, queueMicrotask)

• Macrotasks (setTimeout, setInterval, I/O)

4.2 Callbacks

// Callback pattern function fetchData(callback) { setTimeout(() => { callback(null, { data: "result" }); }, 1000); }

// Error-first convention fetchData((error, result) => { if (error) { console.error(error); return; } console.log(result); });

// Callback hell (avoid this!) getData((data) => { processData(data, (processed) => { saveData(processed, (saved) => { notify(saved, () => { // 😱 Pyramid of doom }); }); }); });

4.3 Promises

// Creating a Promise const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve("Success!"); // or: reject(new Error("Failed!")); }, 1000); });

// Consuming Promises promise .then((result) => console.log(result)) .catch((error) => console.error(error)) .finally(() => console.log("Done"));

// Promise combinators Promise.all([p1, p2, p3]); // All must succeed Promise.allSettled([p1, p2]); // Wait for all, get status Promise.race([p1, p2]); // First to settle Promise.any([p1, p2]); // First to succeed

4.4 async/await

async function fetchUserData(userId) { try { const response = await fetch(/api/users/${userId}); if (!response.ok) throw new Error("Failed to fetch"); const user = await response.json(); return user; } catch (error) { console.error("Error:", error); throw error; // Re-throw for caller to handle } }

// Parallel execution async function fetchAll() { const [users, posts] = await Promise.all([ fetch("/api/users"), fetch("/api/posts"), ]); return { users, posts }; }

5. Functional Programming

5.1 Higher-Order Functions

Functions that take or return functions:

// Takes a function const numbers = [1, 2, 3]; const doubled = numbers.map((n) => n * 2); // [2, 4, 6]

// Returns a function function multiply(a) { return function (b) { return a * b; }; } const double = multiply(2); double(5); // 10

5.2 Pure Functions

// Pure: same input → same output, no side effects function add(a, b) { return a + b; }

// Impure: modifies external state let total = 0; function addToTotal(value) { total += value; // Side effect! return total; }

// Impure: depends on external state function getDiscount(price) { return price * globalDiscountRate; // External dependency }

5.3 map, filter, reduce

const users = [ { name: "Alice", age: 25 }, { name: "Bob", age: 30 }, { name: "Charlie", age: 35 }, ];

// map: transform each element const names = users.map((u) => u.name); // ["Alice", "Bob", "Charlie"]

// filter: keep elements matching condition const adults = users.filter((u) => u.age >= 30); // [{ name: "Bob", ... }, { name: "Charlie", ... }]

// reduce: accumulate into single value const totalAge = users.reduce((sum, u) => sum + u.age, 0); // 90

// Chaining const result = users .filter((u) => u.age >= 30) .map((u) => u.name) .join(", "); // "Bob, Charlie"

5.4 Currying & Composition

// Currying: transform f(a, b, c) into f(a)(b)(c) const curry = (fn) => { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } return (...moreArgs) => curried(...args, ...moreArgs); }; };

const add = curry((a, b, c) => a + b + c); add(1)(2)(3); // 6 add(1, 2)(3); // 6 add(1)(2, 3); // 6

// Composition: combine functions const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);

const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);

const addOne = (x) => x + 1; const double = (x) => x * 2;

const addThenDouble = compose(double, addOne); addThenDouble(5); // 12 = (5 + 1) * 2

const doubleThenAdd = pipe(double, addOne); doubleThenAdd(5); // 11 = (5 * 2) + 1

6. Objects & Prototypes

6.1 Prototypal Inheritance

// Prototype chain const animal = { speak() { console.log("Some sound"); }, };

const dog = Object.create(animal); dog.bark = function () { console.log("Woof!"); };

dog.speak(); // "Some sound" (inherited) dog.bark(); // "Woof!" (own method)

// ES6 Classes (syntactic sugar) class Animal { speak() { console.log("Some sound"); } }

class Dog extends Animal { bark() { console.log("Woof!"); } }

6.2 Object Methods

const obj = { a: 1, b: 2 };

// Keys, values, entries Object.keys(obj); // ["a", "b"] Object.values(obj); // [1, 2] Object.entries(obj); // [["a", 1], ["b", 2]]

// Shallow copy const copy = { ...obj }; const copy2 = Object.assign({}, obj);

// Freeze (immutable) const frozen = Object.freeze({ x: 1 }); frozen.x = 2; // Silently fails (or throws in strict mode)

// Seal (no add/delete, can modify) const sealed = Object.seal({ x: 1 }); sealed.x = 2; // OK sealed.y = 3; // Fails delete sealed.x; // Fails

7. Modern JavaScript (ES6+)

7.1 Destructuring

// Array destructuring const [first, second, ...rest] = [1, 2, 3, 4, 5]; // first = 1, second = 2, rest = [3, 4, 5]

// Object destructuring const { name, age, city = "Unknown" } = { name: "Alice", age: 25 }; // name = "Alice", age = 25, city = "Unknown"

// Renaming const { name: userName } = { name: "Bob" }; // userName = "Bob"

// Nested const { address: { street }, } = { address: { street: "123 Main" } };

7.2 Spread & Rest

// Spread: expand iterable const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const obj1 = { a: 1 }; const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

// Rest: collect remaining function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); } sum(1, 2, 3, 4); // 10

7.3 Modules

// Named exports export const PI = 3.14159; export function square(x) { return x * x; }

// Default export export default class Calculator {}

// Importing import Calculator, { PI, square } from "./math.js"; import * as math from "./math.js";

// Dynamic import const module = await import("./dynamic.js");

7.4 Optional Chaining & Nullish Coalescing

// Optional chaining (?.) const user = { address: { city: "NYC" } }; const city = user?.address?.city; // "NYC" const zip = user?.address?.zip; // undefined (no error) const fn = user?.getName?.(); // undefined if no method

// Nullish coalescing (??) const value = null ?? "default"; // "default" const zero = 0 ?? "default"; // 0 (not nullish!) const empty = "" ?? "default"; // "" (not nullish!)

// Compare with || const value2 = 0 || "default"; // "default" (0 is falsy)

Quick Reference Card

Concept Key Point

== vs ===

Always use ===

var vs let

Prefer let /const

Closures Function + lexical scope

this

Depends on how function is called

Event loop Microtasks before macrotasks

Pure functions Same input → same output

Prototypes proto → prototype chain

?? vs ||

?? only checks null/undefined

Resources

• 33 JS Concepts

• JavaScript.info

• MDN JavaScript Guide

• You Don't Know JS