Forem: Muyiwa Johnson

Heard of Reactivity in Vanilla JavaScript?

Muyiwa Johnson — Wed, 30 Apr 2025 06:56:15 +0000

Reactivity in Vanilla JavaScript

Many developers shy away from building complex web applications with vanilla JavaScript, often citing a lack of built-in structure and features. While frameworks like React, Vue, and Angular offer powerful abstractions, it's easy to forget that the underlying principles can be implemented directly in JavaScript. One of the most crucial of these principles is reactivity: the ability for the UI to automatically update in response to data changes.

This article explores how to create a basic reactivity system using vanilla JavaScript, providing a deeper understanding of how modern UI frameworks operate under the hood.

The Challenge: Why Vanilla JavaScript Isn't Reactive by Default

Vanilla JavaScript lacks a built-in mechanism for automatically tracking data dependencies and triggering UI updates. This means that when a value changes, you must manually update the DOM to reflect that change. This approach can become cumbersome and error-prone, especially in larger applications. Consider this example:

const state = { count: 0 };
const counterEl = document.getElementById('counter');

// Problem: The UI doesn't update when state changes!
state.count++; // Nothing happens visually

// Manual update required
counterEl.textContent = state.count;

In this scenario, incrementing state.count doesn't automatically update the counterEl element. We need to explicitly set the textContent property to reflect the new value. The core issue lies in this disconnect:

state.count++; // Changes data but doesn't update UI

This lack of connection between data modifications and UI rendering is the fundamental problem that reactivity systems solve.

The Solution: Implementing Reactivity with Proxies

Fortunately, JavaScript provides a powerful tool for implementing reactivity: Proxies.

Understanding Proxies

Proxies allow you to intercept and redefine fundamental operations on an object, such as property access, assignment, and deletion. This enables you to observe and react to changes in an object's state. Proxies rely on traps, which are methods that intercept specific operations. For example, the set trap is triggered whenever a property is assigned a new value.

Consider this example:

const country = new Proxy(
  {},
  {
    set(target, property, value) {
      if (property === 'capital' && value !== 'Abuja') {
        throw new Error('Capital must be Abuja!');
      }
      target[property] = value;
      return true;
    },
  }
);

country.capital = 'Lagos'; // Error: Capital must be Abuja!

country.capital = 'Abuja'; // No error
console.log(country.capital); // Abuja

In this example, the set trap intercepts assignments to the capital property. If the assigned value is not "Abuja", an error is thrown, enforcing a constraint on the object's state.

Building a Simple Reactivity System

We can leverage Proxies to create a basic reactivity system that automatically updates the UI whenever the state changes:

function createReactiveState(initialState, renderCallback) {
  return new Proxy(initialState, {
    set(target, property, value) {
      // Update the property
      target[property] = value;

      // Call the render function whenever state changes
      renderCallback();

      return true;
    },
  });
}

// Example usage
const appState = createReactiveState({ count: 0 }, () => {
  document.getElementById('counter').textContent = appState.count;
});

document.getElementById('increment').addEventListener('click', () => {
  appState.count++;
});

In this example, the createReactiveState function takes an initial state object and a renderCallback function. It returns a Proxy that intercepts set operations. Whenever a property is assigned a new value, the set trap updates the property and then invokes the renderCallback function, allowing you to update the UI.

Using this system, we can achieve automatic UI updates with minimal code:

// Setup (one time)
const state = createReactiveState(
  { count: 0 },
  () => (document.getElementById('counter').textContent = state.count)
);

state.count++; // UI updates AUTOMATICALLY
state.count = 100; // this also works (UI updates AUTOMATICALLY)

Conclusion

This simple example demonstrates the core concept of reactivity. By leveraging Proxies, you can build systems that automatically track data dependencies and trigger UI updates, reducing boilerplate code and improving the maintainability of your applications.

While this is a basic implementation, it showcases the fundamental principles behind more complex reactivity systems used in modern UI frameworks and libraries. Understanding these principles empowers you to build more efficient and maintainable web applications, regardless of the tools you choose.

Build Your Own Event Emitter

Muyiwa Johnson — Thu, 24 Apr 2025 07:20:36 +0000

Introduction

As someone who loves building software, I'm always looking for patterns that make my code cleaner, more modular, and easier to maintain. One of the most powerful tools I've discovered? Event emitters.

At first, I used them without really understanding how they worked—just copying snippets from libraries or frameworks. But when I finally took the time to dig deeper, everything clicked. Event emitters became my go-to solution for managing communication between different parts of an application without creating messy dependencies.

Understanding Event Emitters

An event emitter is essentially a pub-sub (publish-subscribe) system where:

Components can subscribe to events
Other components can emit those events
The emitter handles notifying all subscribers

This creates beautiful decoupling between different parts of your application.

Building Our Own Event Emitter

Let's implement a type-safe event emitter in TypeScript:

// Define a generic type for the event map
type EventMap = Record<string, any>

// The EventEmitter class, generic over the event map
class NewEventEmitter<TEvents extends EventMap> {
  // Use a Map to store listeners: eventName -> Set of callbacks
  private listeners = new Map<keyof TEvents, Set<(data: any) => void>>()

  // Subscribe to an event
  subscribe<K extends keyof TEvents>(eventName: K, callback: (data: TEvents[K]) => void) {
    // Ensure a Set exists for this event
    if (!this.listeners.has(eventName)) {
      this.listeners.set(eventName, new Set())
    }
    // Add the callback to the Set
    this.listeners.get(eventName)?.add(callback)

    // Return an unsubscribe function for easy cleanup
    return () => this.unsubscribe(eventName, callback)
  }

  // Unsubscribe from an event
  unsubscribe<K extends keyof TEvents>(eventName: K, callback: (data: TEvents[K]) => void) {
    // Remove the callback from the Set for this event
    this.listeners.get(eventName)?.delete(callback)
  }

  // Emit an event, calling all subscribed listeners
  emit<K extends keyof TEvents>(eventName: K, data: TEvents[K]) {
    // Iterate over the Set of callbacks and execute each one
    this.listeners.get(eventName)?.forEach((callback) => {
      callback(data)
    })
  }

