JavaScript essentials: 50 core concepts

All 50 cards

1. 1
   == vs ===
   === compares without type coercion; == converts types first

   js

   0 == ''   // true
   0 === ''  // false

2. 2
   let vs const
   Both are block-scoped; a const binding can’t be reassigned

   Objects declared with const can still be mutated.
3. 3
   How is var scoped?
   To the enclosing function, and it is hoisted (initialized as undefined)
4. 4
   Temporal dead zone
   A let/const variable exists from the start of its block but throws a ReferenceError if used before its declaration
5. 5
   What is a closure?
   A function that keeps access to variables from the scope where it was created

   js

   function counter() {
     let n = 0
     return () => ++n
   }
   const next = counter()
   next() // 1
   next() // 2

6. 6
   What is this inside an arrow function?
   Arrows have no own this; they use this from the enclosing scope
7. 7
   typeof null
   'object', a long-standing quirk of the language
8. 8
   How do you check that a value is an array?
   Array.isArray(value)

   typeof [] is 'object'.
9. 9
   The falsy values
   false, 0, -0, 0n, '', null, undefined, NaN
10. 10
    NaN === NaN
    false; use Number.isNaN(x)
11. 11
    What does a ?? b return?
    b only when a is null or undefined, otherwise a
12. 12
    || vs ??
    || falls back on any falsy value (like 0 or ''); ?? only on null/undefined

    js

    0 || 10  // 10
    0 ?? 10  // 0

13. 13
    Optional chaining
    a?.b returns undefined instead of throwing when a is null or undefined

    js

    user?.address?.city
    callback?.()

14. 14
    Object destructuring with a default
    js

    const { name, age = 30 } = user

15. 15
    Swap two variables
    js

    [a, b] = [b, a]

16. 16
    Concatenate arrays with spread
    js

    const all = [...a, ...b]

17. 17
    Shallow-copy an object and override a key
    js

    const next = { ...state, done: true }

18. 18
    Rest parameters
    Collect remaining arguments into an array

    js

    function sum(...nums) {
      return nums.reduce((a, b) => a + b, 0)
    }

19. 19
    Template literal
    js

    const msg = `Hi ${name}, you have ${count} cards`

20. 20
    What does map return?
    A new array with each element transformed by the callback
21. 21
    What does filter return?
    A new array with the elements that pass the test
22. 22
    Sum an array with reduce
    js

    [1, 2, 3].reduce((sum, x) => sum + x, 0) // 6

23. 23
    find vs filter
    find returns the first match (or undefined); filter returns every match in a new array
24. 24
    some vs every
    some is true if any element passes; every is true only if all pass
25. 25
    What does forEach return?
    Always undefined. You can’t break out of it; use for...of instead
26. 26
    for...of vs for...in
    for...of iterates values of an iterable; for...in iterates enumerable property keys
27. 27
    What is a Promise?
    An object for a value that will be available later: pending, then fulfilled or rejected
28. 28
    What does an async function return?
    Always a Promise; await inside it pauses until a promise settles
29. 29
    Promise.all
    Resolves with all results when every promise resolves; rejects on the first rejection
30. 30
    Promise.allSettled
    Waits for every promise and never rejects; gives each one’s status and value or reason
31. 31
    Promise.race vs Promise.any
    race settles like the first promise to settle; any resolves with the first to fulfil
32. 32
    In what order does this log?

    js

    setTimeout(() => console.log('timeout'), 0)
    Promise.resolve().then(() => console.log('micro'))
    console.log('sync')

    sync, micro, timeout: promise callbacks (microtasks) run before the next timer (macrotask)
33. 33
    Can you call a function declaration before it appears?
    Yes. Function declarations are hoisted with their body
34. 34
    this in a plain function call in strict mode
    undefined

    In sloppy mode it is the global object.
35. 35
    call, apply, bind
    call(thisArg, ...args), apply(thisArg, argsArray); bind returns a new function with this fixed
36. 36
    What is the prototype chain?
    Objects inherit properties from their prototype, and its prototype, up to null
37. 37
    Class syntax
    Sugar over prototypes

    js

    class Deck {
      constructor(name) { this.name = name }
      rename(n) { this.name = n }
    }

38. 38
    Private class field
    Declared with #; only accessible inside the class body

    js

    class Counter {
      #n = 0
      inc() { return ++this.#n }
    }

39. 39
    Deep-copy an object
    structuredClone(obj)

    Spread ({ ...obj }) only copies one level.
40. 40
    Convert between objects and JSON
    JSON.stringify(obj) and JSON.parse(text)
41. 41
    Map vs plain object
    A Map accepts keys of any type, keeps insertion order and has .size
42. 42
    Remove duplicates from an array
    js

    const unique = [...new Set(items)]

43. 43
    WeakMap
    A map whose keys are objects held weakly, so they can still be garbage-collected
44. 44
    Symbol
    A unique, immutable primitive, often used as a non-colliding property key
45. 45
    Named vs default export
    js

    export function load() {}     // import { load } from './x.js'
    export default function () {} // import anything from './x.js'

46. 46
    When is strict mode on automatically?
    Inside ES modules and class bodies

    Elsewhere, enable it with "use strict".
47. 47
    Debounce
    Delay a function until calls have stopped for a while

    js

    function debounce(fn, ms) {
      let timer
      return (...args) => {
        clearTimeout(timer)
        timer = setTimeout(() => fn(...args), ms)
      }
    }

48. 48
    includes vs indexOf
    includes returns a boolean and finds NaN; indexOf returns a position and can’t find NaN
49. 49
    parseInt('42px', 10)
    42; it reads digits until the first non-digit

    Number('42px') is NaN.
50. 50
    Array.from({ length: 3 }, (_, i) => i)
    [0, 1, 2]