javascript 30 lines · 6 steps

Recursively freezing a nested object

A small recursive helper walks every property and freezes each object so a whole config tree becomes deeply immutable.

Explained by highlit

Intermediate recursion immutability object-freezing reflection

1function deepFreeze(obj) {
const propNames = Reflect.ownKeys(obj);
3 
for (const name of propNames) {
  const value = obj[name];
  if ((value && typeof value === 'object') || typeof value === 'function') {
    deepFreeze(value);
  }
}
10 
return Object.freeze(obj);
12}
13 
14const config = deepFreeze({
env: 'production',
server: {
  host: '0.0.0.0',
  port: 8080,
  tls: {
    enabled: true,
    ciphers: ['TLS_AES_256_GCM_SHA384'],
  },
},
featureFlags: {
  betaSearch: false,
  darkMode: true,
},
28});
29 
30export default config;

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Object.freeze is shallow, so nested objects need recursion to become truly immutable.
2Reflect.ownKeys captures string and symbol keys, including non-enumerable ones, unlike a plain for...in.
3Freezing children before the parent guarantees the entire tree is locked by the time the top-level call returns.

Related explainers

python

from copy import deepcopy
from typing import Any, Mapping

How a recursive deep merge works in Python

recursion immutability dictionaries

Intermediate 6 steps

javascript

import { useEffect, useRef } from "react";
import { useBlocker } from "react-router-dom";
 
export function useUnsavedChangesPrompt(isDirty, message = "You have unsaved changes. Leave anyway?") {

Guarding unsaved changes with a React hook

custom-hooks navigation-guard event-listeners

Intermediate 7 steps

ruby

class QueryProxy
  ALLOWED = %i[where limit offset order includes distinct].freeze
 
  def initialize(relation, operations = [])

Building a lazy query proxy in Ruby

metaprogramming method_missing lazy-evaluation

Advanced 7 steps

javascript

class InfiniteScroll {
  constructor(sentinel, { loadMore, root = null, rootMargin = '200px' } = {}) {
    this.sentinel = sentinel;
    this.loadMore = loadMore;

Infinite scroll with IntersectionObserver

intersectionobserver pagination async

Intermediate 10 steps

php

final class Route
{
    private string $regex;
    private array $paramNames = [];

Compiling route patterns into regex in PHP

routing regex parsing

Intermediate 8 steps

javascript

import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
const TextField = forwardRef(function TextField(
  { label, error, onChange, ...props },