Types, Variables & Functions

Types, Variables & Functions

JavaScript is the only language that runs natively in every browser and in Node.js. React, Next.js, TypeScript — they all compile down to JavaScript. Mastering fundamentals removes the magic from every framework above them.

Variables: The Right Declarations

const name = 'Jordan'      // cannot be reassigned — use this by default
let count = 0              // reassignable — use when value changes
var old = 'never use this' // function-scoped, hoisted — legacy

Rule: default to const. Use let only when the value will change.

Data Types

typeof 'hello'        // 'string'
typeof 42             // 'number'
typeof true           // 'boolean'
typeof undefined      // 'undefined'
typeof null           // 'object' ← historic JS bug, never fixed
typeof []             // 'object'
typeof function(){}   // 'function'

Primitives are passed by value. Objects (including arrays) are passed by reference.

Functions: Three Forms

// Declaration — hoisted, callable before definition
function greet(name) {
  return `Hello, ${name}`
}

// Arrow function — concise, no own this
const greet = (name) => `Hello, ${name}`

// Expression — not hoisted
const greet = function(name) { return `Hello, ${name}` }

Default Parameters and Rest/Spread

function createUser(name, role = 'viewer') {
  return { name, role }
}

function sum(first, ...rest) {
  return rest.reduce((acc, n) => acc + n, first)
}

Math.max(...[3, 1, 4, 1, 5, 9])  // 9

Scope and Closures

const and let are block-scoped:

if (true) {
  const x = 10
}
console.log(x)  // ReferenceError

A closure remembers outer scope:

function makeCounter(start = 0) {
  let count = start
  return {
    inc: () => ++count,
    get: () => count,
  }
}
const c = makeCounter(5)
c.inc()  // 6

This is exactly how React's useState works internally.

Truthiness

Falsy: false, 0, '', null, undefined, NaN. Empty arrays and objects are truthy.

const user = null
const name = user?.name ?? 'Guest'  // optional chaining + nullish coalescing