JavaScript

CHALLENGE

class EventEmitter {
  #listeners = new Map();

  on(event, listener) {
    if (!this.#listeners.has(event)) {
      this.#listeners.set(event, []);
    }
    this.#listeners.get(event).push(listener);
    return this;
  }

  emit(event, ...args) {
    const handlers = this.#listeners.get(event) ?? [];
    handlers.forEach(fn => fn(...args));
    return this;
  }
}

const emitter = new EventEmitter();
const log = [];

emitter
  .on("data", val => log.push(`A:${val}`))
  .on("data", val => log.push(`B:${val * 2}`))
  .on("end",  ()  => log.push("done"));

emitter.emit("data", 5).emit("data", 3).emit("end");

console.log(log.join(","));

CHALLENGE

const p1 = new Promise((resolve) => {
  console.log("A");
  resolve("B");
});

const p2 = p1.then((val) => {
  console.log(val);
  return "C";
});

p2.then((val) => console.log(val));

console.log("D");

CHALLENGE

class Range {
  constructor(start, end, step = 1) {
    this.start = start;
    this.end = end;
    this.step = step;
  }

  [Symbol.iterator]() {
    let current = this.start;
    const { end, step } = this;
    return {
      next() {
        if (current <= end) {
          const value = current;
          current += step;
          return { value, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
}

const range = new Range(1, 10, 3);
const result = [...range].map(n => n ** 2);
console.log(result);

CHALLENGE

const handler = {
  get(target, prop, receiver) {
    if (prop in target) {
      const value = Reflect.get(target, prop, receiver);
      return typeof value === "number" ? value * 2 : value;
    }
    return `Property "${prop}" not found`;
  },
  set(target, prop, value) {
    if (typeof value !== "number") {
      throw new TypeError("Only numbers allowed");
    }
    Reflect.set(target, prop, value ** 2);
    return true;
  },
  has(target, prop) {
    return prop.startsWith("_") ? false : prop in target;
  },
};

const store = new Proxy({ _secret: 99, score: 5 }, handler);

store.level = 3;

console.log(store.score);
console.log(store.level);
console.log("_secret" in store);
console.log("score" in store);
console.log(store._secret);

🌟 Bun v1.3.14 Adds Image Processing, HTTP/3, HTTP/2 Fetch and More Another mammoth Bun release. Bun.Image is a new built-in image processing API which can replace Sharp in many cases. Bun’s package manager has added a global virtual store (akin to pnpm’s), Bun.serve has experimental HTTP/3 over QUIC support, and fetch gets HTTP/2 and HTTP/3 support. Plus the usual raft of Node.js compatibility improvements. Jarred Sumner

CHALLENGE

const name = "Taylor";
const age = 28;
const role = "engineer";

const user = {
  name,
  age,
  role,
  greet() {
    return `Hi, I'm ${this.name}, age ${this.age}`;
  },
  get info() {
    return `${this.role.toUpperCase()} @ ${this.age}`;
  }
};

const { name: userName, info, greet } = user;

console.log(userName);
console.log(info);
console.log(greet.call({ name: "Jordan", age: 35 }));

🌲 NodeBook: An Advanced Guide to Node.js Internals Volume I of this in-depth guide is now complete with eight chapters of advanced material covering topics like event loop internals, what V8 does, buffer allocation, streams, module resolution, async/await, and the process lifecycle. Ishtmeet Singh

CHALLENGE

class Pipeline {
  #value;
  #log = [];

  constructor(value) {
    this.#value = value;
  }

  map(fn) {
    this.#value = fn(this.#value);
    this.#log.push(`map:${this.#value}`);
    return this;
  }

  filter(fn) {
    if (Array.isArray(this.#value)) {
      this.#value = this.#value.filter(fn);
      this.#log.push(`filter:${this.#value}`);
    }
    return this;
  }

  reduce(fn, init) {
    if (Array.isArray(this.#value)) {
      this.#value = this.#value.reduce(fn, init);
      this.#log.push(`reduce:${this.#value}`);
    }
    return this;
  }

  result() {
    console.log(this.#log.join(' | '));
    return this.#value;
  }
}

new Pipeline([1, 2, 3, 4, 5, 6])
  .filter(n => n % 2 === 0)
  .map(arr => arr.map(n => n ** 2))
  .reduce((acc, n) => acc + n, 0)
  .result();

CHALLENGE

function createCounter() {
  let count = 0;

  return {
    increment() { count++; },
    decrement() { count--; },
    getCount() { return count; },
    reset: () => { count = 0; }
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
counter.increment();
counter.decrement();

const { getCount, reset } = counter;

console.log(counter.getCount());
reset();
console.log(getCount());

🤔 How can you not love a project homepage where you're a cat in a convertible driving through an endless barrage of obstacles? Crashcat is a JavaScript 3D rigid body physics library built for games, simulations, and web experiences, complete with numerous fun examples.

CHALLENGE

function processData(value) {
  let result = "start";

  try {
    result += " -> try";
    if (value === null) throw new TypeError("Null value");
    if (value < 0) throw new RangeError("Negative value");
    result += " -> success";
    return result;
  } catch (e) {
    result += ` -> catch(${e.constructor.name})`;
    return result;
  } finally {
    result += " -> finally";
    console.log(result);
  }
}

console.log(processData(null));

👀 Anime.js 4.4: The Flexible JavaScript Animation Engine At ten years old, the ‘animate anything from JavaScript’ library continues to get even better with a new scrambleText effect and auto-grid layout mode for stagger grids. The docs for Anime are truly top-tier and packed with examples. Julian Garnier