  // Note: A 'once' method could be added here as well,
  // similar to the previous implementation, by wrapping the callback
  // and calling unsubscribe within the wrapper.
}

This implementation uses a Map where keys are event names and values are Sets of callback functions. Using a Set automatically handles duplicate subscriptions and provides efficient addition/deletion. The subscribe method now conveniently returns an unsubscribe function.

How i have used Event Emitters

1. UI Component Communication

// Define our events
type ButtonEvents = {
  click: { x: number; y: number }
  hover: boolean
}

class Button {
  // Use the NewEventEmitter
  private emitter = new NewEventEmitter<ButtonEvents>()

  constructor(private element: HTMLElement) {
    element.addEventListener('click', (e) => {
      this.emitter.emit('click', {
        x: e.clientX,
        y: e.clientY,
      })
    })

    element.addEventListener('mouseenter', () => {
      this.emitter.emit('hover', true)
    })

    element.addEventListener('mouseleave', () => {
      this.emitter.emit('hover', false)
    })
  }

  // Use 'subscribe' instead of 'on'
  onClick(callback: (pos: { x: number; y: number }) => void) {
    return this.emitter.subscribe('click', callback)
  }

  onHover(callback: (isHovering: boolean) => void) {
    return this.emitter.subscribe('hover', callback)
  }
}

// Usage
const buttonElement = document.getElementById('my-btn')
if (buttonElement) {
  const button = new Button(buttonElement)
  const unsubscribeClick = button.onClick(({ x, y }) => {
    console.log(`Clicked at (${x}, ${y})`)
  })

  // Call the returned function to unsubscribe
  unsubscribeClick() // Clean it up
}

2. State Management (My Favorite Use Case)

type StoreEvents<T> = {
  change: T
  error: string // Example error event
}

class SimpleStore<T> {
  // Use NewEventEmitter
  private emitter = new NewEventEmitter<StoreEvents<T>>()
  private state: T

  constructor(initialState: T) {
    this.state = initialState
  }

  setState(newState: T) {
    this.state = newState
    this.emitter.emit('change', newState)
  }

  // The primary method is 'subscribe'
  subscribe(callback: (state: T) => void) {
    // Immediately call with current state
    callback(this.state)
    // Subscribe to future changes
    return this.emitter.subscribe('change', callback)
  }

  // Example method to emit an error
  setError(errorMessage: string) {
    this.emitter.emit('error', errorMessage)
  }

  // Method to subscribe specifically to errors
  onError(callback: (error: string) => void) {
    return this.emitter.subscribe('error', callback)
  }
}

// Usage
const store = new SimpleStore({ count: 0 })
const unsubscribeState = store.subscribe((state) => {
  console.log('State changed:', state)
})

const unsubscribeError = store.onError((error) => {
  console.error('Store error:', error)
})

store.setState({ count: 1 }) // Logs: "State changed: { count: 1 }"
store.setError('Something went wrong!') // Logs: "Store error: Something went wrong!"

// Later, cleanup subscriptions if needed
// unsubscribeState();
// unsubscribeError();

Why I Love This Pattern

Decoupling: Components don't need to know about each other
Flexibility: Easy to add new listeners without modifying existing code
Type Safety: TypeScript prevents common mistakes
Performance: Lightweight compared to many alternatives
Debugging: Easy to track event flow through the system

Common Pitfalls to Avoid

Pitfall	Solution
Memory Leaks	Always call the unsubscribe function returned by `subscribe`
Too Many Events	Keep your event types focused and meaningful
Complex Payloads	Keep event data simple and structured

Nice Practices i picked up along the way

Clean up subscriptions using the returned function:

// React example
useEffect(() => {
  const unsubscribe = emitter.subscribe('event', handler)
  // Cleanup function runs on unmount
  return () => unsubscribe()
}, [])

Use TypeScript with EventMap for self-documenting events.
Keep events focused on specific actions or state changes.
Document your event system for team members.

Conclusion

Event emitters have become one of my most trusted tools for building maintainable software. They're particularly useful when:

You need communication between decoupled components
You want to avoid complex dependency chains
You need a flexible system that can evolve over time

The TypeScript implementation we built provides excellent type safety while remaining lightweight and flexible. I encourage you to try building your own event emitter and see where it might simplify your codebase!

How to Build a Custom React Tour Component

Muyiwa Johnson — Thu, 24 Apr 2025 07:17:57 +0000

Hi there! If you're like me, you love building things from scratch. Today, I'm going to show you how to create a custom React tour component using hooks and TypeScript. This is a lighter alternative to existing libraries like React Joyride, and it gives you the flexibility to customize it according to your needs.

Introduction
- Purpose of in-app tours
- Benefits of user onboarding
Project Overview
- Technologies used
- Project installation
- Core components
Tour Guide Mechanics
- Spotlight effect
- Dynamic tooltip positioning
- Step navigation
User Experience Design
- Smooth transitions
- Progress tracking
- Responsive interactions
Advanced Considerations
- Performance optimization
- Accessibility features
Conclusion
- My one cent

Introduction

Purpose of In-App Tours

When users open your app for the first time, they're often hit with a mix of curiosity and confusion. I remember building an early version of a web app for one of my clients and watching a tester just stare at the screen, not sure where to start. That moment stuck with me.

In-app tours exist to change that — to greet your users like a helpful guide, not a wall of features. A well-crafted tour turns overwhelm into confidence. It gives users direction, highlights what matters, and builds trust from the very first click.

Benefits of User Onboarding

When done right, interactive tours do more than just introduce features — they guide users to value, faster. Some key benefits include:

Faster user activation – Help users hit the ground running from day one
Better feature discovery – Gently surface the tools they didn't know they needed
Stronger user retention – When people understand your product, they stick around
Lower support burden – Fewer "how do I…" messages in your inbox

Project Overview

Technologies Used

Our custom tour guide system is built using the following technologies:

React: Handles component structure, state management, and rendering logic
TypeScript: Ensures type safety and improves developer experience through better tooling and early error detection
Tailwind CSS: Provides utility-first styling for rapid and consistent UI development
Radix UI: Supplies accessible, unstyled primitives used for interactive elements like popovers and focus management
React Portal: Enables rendering of tour overlays and tooltips outside the normal DOM hierarchy, ensuring correct z-index layering and layout isolation

