Modern JavaScript Features

1
// Before — tedious null checks
2
const city = user && user.address && user.address.city;
3

4
// After — elegant
5
const city = user?.address?.city;
6

7
// Also works with dynamic properties
8
const value = obj?.[key];
9

10
// And method calls
11
const result = obj.method?.(); // calls only if method exists

1
const user = null;
2
console.log(user?.name);        // undefined (not TypeError)
3
console.log(user?.address?.city); // undefined (short-circuits)
4

5
// Array access
6
const arr = null;
7
console.log(arr?.[0]); // undefined

1
const value = null ?? "default";
2
console.log(value); // "default"
3

4
const zero = 0 ?? 42;
5
console.log(zero); // 0 (zero is NOT nullish)
6

7
const empty = "" ?? "fallback";
8
console.log(empty); // "" (empty string is NOT nullish)
9

10
const bool = false ?? true;
11
console.log(bool); // false (false is NOT nullish)

1
const count = 0;
2
console.log(count || 10);  // 10 — bug! 0 is a valid count
3
console.log(count ?? 10);  // 0 — correct

1
// ??= — assign only if null/undefined
2
let user = null;
3
user ??= { name: "Anonymous" };
4
console.log(user.name); // "Anonymous"
5

6
// &&= — assign only if truthy
7
let isValid = true;
8
isValid &&= false;
9
console.log(isValid); // false
10

11
// ||= — assign only if falsy
12
let cache = null;
13
cache ||= fetchData();

1
function getConfig(key) {
2
  config.cache ??= new Map(); // lazy init cache only once
3
  return config.cache.get(key);
4
}
5

6
// Property update pattern
7
user.name &&= user.name.trim(); // only trim if name exists

1
const map = new Map();
2

3
// Setting values
4
map.set("name", "Alice");
5
map.set(42, "The answer");
6
map.set({ id: 1 }, "Object key");
7

8
// Getting values
9
console.log(map.get("name")); // "Alice"
10
console.log(map.get(42));     // "The answer"
11

12
// Size and existence
13
console.log(map.size);     // 3
14
console.log(map.has(42));  // true
15

16
// Deleting and clearing
17
map.delete(42);
18
map.clear();

1
const users = new Map([
2
  ["alice", { age: 30 }],
3
  ["bob", { age: 25 }],
4
  ["charlie", { age: 35 }],
5
]);
6

7
for (const [key, value] of users) {
8
  console.log(key, value);
9
}
10

11
// Methods that return iterators
12
users.keys();   // "alice", "bob", "charlie"
13
users.values(); // { age: 30 }, ...
14
users.entries(); // ["alice", { age: 30 }], ...
15

16
// Convert to/from arrays
17
const arr = Array.from(users);
18
const restored = new Map(arr);

1
const cache = new Map();
2

3
function processObject(obj) {
4
  if (cache.has(obj)) {
5
    return cache.get(obj); // object identity lookup
6
  }
7
  const result = expensiveOperation(obj);
8
  cache.set(obj, result);
9
  return result;
10
}

1
const set = new Set([1, 2, 3, 3, 4, 4, 5]);
2
console.log(set); // Set(5) { 1, 2, 3, 4, 5 }
3

4
set.add(6);
5
set.add(1);        // ignored — already exists
6
console.log(set.size); // 6
7
console.log(set.has(3)); // true
8
set.delete(3);
9

10
// Iteration
11
for (const value of set) {
12
  console.log(value);
13
}

1
const a = new Set([1, 2, 3, 4]);
2
const b = new Set([3, 4, 5, 6]);
3

4
// Union
5
const union = new Set([...a, ...b]); // {1, 2, 3, 4, 5, 6}
6

7
// Intersection
8
const intersection = new Set([...a].filter(x => b.has(x))); // {3, 4}
9

10
// Difference
11
const difference = new Set([...a].filter(x => !b.has(x))); // {1, 2}
12

13
// Remove duplicates from array
14
const unique = [...new Set([1, 2, 2, 3, 3, 4])]; // [1, 2, 3, 4]

1
const id1 = Symbol("id");
2
const id2 = Symbol("id");
3

4
console.log(id1 === id2); // false — always unique
5
console.log(id1.toString()); // "Symbol(id)"

1
const _password = Symbol("password");
2

