Back to Home
    JavaScriptJavaScript ES2024Beginner

    JavaScript

    Modern JavaScript — ES6+, arrays, objects, promises, destructuring, and common patterns.

    10 min read
    javascriptes6frontendbackend

    Variables & Types

    2 topics

    let, const, var

    javascript
    // Prefer const, then let — never var
    const PI = 3.14159;
    let count = 0;
    
    // Primitives
    const str = 'hello';
    const num = 42;
    const bool = true;
    const nothing = null;
    const undef = undefined;
    const sym = Symbol('id');
    const big = 9007199254740991n; // BigInt
    
    // typeof
    typeof 'hello'  // 'string'
    typeof 42       // 'number'
    typeof null     // 'object' (known quirk!)

    💡 Use const by default, let only when reassignment is needed

    ⚠️ typeof null === 'object' is a historical bug in JS

    Destructuring

    javascript
    // Array destructuring
    const [a, b, ...rest] = [1, 2, 3, 4, 5];
    
    // Object destructuring
    const { name, age, city = 'Unknown' } = user;
    
    // Rename while destructuring
    const { name: userName } = user;
    
    // Nested
    const { address: { street } } = user;
    
    // In function params
    function greet({ name, age }) {
      return `${name} is ${age}`;
    }

    💡 Default values in destructuring prevent undefined

    ⚡ Destructuring in function params makes APIs self-documenting

    Array Methods

    1 topic

    Functional Array Methods

    javascript
    const nums = [1, 2, 3, 4, 5];
    
    // map: transform
    nums.map(x => x * 2);           // [2,4,6,8,10]
    
    // filter: select
    nums.filter(x => x % 2 === 0);  // [2,4]
    
    // reduce: accumulate
    nums.reduce((acc, x) => acc + x, 0);  // 15
    
    // find / findIndex
    nums.find(x => x > 3);          // 4
    nums.findIndex(x => x > 3);     // 3
    
    // some / every
    nums.some(x => x > 4);          // true
    nums.every(x => x > 0);         // true
    
    // flat / flatMap
    [[1,2],[3,4]].flat();            // [1,2,3,4]
    nums.flatMap(x => [x, x*2]);

    💡 Chain map/filter/reduce for clean transformations

    ⚡ flatMap is more efficient than flat()+map()

    Async / Promises

    1 topic

    async/await

    javascript
    // async/await (preferred)
    async function fetchUser(id) {
      try {
        const res = await fetch(`/api/users/${id}`);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return await res.json();
      } catch (err) {
        console.error('Failed:', err);
        throw err;
      }
    }
    
    // Parallel execution
    const [user, posts] = await Promise.all([
      fetchUser(1),
      fetchPosts(1),
    ]);
    
    // Promise.allSettled — never throws
    const results = await Promise.allSettled([p1, p2]);
    results.forEach(r => {
      if (r.status === 'fulfilled') use(r.value);
    });

    ⚡ Use Promise.all for parallel independent requests

    💡 Promise.allSettled is better when you want all results even if some fail

    Objects & Spread

    1 topic

    Object Patterns

    javascript
    // Shorthand properties
    const name = 'Alice';
    const user = { name, age: 30 };  // { name: 'Alice', age: 30 }
    
    // Spread — shallow clone / merge
    const updated = { ...user, age: 31 };
    const merged = { ...defaults, ...overrides };
    
    // Optional chaining
    user?.address?.street  // undefined instead of TypeError
    arr?.[0]?.name
    fn?.()  // Call if function exists
    
    // Nullish coalescing
    const port = config.port ?? 3000;  // Use 3000 only if null/undefined
    
    // Object.entries / fromEntries
    Object.entries(obj).map(([k, v]) => [k, v * 2]);
    Object.fromEntries(pairs);

    💡 Optional chaining (?.) eliminates most undefined TypeError crashes

    ⚡ ?? is stricter than || — it only catches null/undefined, not 0 or ''

    Related Articles

    Background reading and deeper explanations for this sheet.

    FastAPI Interview Questions: Practical Cheat Sheet for Developers

    Preparing for FastAPI interviews can feel overwhelming if you only memorize definitions. This practical cheat sheet helps you answer common FastAPI interview questions with confidence using real-world examples, production-ready patterns, and beginner-friendly explanations with depth.

    keyword overlap

    Event-Driven Agents with Kafka Streams: A Practical Guide for Building Real-Time AI Workflows

    Event-driven agents let you move from slow, request/response automation to responsive systems that react in milliseconds to real-world signals. In this hands-on guide, you’ll learn how to design, build, and operate agentic workflows using Apache Kafka and Kafka Streams, with practical patterns, code snippets, and production-ready advice.

    keyword overlap

    Python Stack vs Heap Memory: A Simple, Practical Guide for Developers

    Confused about where Python stores function calls, variables, and real objects? This guide breaks down stack vs heap memory in plain English, with clear examples showing local references on the stack and actual objects on the heap. You’ll learn how this impacts performance, debugging, and writing cleaner Python code.

    keyword overlap

    System Design for 100 Million Requests/Day: Scalable Patterns Made Simple

    Designing for 100 million requests a day sounds intimidating, but it becomes manageable when you break traffic into layers and apply proven patterns. In this guide, you’ll learn the architecture, capacity math, and practical system design patterns—like caching, queue-based load leveling, and CQRS—with easy examples you can reuse.

    keyword overlap