Project Installation

Follow these steps to set up the project:

Clone the Repository:

git clone https://github.com/codewithjohnson/build-your-own-tour-guide.git

Navigate to the Project Directory:

cd build-your-own-tour-guide

Install Dependencies:

npm install

Start the Development Server:

npm run dev

Core Components

The tour guide consists of three primary components:

Spotlight Mechanism: Highlights target elements
Tooltip Renderer: Displays contextual information
Navigation Controller: Manages tour progression

Let's take a look at the main components of the tour guide:

// src/components/TourGuide.tsx
import { useState, useEffect, useRef } from 'react'
import { Portal } from '@radix-ui/react-portal'
import { Button } from '@/components/ui/button'
import { Progress } from '@/components/ui/progress'
import { cn } from '@/lib/utils'

export type TourStep = {
  target: string
  title: string
  content: string
  position?: 'top' | 'right' | 'bottom' | 'left'
}

interface TourGuideProps {
  steps: TourStep[]
  isOpen: boolean
  onClose: () => void
  onFinish: () => void
}

export function TourGuide({ steps, isOpen, onClose, onFinish }: TourGuideProps) {
  const [currentStep, setCurrentStep] = useState(0)
  const [tooltipStyle, setTooltipStyle] = useState({})
  const [highlightStyle, setHighlightStyle] = useState({})
  const [animation, setAnimation] = useState('')
  const tooltipRef = useRef<HTMLDivElement>(null)

  // Calculate the position of the tooltip relative to the target element
  const calculatePosition = () => {
    if (!isOpen || steps.length === 0) return

    const targetElement = document.querySelector(steps[currentStep].target)
    if (!targetElement) return

    const targetRect = targetElement.getBoundingClientRect()
    const position = steps[currentStep].position || 'bottom'

    // Set highlight position (the spotlight effect)
    setHighlightStyle({
      top: `${targetRect.top}px`,
      left: `${targetRect.left}px`,
      width: `${targetRect.width}px`,
      height: `${targetRect.height}px`,
    })

    // Set tooltip position
    const tooltipWidth = 300 // Fixed width for tooltip
    const tooltipHeight = tooltipRef.current?.getBoundingClientRect().height || 150
    const spacing = 12 // Space between target and tooltip

    let top = 0
    let left = 0

    switch (position) {
      case 'top':
        top = targetRect.top - tooltipHeight - spacing
        left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2
        break
      case 'bottom':
        top = targetRect.bottom + spacing
        left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2
        break
      case 'left':
        top = targetRect.top + targetRect.height / 2 - tooltipHeight / 2
        left = targetRect.left - tooltipWidth - spacing
        break
      case 'right':
        top = targetRect.top + targetRect.height / 2 - tooltipHeight / 2
        left = targetRect.right + spacing
        break
    }

    // Ensure tooltip stays within viewport
    const viewportWidth = window.innerWidth
    const viewportHeight = window.innerHeight

    if (left < 10) left = 10
    if (left + tooltipWidth > viewportWidth - 10) left = viewportWidth - tooltipWidth - 10
    if (top < 10) top = 10
    if (top + tooltipHeight > viewportHeight - 10) top = viewportHeight - tooltipHeight - 10

    setTooltipStyle({
      top: `${top}px`,
      left: `${left}px`,
      width: `${tooltipWidth}px`,
    })

    // Set animation
    setAnimation('animate-fade-in')
  }

  // Calculate position on step change or window resize
  useEffect(() => {
    calculatePosition()
    window.addEventListener('resize', calculatePosition)

    return () => {
      window.removeEventListener('resize', calculatePosition)
    }
  }, [currentStep, isOpen])

  // Handle next step
  const handleNext = () => {
    if (currentStep < steps.length - 1) {
      setAnimation('animate-fade-out')
      setTimeout(() => {
        setCurrentStep(currentStep + 1)
        setAnimation('animate-fade-in')
      }, 200)
    } else {
      handleFinish()
    }
  }

  // Handle previous step
  const handlePrevious = () => {
    if (currentStep > 0) {
      setAnimation('animate-fade-out')
      setTimeout(() => {
        setCurrentStep(currentStep - 1)
        setAnimation('animate-fade-in')
      }, 200)
    }
  }

  // Handle finish or skip
  const handleFinish = () => {
    setCurrentStep(0)
    onFinish()
  }

  if (!isOpen || steps.length === 0) return null

  const progress = ((currentStep + 1) / steps.length) * 100

  return (
    <Portal>
      {/* Overlay with spotlight effect */}
      <div
        className="fixed inset-0 z-50 bg-black/50 transition-opacity duration-300"
        onClick={onClose}
      >
        {/* Spotlight (transparent hole) */}
        <div
          className="border-primary absolute z-10 box-content rounded-md border-2 transition-all duration-300"
          style={highlightStyle}
        />
      </div>

      {/* Tooltip */}
      <div
        ref={tooltipRef}
        className={cn('fixed z-[60] rounded-lg bg-white p-4 shadow-lg', animation)}
        style={tooltipStyle}
      >
        <div className="mb-1 flex items-center justify-between">
          <h3 className="text-lg font-bold">{steps[currentStep].title}</h3>
          <Button variant="ghost" size="sm" className="h-8 w-8 rounded-full p-0" onClick={onClose}>
            ✕
          </Button>
        </div>

        <div className="mb-4">
          <p className="text-muted-foreground">{steps[currentStep].content}</p>
        </div>

        <div className="space-y-4">
          <Progress value={progress} className="h-1" />

          <div className="flex items-center justify-between">
            <div className="space-x-2">
              <Button
                variant="outline"
                size="sm"
                onClick={handlePrevious}
                disabled={currentStep === 0}
              >
                Previous
              </Button>
              <Button variant="default" size="sm" onClick={handleNext}>
                {currentStep < steps.length - 1 ? 'Next' : 'Finish'}
              </Button>
            </div>

            <div className="text-muted-foreground text-sm">
              {currentStep + 1} of {steps.length}
            </div>
          </div>
        </div>
      </div>
    </Portal>
  )
}

