JavaScript

let name = 'Tammy'
let x = null
const found = false
 
// var is function-scoped (avoid)
var a
console.log(a) // undefined

let amount = 6
let price = 4.99
 
parseInt('42')       // 42
parseFloat('4.99')   // 4.99
Number('7')          // 7
Number.isNaN(NaN)    // true
(4.123).toFixed(2)   // '4.12'

let single = 'hello'
let double = "hello"
let template = `hello ${name}`
 
single.length        // 5
single.toUpperCase() // 'HELLO'
single.includes('ell') // true
single.slice(1, 3)   // 'el'
single.split('l')    // ['he', '', 'o']

5 + 5    // 10  Addition
10 - 5   // 5   Subtraction
5 * 10   // 50  Multiplication
10 / 5   // 2   Division
10 % 3   // 1   Remainder
2 ** 3   // 8   Exponent

5 === 5     // true  (strict equal)
5 !== '5'   // true  (strict not equal)
5 == '5'    // true  (loose — avoid)
5 > 3       // true
5 >= 5      // true
5 < 10      // true

true && false  // false (AND)
true || false  // true  (OR)
!true          // false (NOT)
 
value ?? 'default'  // nullish coalescing
value || 'default'  // falsy fallback

typeof 'hello'     // 'string'
typeof 42          // 'number'
typeof true        // 'boolean'
typeof undefined   // 'undefined'
typeof null        // 'object' (JS bug)
typeof {}          // 'object'
Array.isArray([])  // true

if (score >= 90) {
  grade = 'A'
} else if (score >= 80) {
  grade = 'B'
} else {
  grade = 'C'
}

const age = 20
 
// condition ? ifTrue : ifFalse
const label = age >= 18 ? 'adult' : 'minor'

switch (status) {
  case 'loading':
    showSpinner()
    break
  case 'error':
    showError()
    break
  default:
    showEmpty()
}

for (let i = 0; i < 5; i++) {}
 
// iterate values (arrays, strings)
for (const item of [1, 2, 3]) {}
 
// iterate keys (objects)
for (const key in { a: 1, b: 2 }) {}

// declaration — hoisted
function add(a, b) {
  return a + b
}
 
// arrow — not hoisted
const double = (n) => n * 2
 
// default params
function greet(name = 'stranger') {
  return `Hello ${name}`
}

console.log('Hello world!')
console.warn('heads up')
console.error(new Error('Oops!'))
console.table([{ a: 1 }, { a: 2 }])
console.time('timer')
console.timeEnd('timer')

// object
const { name, age } = { name: 'Tammy', age: 28 }
 
// rename
const { name: n } = { name: 'Tammy' }
 
// array
const [first, second] = [10, 20]
 
// skip elements
const [, , third] = [1, 2, 3] // 3

// spread — expand into elements
const a = [1, 2]
const b = [...a, 3, 4] // [1, 2, 3, 4]
 
// spread object
const base = { x: 1 }
const full = { ...base, y: 2 } // { x: 1, y: 2 }
 
// rest — collect remaining
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0)
}

const user = { profile: { name: 'Tammy' } }
 
user.profile?.name    // 'Tammy'
user.address?.street  // undefined (no error)
 
// with methods and brackets
arr?.map(fn)
obj?.['key']

const nums = [1, 2, 3, 4, 5]
 
nums.map(n => n * 2)      // [2, 4, 6, 8, 10]
nums.filter(n => n > 3)   // [4, 5]
nums.find(n => n > 3)     // 4
nums.some(n => n > 4)     // true
nums.every(n => n > 0)    // true
nums.reduce((sum, n) => sum + n, 0) // 15

const obj = { a: 1, b: 2, c: 3 }
 
Object.keys(obj)    // ['a', 'b', 'c']
Object.values(obj)  // [1, 2, 3]
Object.entries(obj) // [['a',1], ['b',2], ['c',3]]
Object.assign({}, obj, { d: 4 })
Object.fromEntries([['x', 1]]) // { x: 1 }

try {
  JSON.parse('bad json')
} catch (err) {
  console.error(err.message)
} finally {
  // always runs — cleanup here
}

x ??= 5  // x = x ?? 5 (set if nullish)
x ||= 5  // x = x || 5 (set if falsy)
x &&= 5  // x = x && 5 (set if truthy)
 
// useful for defaults
options.timeout ??= 3000
user.name ||= 'Anonymous'

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 17 },
  { name: 'Carol', age: 25 },
]
 
const names = users
  .filter(u => u.age >= 18)
  .map(u => u.name)
  .sort()
// ['Alice', 'Carol']

const raw = { a: 1, b: 2, c: 3 }
 
// filter entries then rebuild
const filtered = Object.fromEntries(
  Object.entries(raw).filter(([k, v]) => v > 1)
)
// { b: 2, c: 3 }
 
// map values
const doubled = Object.fromEntries(
  Object.entries(raw).map(([k, v]) => [k, v * 2])
)
// { a: 2, b: 4, c: 6 }

const field = 'email'
const value = 'a@b.com'
 
// computed property name
const obj = { [field]: value }
// { email: 'a@b.com' }
 
// dynamic access
obj[field] // 'a@b.com'

function highlight(strings, ...values) {
  return strings.reduce((out, str, i) =>
    out + str + (values[i] ? `<b>${values[i]}</b>` : ''), ''
  )
}
 
const name = 'Alice'
highlight`Hello ${name}!`
// 'Hello <b>Alice</b>!'

// group by key
const grouped = items.reduce((acc, item) => {
  const key = item.category
  acc[key] ??= []
  acc[key].push(item)
  return acc
}, {})
 
// or with Object.groupBy (ES2024)
Object.groupBy(items, i => i.category)