3
class User {
4
  constructor(name, password) {
5
    this.name = name;
6
    this[_password] = password; // not truly private but hidden from iteration
7
  }
8

9
  checkPassword(attempt) {
10
    return this[_password] === attempt;
11
  }
12
}
13

14
const user = new User("Alice", "secret123");
15
console.log(user.password);      // undefined
16
console.log(Object.keys(user));  // ["name"] — Symbol keys excluded
17
console.log(Object.getOwnPropertySymbols(user)); // [Symbol(password)]

1
const iterable = {
2
  data: [10, 20, 30],
3
  [Symbol.iterator]() {
4
    let index = 0;
5
    return {
6
      next: () => ({
7
        value: this.data[index++],
8
        done: index > this.data.length,
9
      }),
10
    };
11
  },
12
};
13

14
for (const item of iterable) {
15
  console.log(item); // 10, 20, 30
16
}

1
class Range {
2
  constructor(start, end) {
3
    this.start = start;
4
    this.end = end;
5
  }
6

7
  [Symbol.iterator]() {
8
    let current = this.start;
9
    const end = this.end;
10

11
    return {
12
      next() {
13
        if (current <= end) {
14
          return { value: current++, done: false };
15
        }
16
        return { value: undefined, done: true };
17
      },
18
    };
19
  }
20
}
21

22
const range = new Range(1, 5);
23
console.log([...range]); // [1, 2, 3, 4, 5]
24

25
for (const n of range) {
26
  console.log(n); // 1, 2, 3, 4, 5
27
}

1
function* countUpTo(max) {
2
  for (let i = 1; i <= max; i++) {
3
    yield i; // pause and return i
4
  }
5
}
6

7
const counter = countUpTo(3);
8
console.log(counter.next()); // { value: 1, done: false }
9
console.log(counter.next()); // { value: 2, done: false }
10
console.log(counter.next()); // { value: 3, done: false }
11
console.log(counter.next()); // { value: undefined, done: true }
12

13
// Or consume directly with for...of
14
for (const n of countUpTo(5)) {
15
  console.log(n); // 1, 2, 3, 4, 5
16
}

1
function* fibonacci() {
2
  let a = 0, b = 1;
3
  while (true) {
4
    yield a;
5
    [a, b] = [b, a + b];
6
  }
7
}
8

9
const fib = fibonacci();
10
console.log(fib.next().value); // 0
11
console.log(fib.next().value); // 1
12
console.log(fib.next().value); // 1
13
console.log(fib.next().value); // 2
14
console.log(fib.next().value); // 3
15
// ... continues indefinitely, one at a time

1
const original = {
2
  name: "Alice",
3
  hobbies: ["reading", "coding"],
4
  settings: { theme: "dark" },
5
  date: new Date(),
6
};
7

8
const clone = structuredClone(original);
9

10
clone.name = "Bob";
11
clone.hobbies.push("gaming");
12

13
console.log(original.hobbies); // ["reading", "coding"] — unaffected
14
console.log(clone.hobbies);    // ["reading", "coding", "gaming"]

1
// JSON approach fails with:
2
const withDate = { date: new Date() };
3
JSON.parse(JSON.stringify(withDate)); // date becomes string, not Date
4

5
const withCircular = { self: null };
6
withCircular.self = withCircular;
7
JSON.parse(JSON.stringify(withCircular)); // throws!
8

9
// structuredClone handles both:
10
structuredClone(withDate);     // ✅ Date stays Date
11
structuredClone(withCircular); // ✅ Circular references work

1
const billion = 1_000_000_000; // more readable
2
const bytes = 0xFF_EC_DE_5E;
3
const shares = 1_000.50;

1
const str = "hello-world-foo-bar";
2
console.log(str.replaceAll("-", " ")); // "hello world foo bar"
3

4
// Without replaceAll: str.replace(/-/g, " ")

1
const result = await Promise.any([
2
  fetch("/primary").then((r) => r.json()),
3
  fetch("/fallback").then((r) => r.json()),
4
]);
5
console.log(result); // first successful response

1
const arr = [10, 20, 30, 40];
2
console.log(arr.at(-1)); // 40 — last element
3
console.log(arr.at(-2)); // 30 — second to last
4

5
// Strings too
6
"hello".at(-1); // "o"

1
const obj = { name: "Alice" };
2
console.log(Object.hasOwn(obj, "name")); // true
3
console.log(Object.hasOwn(obj, "toString")); // false
4
// Safer than obj.hasOwnProperty() which can be overridden