This component is the heart of our tour guide system. I use a combination of hooks to manage state, calculate positions, and handle animations. The calculatePosition function is particularly important as it determines where the tooltip and spotlight should appear based on the current step.

The useEffect hook listens for changes in the current step and window size, ensuring that the tooltip and spotlight are always correctly positioned.

Next is the index page

// src/pages/index.tsx

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { AppLayout } from "@/components/AppLayout";
import { TourGuide, TourStep } from "@/components/TourGuide";

const Index = () => {
  const [isTourOpen, setIsTourOpen] = useState(false);

  // Define tour steps
  const tourSteps: TourStep[] = [
    {
      target: "#header",
      title: "Welcome to TourGuide",
      content: "This is a demonstration of an in-app guided tour. Let's explore the interface together!",
      position: "bottom"
    },
    {
      target: "#create-tour",
      title: "Create New Tours",
      content: "Click here to create a new tour for your application. You can customize each step and target specific elements.",
      position: "bottom"
    },
   ... other steps

  ];

  const startTour = () => {
    setIsTourOpen(true);
  };

  const endTour = () => {
    setIsTourOpen(false);
  };

  return (
    <div className="min-h-screen flex flex-col">
      <div className="fixed top-4 right-4 z-40">
        <Button onClick={startTour} className="shadow-lg">
          Start Tour
        </Button>
      </div>

      <AppLayout />

      <TourGuide
        steps={tourSteps}
        isOpen={isTourOpen}
        onClose={endTour}
        onFinish={endTour}
      />
    </div>
  );
};

export default Index;

Tour Guide Mechanics

Spotlight Effect

The spotlight effect is achieved by creating a div that overlays the entire screen, with a transparent hole cut out where the target element is located. This gives users a clear focus on the feature being highlighted.

// Spotlight styles
<div className="fixed inset-0 z-50 bg-black/50">
  <div className="border-primary absolute border-2" style={highlightStyle} />
</div>

Dynamic Tooltip Positioning

The tooltip's position is calculated based on the target element's position and the specified direction (top, right, bottom, left). This ensures that the tooltip is always visible and does not overflow the viewport.

const calculatePosition = (targetRect: DOMRect, position: 'top' | 'right' | 'bottom' | 'left') => {
  const spacing = 12

  switch (position) {
    case 'top':
      return {
        top: targetRect.top - spacing,
        left: targetRect.left + targetRect.width / 2,
      }
    // ... other positions
  }
}

Step Navigation

The navigation between steps is handled by updating the currentStep state. The handleNext and handlePrevious functions manage the transitions, including animations for a smoother user experience.

const handleNext = () => {
  if (currentStep < steps.length - 1) {
    setAnimation('animate-fade-out')
    setTimeout(() => {
      setCurrentStep(currentStep + 1)
      setAnimation('animate-fade-in')
    }, 200)
  } else {
    handleFinish()
  }
}

User Experience Design

Smooth Transitions

