JavaScript Essentials

var (function-scoped)

var x = 1;

let (block-scoped, reassignable)

let count = 0;
count = 1;

const (block-scoped, immutable binding)

const PI = 3.14;

Destructuring — array

const [a, b] = [1, 2];

Destructuring — object

const { name, age } = user;

Default parameter

function greet(name = "World") {
  return `Hello, ${name}!`;
}

map — transform each item

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

filter — keep matching items

const evens = [1,2,3,4].filter(n => n % 2 === 0);
// [2, 4]

reduce — fold to single value

const sum = [1,2,3].reduce((acc, n) => acc + n, 0);
// 6

find — first match

const user = users.find(u => u.id === 42);

some / every

[1,2,3].some(n => n > 2);  // true
[1,2,3].every(n => n > 0); // true

flat / flatMap

[1,[2,[3]]].flat(Infinity); // [1,2,3]
[1,2].flatMap(n => [n, n*2]); // [1,2,2,4]

Object.keys / values / entries

Object.keys(obj);
Object.values(obj);
Object.entries(obj);

Spread merge

const merged = { ...defaults, ...overrides };

Optional chaining

const city = user?.address?.city;

Nullish coalescing

const name = input ?? "Anonymous";

Object.assign

Object.assign(target, source1, source2);

Promise basics

fetch(url)
  .then(res => res.json())
  .catch(err => console.error(err));

async / await

async function getData() {
  try {
    const res = await fetch(url);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

Promise.all — parallel

const [a, b] = await Promise.all([fetchA(), fetchB()]);

Promise.allSettled

const results = await Promise.allSettled([p1, p2]);

Template literals

const msg = `Hello, ${name}! You are ${age} years old.`;

includes / startsWith / endsWith

str.includes("foo");
str.startsWith("Hello");
str.endsWith("!");

trim / split / replace

"  hi  ".trim();
"a,b".split(",");
"foo".replace("o","0");

padStart / padEnd

"5".padStart(3, "0"); // "005"
"hi".padEnd(5, "."); // "hi..."

Named export

export const PI = 3.14;
export function add(a, b) { return a + b; }

Default export

export default function App() { ... }

Import named

import { PI, add } from "./math.js";

Import default

import App from "./App.js";

Import all

import * as Math from "./math.js";