3 Ways to Create a Sum Function in JavaScript

Dharmesh — Sat, 24 Jan 2026 07:16:16 +0000

In JavaScript, you can design a sum() function that accepts any number of arguments using the rest parameter.

Here are three different patterns to compute the total:-

Using a for Loop (Traditional Method)

function sum(...args) {
  let arr = [...args];
  if (arr.length <= 0) return 0;

  let sum = 0;

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

  console.log(sum);
}

sum(3, -4, 5);

Using map() Method (Less Common but Works)

function sum(...args) {
  let arr = [...args];
  if (arr.length <= 0) return 0;

  let sum = 0;

  arr.map((val) => (sum += val));

  console.log(sum);
}

sum(3, -4, 5);

Using reduce() (Best & Cleanest)

function sum(...args) {
  let arr = [...args];
  if (arr.length <= 0) return 0;

  const total = arr.reduce((acc, curr) => acc + curr, 0);

  console.log(total);
}

sum(3, -4, 5);

Final Thoughts

for loop → good for beginners
map() → not ideal for summing
reduce() → clean, functional, professional approach

# Managing CRUD Operations in React using Context API & TypeScript

Dharmesh — Tue, 07 Oct 2025 13:21:01 +0000

Hi Devs 👋,

In this post, I want to share how to manage CRUD (Create, Read, Update, Delete) operations in a React app using Context API and TypeScript, with separate inputs for creating new items and updating existing items.

Scenario

We have a list of items fetched from an API.
Users can create new items.
Users can update an existing item using a separate input field.
Users can delete items.
All state is centralized in a Context, keeping UI components clean.

Define Interfaces

// src/types.ts
export interface Item {
  id: number;
  name: string;
}

export interface EditingItem {
  id: number;
  name: string;
}

Context Setup

// src/context/ItemContext.tsx
import React, { createContext, useContext, useEffect, useState } from "react";
import { Item } from "../types";

interface ItemContextType {
  items: Item[];
  fetchItems: () => Promise<void>;
  createItem: (name: string) => Promise<void>;
  updateItem: (id: number, name: string) => Promise<void>;
  deleteItem: (id: number) => Promise<void>;
}

const ItemContext = createContext<ItemContextType | null>(null);

export const ItemProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [items, setItems] = useState<Item[]>([]);

  const fetchItems = async () => {
    // Replace with actual API call
    const res = await fetch("/api/items");
    const data = await res.json();
    setItems(data);
  };

  const createItem = async (name: string) => {
    const res = await fetch("/api/items", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name }),
    });
    const newItem = await res.json();
    setItems((prev) => [...prev, newItem]);
  };

  const updateItem = async (id: number, name: string) => {
    const res = await fetch(`/api/items/${id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name }),
    });
    const updated = await res.json();
    setItems((prev) => prev.map((item) => (item.id === id ? updated : item)));
  };

  const deleteItem = async (id: number) => {
    await fetch(`/api/items/${id}`, { method: "DELETE" });
    setItems((prev) => prev.filter((item) => item.id !== id));
  };

  useEffect(() => {
    fetchItems();
  }, []);

  return (
    <ItemContext.Provider value={{ items, fetchItems, createItem, updateItem, deleteItem }}>
      {children}
    </ItemContext.Provider>
  );
};

export const useItems = () => {
  const context = useContext(ItemContext);
  if (!context) throw new Error("useItems must be used inside ItemProvider");
  return context;
};

Component with Separate Inputs