To enhance the user experience, I use CSS animations for transitions between steps. This makes the tour feel more fluid and engaging.

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-in-out;
  animation-fill-mode: both;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.animate-fade-out {
  animation: fade-out 0.3s ease-in-out;
  animation-fill-mode: both;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Progress Tracking

The progress of the tour is visually represented using a progress bar. This gives users a sense of how far they are in the tour and how many steps are left.

<Progress value={progress} className="h-1" />

Responsive Interactions

The tour guide is designed to be responsive, ensuring that it works well on different screen sizes. The tooltip and spotlight positions are recalculated on window resize events, maintaining a consistent experience.

window.addEventListener('resize', calculatePosition)

return () => {
  window.removeEventListener('resize', calculatePosition)
}

Advanced Considerations

Performance Optimization

I plan to implement lazy loading for the tooltip content and spotlight effect. This will ensure that only the necessary elements are rendered at any given time, improving performance.

Accessibility Features

Accessibility is a key consideration in any UI component. I will ensure that the tour guide is keyboard navigable and screen reader friendly. This includes adding ARIA roles and properties to the tooltip and spotlight elements.

Conclusion

My one cent

Building a custom tour guide component in React allows for greater flexibility and customization compared to existing libraries.
Using TypeScript enhances type safety and improves the developer experience. I love TypeScript and I think I'm getting better at it.
The combination of hooks, CSS animations, and Radix UI primitives provides a solid foundation for creating an engaging user experience.

Estimating the Running Times of Algorithms (Part 2)

Muyiwa Johnson — Mon, 30 Sep 2024 06:50:45 +0000

1.2 Estimating the Running Times of Algorithms

To estimate the Big O running time of an algorithm, here are a couple of rules of thumb:

Constant Time – O(1):

If an algorithm runs in the same amount of time regardless of how large ( n ) is, then it is O(1).
Linear Time – O(n):

A loop that runs ( n ) times contributes a factor of ( n ) to the Big O running time.
Multiplicative Effect of Nested Loops:

If loops are nested, multiply their running times.
Additive Effect of Sequential Loops:

If one loop follows another, add their running times.
Logarithmic Time – O(log n):

If the loop variable is increasing in a way such as ( i = i \times 2 ) or ( i = i / 3 ), instead of changing by a constant amount (like ( i++ ) or ( i -= 2 )), then that contributes a factor of log ( n ) to the Big O running time.

Examples of Computing Big O Running Times

Below are several examples demonstrating how to compute the Big O running time of different code segments. All examples involve working with an array, and we will assume ( n ) is the length of the array.

1. Summing the Entries in an Array

let total = 0;
for (let i = 0; i < a.length; i++) {
    total += a[i];
}

Running Time:

This code runs in O(n) time. It is a straightforward loop that iterates through each element of the array once.

2. Nested For Loops

for (let i = 0; i < a.length; i++) {
    for (let j = 0; j < a.length; j++) {
        console.log(a[i] + a[j]);
    }
}

Running Time:

These are two ordinary loops, each running for ( n = a.length ) steps. Since they are nested, their running times multiply, resulting in an overall running time of O(n²). For each of the ( n ) iterations of the outer loop, the inner loop runs ( n ) times.

3. Three Nested Loops

for (let i = 0; i < a.length; i++) {
    for (let j = 0; j < a.length - 1; j++) {
        for (let k = 0; k < a.length - 2; k++) {
            console.log(a[i] + a[j] * a[k]);
        }
    }
}

Running Time:

This code runs in O(n³) time. Technically, since the second and third loops don’t run the full length of the array, we could write it as O(n(n - 1)(n - 2)). However, we focus on the most significant term, which is O(n³), as the lower-order terms become insignificant as ( n ) grows.

4. Sequential Loops

let count = 0, count2 = 0;
for (let i = 0; i < a.length; i++) {
    count++;
}
for (let i = 0; i < a.length; i++) {
    count2 += 2;
}

Running Time:

The running time here is O(n + n) = O(2n), which simplifies to O(n) because we ignore constants in Big O notation.

5. Constant Time Operations

let w = a[0];
let z = a[a.length - 1];
console.log(w + z);

Running Time:

The running time here is O(1). The key idea is that the running time has no dependence on ( n ). No matter how large the array is, this code will always take the same amount of time to run.

6. Loop with Constant Iterations

let c = 0;
let stop = 100;
for (let i = 0; i < stop; i++) {
    c += a[i];
}

Running Time:

Despite the loop, this code runs in O(1) time. The loop always runs 100 times, regardless of how large the array is. Notice that a.length never appears in the code, making the running time constant.

7. Logarithmic Loop

let sum = 0;
for (let i = 1; i < a.length; i *= 2) {
    sum += a[i];
}

Running Time:

This code runs in O(log n) time. The loop variable increases exponentially: 1, 2, 4, 8, 16, 32, 64, 128, … It takes only 10 steps to reach 1000, 20 steps to reach 1 million, and 30 steps to reach 1 billion.

The number of steps to reach ( n ) is determined by solving ( 2^x = n ), whose solution is log₂(n) (commonly written as log(n)).

8. Nested Loops with Logarithmic Inner Loop

let n = a.length;
for (let i = 0; i < n; i++) {
    let sum = 0;
    let m = n;
    while (m > 1) {
        sum += m;
        m /= 2;
    }
}

Running Time:

This code has a running time of O(n log n). The outer loop is a standard loop contributing a factor of ( n ), while the inner while loop is logarithmic since the loop variable is halved each time. Multiplying these factors gives O(n log n).

9. Combination of Loops

let total = 0;
let i = 0;
while (i < a.length) {
    i++;
    total += a[i];
}

for (let i = 0; i < a.length / 2; i++) {
    for (let j = a.length - 1; j >= 0; j--) {
        total += a[i] * a[j];
    }
}

Running Time:

The running time is O(n²). Here's how it's calculated:

The while loop runs in O(n) time.
The nested for loops run in O(n * (n/2)) = O(n²) time.
Adding these together gives O(n + n²). However, we focus on the dominant term and drop the constants, resulting in O(n²).

Summary of Rules for Estimating Big O Running Times

Constant Time – O(1): Operations that do not depend on ( n ).
Linear Time – O(n): Single loops that iterate ( n ) times.
Logarithmic Time – O(log n): Loops that divide or multiply the loop variable by a constant factor each iteration.
Quadratic Time – O(n²): Nested loops where each loop runs ( n ) times.
Cubic Time – O(n³): Three nested loops each running ( n ) times.
Additive and Multiplicative Effects: When loops are sequential, their Big O times add; when nested, they multiply.

I believe applying these rules of thumb and analyzing code segments as shown in the examples above, you can effectively estimate the Big O running time of various algorithms.

Feel free to comments on any issues. thank you for reading my 2 cents!!

Running Times of Algorithms (Part 1)

Muyiwa Johnson — Sun, 29 Sep 2024 12:25:30 +0000

1.1 Introduction
1.2 Estimating the Running Times of Algorithms
1.3 Common Running Times
1.4 Some Notes About Big O Notation
1.5 Logarithms and Binary Search

1.1 Introduction

In computer science, one valuable skill is the ability to analyze an algorithm and predict its running time. Choosing the right algorithm can significantly impact the performance of a program. For example, an algorithm that takes a few seconds to run can be the difference between success and frustration, especially if another option takes days or weeks to complete.

Example: Summing Integers from 1 to n

Let's explore three different methods to sum the integers from 1 to ( n ):

Looping Approach: The most straightforward method is to loop through the integers from 1 to ( n ) and maintain a running total. Here's how it looks in JavaScript:

   let total = 0;
   for (let i = 1; i <= n; i++) {
       total += i;
   }

Mathematical Formula: If you’re familiar with mathematics, you can use the formula

$\frac{n(n + 1)}{2}$

This allows you to calculate the sum in a single line:

   let total = (n * (n + 1)) / 2;

Nested Loops: A more convoluted approach involves using nested loops:

   let total = 0;
   for (let i = 1; i <= n; i++) {
       for (let j = 0; j < i; j++) {
           total++;
       }
   }

While any of these algorithms might work well for adding numbers from 1 to 100, the choice of algorithm becomes crucial when scaling up to larger numbers, such as summing from 1 to a billion.

Performance Testing

I tested the performance of these algorithms by summing integers from 1 to one billion. The results were surprising:

The looping approach took about 1 second to compute the sum.
The mathematical formula returned the answer almost instantly.
The nested loops approach would take an estimated 12 years to finish, based on its progress over three minutes.

Big O Notation

In computer science terminology, we describe the performance of these algorithms using Big O notation:

The looping algorithm is classified as O(n).
The mathematical approach is categorized as O(1).
The nested loops algorithm is noted as O(n²).

Big O notation is used to measure the running time of algorithms, but it provides an order of magnitude estimation rather than an exact running time. Calculating the precise running time is often impractical due to varying factors like processor speed, memory, and the current workload on the machine.

Instead, Big O notation focuses on how an algorithm's running time grows as a specific parameter ( n ) increases. In this case, ( n ) represents the integer we are summing to, but it could also be the size of an array, the number of items in a matrix, or any other relevant measure.

Key Concepts of Big O Notation

We typically focus on the dominant term. For instance, ( O(n² + n + 1) ) simplifies to ( O(n²) ) because ( n² ) grows faster than ( n ) or ( 1 ) as ( n ) increases.
We often ignore constants. Therefore, ( O(3.47n) ) is the same as ( O(n) ).
In a more complex expression like ( O(2n + 4n³ + 0.6n² - 1) ), we would simplify it to ( O(n³) ).

Remember, Big O notation is a way to estimate the order of growth rather than providing exact details about running time.

The Power Of a Simple Cache System with JavaScript Map

Muyiwa Johnson — Mon, 15 Jul 2024 06:19:16 +0000

The Power Of a Simple Cache System with JavaScript Map
- Table of Contents
- Introduction
- What the Problem Is
- What Is a Cache System
- How to Implement a Simple Cache System
- Solving a Problem Using a Simple Cache System
- Why Consider Using a WeakMap
- Conclusion

Introduction

In this article, we will talk about the power of a simple cache system with JavaScript Map. We will see what the problem is, what a cache system is, how to implement a simple cache system, and finally, we will conclude. Let's get started.

What the Problem Is

When we are working with a large amount of data, we need to store the data in memory to access it quickly. However, storing data in memory can consume a lot of memory. Therefore, we need a way to store data in memory efficiently to avoid performance bottlenecks caused by repeated computations or frequent database queries. That's where a cache system comes in.

What Is a Cache System

A cache system stores data in memory so that it can be accessed quickly. It is used to store data that is frequently accessed, thereby improving the performance of an application by reducing the time it takes to access data. Cache systems are used in many applications, such as web browsers, databases, and web servers. A cache system can be implemented using different data structures, such as arrays, linked lists, and hash tables. In this article, we will implement a simple cache system using a JavaScript Map.

How to Implement a Simple Cache System

To implement a simple cache system using a JavaScript Map, we need to create a new Map object and store the data in the Map object. We can then access the data from the Map object using the get method. Here is an example:

// Create a new Map object
const cache = new Map();

// Store data in the cache
cache.set('key', 'value');

// Access data from the cache
const value = cache.get('key');
console.log(value); // Output: value

In this example, we create a new Map object called cache and store the data in the cache using the set method. We then access the data from the cache using the get method. This is a simple cache system that can be used to store data in memory efficiently.

Solving a Problem Using a Simple Cache System

Let's solve a problem using a simple cache system. Suppose we have a function that takes a number as an argument and returns the factorial of that number. We can use a cache system to store the results of the factorial function so that we can access the results quickly. Here is an example of how to implement a simple cache system to store the results of the factorial function:

// Declare a function called memoize
function memoize(fn) {
  const cache = new Map(); // Initialize a new Map object for caching
  return function (n) {
    if (cache.has(n)) {
      // Check if result is already in cache
      return cache.get(n);
    } else {
      // Compute the result and store it in cache
      const result = fn(n);
      cache.set(n, result);
      return result;
    }
  };
}

// Declare a function called factorial
function factorial(n) {
  if (n < 0) {
    throw new Error('Negative numbers are not allowed');
  }
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

// Create a memoized version of the factorial function
const memoizedFactorial = memoize(factorial);

// Let's time the performance of the factorial function
console.time('first call'); // Example: 15.224ms
console.log(memoizedFactorial(5)); // Output: 120
console.timeEnd('first call');

console.time('second call'); // Example: 0.224ms
console.log(memoizedFactorial(5)); // Output: 120
console.timeEnd('second call');

In this example, we declare a function called memoize that takes a function as an argument and returns a memoized version of that function. The memoize function uses a Map object to store the results of the function. If the result is already in the cache, it returns the cached result. Otherwise, it computes the result, stores it in the cache, and then returns the result.

We then declare a function called factorial that computes the factorial of a number. We create a memoized version of the factorial function using the memoize function. Finally, we time the performance of the factorial function to demonstrate the efficiency of the cache system.

Why Consider Using a WeakMap

While using a Map for caching is effective, there are scenarios where a WeakMap might be more appropriate. A WeakMap allows for garbage collection of its keys, which must be objects. This can be particularly useful in applications where the cached data should not prevent the garbage collection of objects, leading to more efficient memory usage.

In a Map, the presence of a key will prevent that key (and its associated value) from being garbage collected, potentially leading to memory leaks if not managed properly. In contrast, a WeakMap does not prevent its keys from being garbage collected, making it ideal for caching data associated with objects that might otherwise be removed from memory.

In the next article, we will explore how to implement a cache system using a WeakMap and discuss its advantages and use cases in more detail.

Conclusion

In this article, we have seen the power of a simple cache system using JavaScript Map. We discussed the problem of storing data in memory efficiently, explained what a cache system is, and showed how to implement a simple cache system using a Map. We also solved a problem using a simple cache system to demonstrate its practical use.

Caching is a powerful technique that can significantly improve the performance of your applications by reducing the time it takes to access frequently used data. In the next article, we will delve into using WeakMap for caching and explore its benefits and use cases.

Definitive guide to Higher Order Function (HOC)

Muyiwa Johnson — Thu, 04 Jul 2024 01:31:17 +0000

Higher Order Functions in Javascript

Introduction

In this article, we will learn about higher order functions in JavaScript. We will learn what higher order functions are, how to create them, and how to use them. We will also learn about some common higher order functions in JavaScript.

What are Higher Order Functions?

A higher order function is a function that takes one or more functions as arguments or returns a function as its result. In other words, a higher order function is a function that operates on other functions. Higher order functions are a powerful feature of JavaScript that allows us to write more concise and expressive code.

You are probably already familiar with higher order functions in JavaScript. For example, the map, filter, and reduce functions are all higher order functions. These functions take a function as an argument and apply that function to each element of an array.

Creating Higher Order Functions

Creating a higher order function in JavaScript is easy. You can define a function that takes another function as an argument and then call that function inside the body of the higher order function. Here is an example of a higher order function that takes a function as an argument:

function higherOrderFunction(callback) {
  console.log('Inside higher order function');
  callback();
}

function callback() {
  console.log('Inside callback function');

  // do some other work
}

In this example, the higherOrderFunction function takes a callback function as an argument and then calls that function inside the body of the higher order function.

Using Higher Order Functions

You can use higher order functions in JavaScript to write more concise and expressive code. For example, you can use the map function to transform an array of values into a new array of values. Here is an example:

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

In this example, we use the map function to double each number in the numbers array. The map function takes a function as an argument and applies that function to each element of the array.

Common Higher Order Functions

There are many common higher order functions in JavaScript that you can use to write more concise and expressive code. Some of the most common higher order functions are:

`map`

The map function transforms an array of values into a new array of values. It takes a function as an argument and applies that function to each element of the array.


const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

`filter`

The filter function filters an array of values based on a condition. It takes a function as an argument and applies that function to each element of the array. If the function returns true, the element is included in the new array; otherwise, it is excluded.


const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

`reduce`

The reduce function reduces an array of values to a single value. It takes a function as an argument and applies that function to each element of the array, accumulating a single result.


const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, number) {
  return accumulator + number;
}, 0);

