javascript 37 lines · 7 steps

Building a Stack with private fields

A clean LIFO stack in JavaScript using a private field, chainable pushes, and a custom iterator.

Explained by highlit

Intermediate data-structures encapsulation iterators generators class-fields

1class Stack {
#items = [];
3 
push(value) {
  this.#items.push(value);
  return this;
}
8 
pop() {
  if (this.isEmpty()) {
    throw new Error("Stack underflow");
  }
  return this.#items.pop();
}
15 
peek() {
  return this.#items[this.#items.length - 1];
}
19 
isEmpty() {
  return this.#items.length === 0;
}
23 
get size() {
  return this.#items.length;
}
27 
clear() {
  this.#items.length = 0;
}
31 
*[Symbol.iterator]() {
  for (let i = this.#items.length - 1; i >= 0; i--) {
    yield this.#items[i];
  }
}
37}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Private fields (#) enforce true encapsulation so internal state can't be touched from outside.
2Returning this from mutating methods enables fluent, chainable call syntax.
3Implementing Symbol.iterator makes a custom class work with for...of and spread.

Related explainers

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

rust

use std::f64::consts::PI;
 
#[derive(Debug, Clone, Copy)]
pub struct LatLng {

Building geographic bounding boxes in Rust

geospatial value-types option

Intermediate 7 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

python

import random
from typing import Iterator, List

How reservoir sampling picks k items

reservoir-sampling streaming randomness

Intermediate 5 steps

rust

use chrono::{Duration, NaiveDate};
 
#[derive(Debug)]
pub struct DateRange {

Parsing and iterating date ranges in Rust

error-handling iterators parsing

Intermediate 7 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);