console.log(sum); // 15

Custom Higher Order Functions

You can also create your own custom higher order functions in JavaScript. For example, you can create a function that composes two functions together:


function compose(f, g) {
  return function(x) {
    return f(g(x));
  };
}

function addOne(x) {
  return x + 1;
}

function multiplyByTwo(x) {
  return x * 2;
}

const addOneAndMultiplyByTwo = compose(multiplyByTwo, addOne);

console.log(addOneAndMultiplyByTwo(3)); // 8

In this example, we define a compose function that takes two functions f and g as arguments and returns a new function that composes them together. We then define two functions addOne and multiplyByTwo and compose them together to create a new function addOneAndMultiplyByTwo.

Conclusion

In this article, we learned about higher order functions in JavaScript. We learned what higher order functions are, how to create them, and how to use them. We also learned about some common higher order functions in JavaScript. Higher order functions are a powerful feature of JavaScript that allows us to write more concise and expressive code. By using higher order functions, you can make your code more modular, reusable, and easier to understand.

react 19 useContext, useReducer & localstorage

Muyiwa Johnson — Sat, 08 Jun 2024 19:12:30 +0000

Solving the State Management Problem in React: A Deep Dive into Centralized Notes Management

Introduction

As applications grow, managing state across various components becomes increasingly complex. Prop drilling can make your codebase cumbersome, and the lack of persistence between sessions can frustrate users who lose their data upon refreshing the browser. To tackle these issues, we'll explore a robust solution using React context, hooks, and reducers to manage and persist notes in a structured and maintainable way.

you might just need this if you are experienced

The Problem

Prop Drilling: Passing state down multiple levels of components (prop drilling) leads to cluttered and hard-to-maintain code.
State Persistence: Without persistent storage, data is lost when the user refreshes or closes the browser.
State Initialization: Initializing state on every render can lead to performance issues.
Global State Access: Components need a straightforward way to access and update global state.
Error Handling: Reading from or writing to storage can lead to application crashes if not handled properly.
Scalability: As the application grows, state management becomes harder to maintain and scale.

Our Solution: Centralized Notes Management

To address these problems, we’ll use a combination of React's createContext, useContext, useReducer, and useEffect hooks along with localStorage for persistence. Here’s a detailed breakdown of the approach:

1. Centralized State Management

We start by creating a context to centralize the state:

import { createContext, useContext, useReducer, useEffect } from "react";
import NoteReducer from "../reducers/NoteReducer";
import InitialNotes from "../state/InitialNotes";

const NoteContext = createContext(null);
const NoteDispatchContext = createContext(null);

By using createContext, we ensure that our state and dispatch functions are accessible globally within our application.

2. Persistence with Local Storage

We use localStorage to ensure that notes data persists across sessions:

const getStoredNotes = (initialNotes = InitialNotes) => {
  try {
    const storedNotes = localStorage.getItem("storedNotes");
    return storedNotes ? JSON.parse(storedNotes) : initialNotes;
  } catch (error) {
    console.error("Error reading from localStorage:", error);
    return initialNotes;
  }
};

This function retrieves notes from localStorage or falls back to initial notes if an error occurs, ensuring robustness.

3. Lazy State Initialization

By initializing the state lazily, we improve performance:

const NotesProvider = ({ children }) => {
  const [notes, dispatch] = useReducer(NoteReducer, undefined, getStoredNotes);

  useEffect(() => {
    try {
      localStorage.setItem("storedNotes", JSON.stringify(notes));
    } catch (error) {
      console.error("Error saving to localStorage:", error);
    }
  }, [notes]);

  return (
    <NoteContext.Provider value={notes}>
      <NoteDispatchContext.Provider value={dispatch}>
        {children}
      </NoteDispatchContext.Provider>
    </NoteContext.Provider>
  );
};

The useReducer hook with lazy initialization ensures that state is only loaded from localStorage once when the component mounts.

4. Global Access and Modification

To simplify state access and updates, we create custom hooks:

export const useNotesContext = () => useContext(NoteContext);
export const useNotesDispatchContext = () => useContext(NoteDispatchContext);

These hooks allow any component to easily access and modify the notes state.

5. Structured State Updates

Using a reducer centralizes the logic for state updates:

// NoteReducer.js
const NoteReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_NOTE':
      return [...state, action.payload];
    case 'DELETE_NOTE':
      return state.filter(note => note.id !== action.payload.id);
    default:
      return state;
  }
};

export default NoteReducer;

This pattern ensures that state management is predictable and easy to maintain.

6. Error Handling for Data Persistence

By wrapping localStorage operations in try-catch blocks, we prevent the application from crashing due to storage-related errors:

useEffect(() => {
  try {
    localStorage.setItem("storedNotes", JSON.stringify(notes));
  } catch (error) {
    console.error("Error saving to localStorage:", error);
  }
}, [notes]);

7. Optimization for Re-renders

The useEffect hook with a dependency on the notes state ensures that localStorage is updated only when the notes state changes, minimizing unnecessary operations:

useEffect(() => {
  try {
    localStorage.setItem("storedNotes", JSON.stringify(notes));
  } catch (error) {
    console.error("Error saving to localStorage:", error);
  }
}, [notes]);

8. Security Consideration

While localStorage is convenient, it's important to consider security for sensitive data. For more secure storage, consider using encrypted storage options or other secure methods.

9. Scalability and Maintenance

The context and reducer pattern makes the codebase scalable and maintainable. Adding new features or modifying existing logic becomes easier as the state management logic is centralized and well-structured.

Conclusion

By leveraging React context, hooks, and reducers, we can create a robust solution for managing and persisting notes. This approach addresses common problems like prop drilling, state persistence, and performance issues, while providing a scalable and maintainable architecture. Whether you're building a simple note-taking app or a more complex application, these principles will help you manage state effectively and improve the overall user experience.

Efficient Code Splitting in React: A Practical Guide

Muyiwa Johnson — Sat, 08 Jun 2024 16:22:40 +0000

Introduction

As your React application grows, so does the size of your bundle, which can impact performance. Code splitting is a technique to split your code into smaller chunks that can be loaded on demand. This post will guide you through implementing code splitting in React using both JavaScript and TypeScript, with practical examples.

Understanding Code Splitting

Before diving into the implementation, let's understand the impact of code splitting.

Before Code Splitting

Without code splitting, your entire application is bundled into a single file. This means that even if a user only visits one page or uses one component, they must download the entire application bundle. This can lead to:

Longer Initial Load Time: Users have to wait longer for the initial load.
Poor Performance on Slow Networks: Users with slower internet connections will experience significant delays.
Unnecessary Data Transfer: Users download components and code they may never use.

After Code Splitting

With code splitting, your application is divided into smaller chunks that are loaded on demand. This results in:

Faster Initial Load Time: Only the necessary chunks are loaded initially, speeding up the initial load.
Improved Performance: Users experience faster load times and smoother interactions.
Efficient Data Transfer: Only the required code is downloaded, reducing data usage.

JavaScript Implementation

Creating a Loadable Component

First, create a Loadable component that will handle the loading state while your actual component is being loaded.

// src/components/Loadable.js
import { Suspense } from "react";
import Loader from "./Loader"; // Assume you have a Loader component

const Loadable = (Component) => (props) => {
  return (
    <Suspense fallback={<Loader />}>
      <Component {...props} />
    </Suspense>
  );
};

export default Loadable;

Example Usage with a Heavy Component

Let's simulate a heavy component with some intensive computation to demonstrate the benefits of code splitting.

// src/components/HeavyComponent.js
import React, { useEffect, useState } from "react";

const HeavyComponent = () => {
  const [result, setResult] = useState(0);

  useEffect(() => {
    let sum = 0;
    for (let i = 0; i < 1e7; i++) {
      sum += i;
    }
    setResult(sum);
  }, []);

  return (
    <div>
      <h1>Heavy Component</h1>
      <p>Result of heavy computation: {result}</p>
    </div>
  );
};

export default HeavyComponent;

lets now import the heavy component into our main view


// src/App.js
import React from "react";
import Loadable from "./Loadable";

// use the Loadable component to asynchronously load the HeavyComponent

const heavyLoadableComp = Loadable(React.lazy(() => import("./HeavyComponent")));

const App = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <LoadableHeavyComponent />
    </div>
  );
};

export default App;

TypeScript Implementation

Creating a Loadable Component in TypeScript

To ensure type safety and leverage TypeScript's features, we can rewrite the Loadable component.

// src/components/Loadable.tsx
import React, { Suspense, ReactElement } from "react";
import Loader from "./Loader";

const Loadable = <P extends object>(Component: React.ComponentType<P>): React.FC<P> => (props: P): ReactElement => {
  return (
    <Suspense fallback={<Loader />}>
      <Component {...props} />
    </Suspense>
  );
};

export default Loadable;

Example Usage with a Heavy Component in TypeScript

// src/App.tsx
import React from "react";

// use the Loadable component to asynchronously load the HeavyComponent

const heavyLoadableComp = Loadable(React.lazy(() => import("./HeavyComponent")));

const App: React.FC = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <LoadableHeavyComponent />
    </div>
  );
};

export default App;

Code splitting is a powerful technique to optimize your React applications. By splitting your code into smaller chunks and loading them on demand, you can significantly improve the performance of your application, especially as it grows. Now go make a better react website!

if you like this simple guide, pls give some love ❤️ and even add to this guide

Forem: Muyiwa Johnson

Heard of Reactivity in Vanilla JavaScript?

Reactivity in Vanilla JavaScript

The Challenge: Why Vanilla JavaScript Isn't Reactive by Default

The Solution: Implementing Reactivity with Proxies

Understanding Proxies

Building a Simple Reactivity System

Conclusion

Build Your Own Event Emitter

Introduction

Understanding Event Emitters

Building Our Own Event Emitter

How i have used Event Emitters

1. UI Component Communication

2. State Management (My Favorite Use Case)

Why I Love This Pattern

Common Pitfalls to Avoid

Nice Practices i picked up along the way

Conclusion

How to Build a Custom React Tour Component

Table of Contents

Introduction

Purpose of In-App Tours

Benefits of User Onboarding

Project Overview

Technologies Used

Project Installation

Core Components

Tour Guide Mechanics

Spotlight Effect

Dynamic Tooltip Positioning

Step Navigation

User Experience Design

Smooth Transitions

Progress Tracking

Responsive Interactions

Advanced Considerations

Performance Optimization

Accessibility Features

Conclusion

My one cent

Estimating the Running Times of Algorithms (Part 2)

1.2 Estimating the Running Times of Algorithms

Examples of Computing Big O Running Times

1. Summing the Entries in an Array

2. Nested For Loops

3. Three Nested Loops

4. Sequential Loops

5. Constant Time Operations

6. Loop with Constant Iterations

7. Logarithmic Loop

8. Nested Loops with Logarithmic Inner Loop

9. Combination of Loops

Summary of Rules for Estimating Big O Running Times

Running Times of Algorithms (Part 1)

1.1 Introduction

Example: Summing Integers from 1 to n

Performance Testing

Big O Notation

Key Concepts of Big O Notation

The Power Of a Simple Cache System with JavaScript Map

Table of Contents

Introduction

What the Problem Is

What Is a Cache System

How to Implement a Simple Cache System

Solving a Problem Using a Simple Cache System

Why Consider Using a WeakMap

Conclusion

Definitive guide to Higher Order Function (HOC)

Higher Order Functions in Javascript

Introduction

What are Higher Order Functions?

Creating Higher Order Functions

Using Higher Order Functions

Common Higher Order Functions

map

filter

reduce

Custom Higher Order Functions

`map`

`filter`

`reduce`