Every application you have ever used — social media, e-commerce, banking, notes apps, to-do lists — performs the same four fundamental operations on data: Create, Read, Update and Delete. These four operations form the acronym CRUD, and they are the backbone of virtually every software system that interacts with a database or API.

Whether you are writing raw SQL queries, building a REST API, or wiring up a frontend form — you are doing CRUD. This guide covers each operation in detail, shows you how CRUD maps across databases, APIs and frontend code, and gives you real working examples you can use immediately.

Download This Article as a Cheat Sheet Save a clean summary of all CRUD operations across SQL, REST APIs and JavaScript for offline reference.
PDF  ·  1 page  ·  Free

What Is CRUD

CRUD stands for Create, Read, Update, Delete — the four basic operations you can perform on any piece of data. The concept was first described by James Martin in his 1983 book Managing the Database Environment. Since then, CRUD has become the universal vocabulary for describing data operations in software.

Think of CRUD like a library system:

  • Create — Add a new book to the catalogue
  • Read — Look up a book or browse the catalogue
  • Update — Change a book's status (e.g., mark as checked out)
  • Delete — Remove a book from the catalogue

Every layer of a software application implements CRUD — from the database (SQL statements), to the backend API (HTTP methods), to the frontend UI (forms, lists, buttons). Understanding how these layers connect is the key to building complete applications.


The CRUD Mapping Table

CRUD operations map cleanly to SQL statements, HTTP methods and typical UI actions. Here is the complete mapping:

CRUDSQLHTTP MethodREST EndpointUI Action
CreateINSERTPOSTPOST /usersSubmit form
ReadSELECTGETGET /users/:idView page / list
UpdateUPDATEPUT / PATCHPUT /users/:idEdit form
DeleteDELETEDELETEDELETE /users/:idDelete button
💡 Why this mapping matters: When you understand that a "Save" button triggers a POST request that runs an INSERT query, the entire stack becomes transparent. You stop seeing layers and start seeing one continuous flow of data.

Create — Adding New Data

The Create operation adds new records to your data store. In a database this means inserting a new row. In a REST API this means sending a POST request. In a UI this means filling out a form and clicking "Submit" or "Save".

SQL — INSERT

SQL — inserting new records
-- Insert a single user INSERT INTO users (name, email, role) VALUES ('Shashank', 'shashank@example.com', 'developer'); -- Insert multiple users at once INSERT INTO users (name, email, role) VALUES ('Priya', 'priya@example.com', 'designer'), ('Rahul', 'rahul@example.com', 'manager'), ('Anjali', 'anjali@example.com', 'developer'); -- Insert and return the new row (PostgreSQL) INSERT INTO users (name, email) VALUES ('Shashank', 'shashank@example.com') RETURNING *; -- returns the inserted row with its generated id

REST API — POST

JavaScript — POST request to create a new resource
// Create a new user via REST API const newUser = { name: 'Shashank', email: 'shashank@example.com', role: 'developer' }; const response = await fetch('https://api.example.com/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newUser) }); const created = await response.json(); console.log(created); // { id: 1, name: 'Shashank', ... } // Server responds with 201 Created

Read — Fetching Data

The Read operation retrieves existing data without modifying it. This is the most common operation — every time a page loads, a list renders, or a search executes, a Read operation is happening. Read operations should never change data. They are safe and idempotent.

SQL — SELECT

SQL — querying data with SELECT
-- Get all users SELECT * FROM users; -- Get a specific user by id SELECT * FROM users WHERE id = 42; -- Get specific columns with filtering and sorting SELECT name, email, role FROM users WHERE role = 'developer' ORDER BY name ASC LIMIT 10; -- Search with LIKE SELECT * FROM users WHERE name LIKE '%shashank%'; -- Count records SELECT COUNT(*) AS total_users FROM users;

REST API — GET

JavaScript — GET requests to read data
// Get all users const response = await fetch('https://api.example.com/users'); const users = await response.json(); console.log(users); // [{ id: 1, name: 'Shashank' }, ...] // Get a single user by id const user = await fetch('https://api.example.com/users/42'); const data = await user.json(); // Get with query parameters (filtering, pagination) const filtered = await fetch('https://api.example.com/users?role=developer&page=1&limit=10'); const devs = await filtered.json();

Update — Modifying Existing Data

The Update operation changes existing records. This is where you modify a user's name, update a product price, or change an order status. In REST APIs, you have two options: PUT (replace the entire resource) or PATCH (update only specific fields).

SQL — UPDATE

SQL — updating existing records
-- Update a single field UPDATE users SET role = 'admin' WHERE id = 42; -- Update multiple fields UPDATE users SET name = 'Shashank Shekhar', role = 'senior_developer', updated_at = NOW() WHERE id = 42; -- Update with a condition (bulk update) UPDATE users SET active = false WHERE last_login < '2024-01-01'; -- ⚠️ DANGER: Without WHERE, ALL rows are updated! -- UPDATE users SET role = 'intern'; ← updates EVERY user
⚠️ Always use WHERE with UPDATE and DELETE. Forgetting the WHERE clause is one of the most common and devastating mistakes in SQL. It will modify or remove every single row in the table. Always double-check before running.

REST API — PUT & PATCH

JavaScript — PUT vs PATCH for updates
// PUT — replace the ENTIRE resource (must send all fields) const putResponse = await fetch('https://api.example.com/users/42', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Shashank Shekhar', email: 'shashank@example.com', role: 'admin' // must include ALL fields }) }); // PATCH — update ONLY specific fields (partial update) const patchResponse = await fetch('https://api.example.com/users/42', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ role: 'admin' // only send the field you want to change }) });

Delete — Removing Data

The Delete operation removes records from your data store. In SQL this is the DELETE statement. In REST this is the DELETE HTTP method. Delete operations are idempotent — deleting the same resource twice has the same effect as deleting it once (the resource is gone).

SQL — DELETE

SQL — deleting records
-- Delete a specific user DELETE FROM users WHERE id = 42; -- Delete with a condition DELETE FROM users WHERE active = false AND last_login < '2023-01-01'; -- ⚠️ DANGER: Without WHERE, ALL rows are deleted! -- DELETE FROM users; ← deletes EVERY user -- Delete and return what was deleted (PostgreSQL) DELETE FROM users WHERE id = 42 RETURNING *;

REST API — DELETE

JavaScript — DELETE request to remove a resource
// Delete a user const response = await fetch('https://api.example.com/users/42', { method: 'DELETE' }); // Server responds with 204 No Content (success, empty body) if (response.status === 204) { console.log('User deleted successfully'); } // Always confirm before deleting in your UI function deleteUser(id) { if (!confirm('Are you sure you want to delete this user?')) return; return fetch(`https://api.example.com/users/${id}`, { method: 'DELETE' }); }

Frontend CRUD — A Complete Example

Here is how all four CRUD operations come together in a real frontend application — a simple user management module using JavaScript and fetch:

JavaScript — complete CRUD service
const API_URL = 'https://api.example.com/users'; // ── CREATE ────────────────────────────────────── async function createUser(userData) { const res = await fetch(API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(userData) }); if (!res.ok) throw new Error('Failed to create user'); return res.json(); // 201 Created } // ── READ ──────────────────────────────────────── async function getUsers() { const res = await fetch(API_URL); return res.json(); // 200 OK } async function getUser(id) { const res = await fetch(`${API_URL}/${id}`); if (!res.ok) throw new Error('User not found'); return res.json(); } // ── UPDATE ────────────────────────────────────── async function updateUser(id, updates) { const res = await fetch(`${API_URL}/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(updates) }); return res.json(); // 200 OK } // ── DELETE ────────────────────────────────────── async function deleteUser(id) { const res = await fetch(`${API_URL}/${id}`, { method: 'DELETE' }); return res.status === 204; // true if deleted } // ── Usage ─────────────────────────────────────── const user = await createUser({ name: 'Shashank', email: 's@example.com' }); const all = await getUsers(); await updateUser(user.id, { role: 'admin' }); await deleteUser(user.id);

Validation & Error Handling

CRUD operations should always include proper validation and error handling. Never trust client input. Validate on both the frontend (for UX) and the backend (for security).

JavaScript — CRUD with validation and error handling
// Frontend validation before CREATE function validateUser(data) { const errors = []; if (!data.name || data.name.length < 2) errors.push('Name must be at least 2 characters'); if (!data.email || !data.email.includes('@')) errors.push('Valid email is required'); return errors; } // Error handling wrapper async function safeFetch(url, options) { try { const res = await fetch(url, options); if (!res.ok) { const error = await res.json(); throw new Error(error.message || `HTTP ${res.status}`); } return res.status === 204 ? null : res.json(); } catch (err) { console.error('API Error:', err.message); throw err; } }

Soft Delete vs Hard Delete

There are two ways to delete data. A hard delete permanently removes the row from the database. A soft delete marks the row as deleted (usually with a deleted_at timestamp) but keeps it in the database. Most production applications use soft delete because it allows recovery and audit trails.

SQL — soft delete vs hard delete
-- HARD DELETE — row is permanently gone DELETE FROM users WHERE id = 42; -- SOFT DELETE — row stays, but is marked as deleted UPDATE users SET deleted_at = NOW() WHERE id = 42; -- When reading, exclude soft-deleted rows SELECT * FROM users WHERE deleted_at IS NULL; -- Restore a soft-deleted user UPDATE users SET deleted_at = NULL WHERE id = 42;
AspectHard DeleteSoft Delete
Data recoveryImpossibleEasy
StorageSaves spaceUses more space
Audit trailLostPreserved
Query complexitySimpleNeeds WHERE filter
GDPR complianceFully compliantMay need extra steps

Quick Reference

OperationSQLHTTPStatus CodeIdempotent
CreateINSERTPOST201 CreatedNo
ReadSELECTGET200 OKYes
UpdateUPDATEPUT / PATCH200 OKPUT: Yes / PATCH: No
DeleteDELETEDELETE204 No ContentYes

⚡ Key Takeaways
  • CRUD stands for Create, Read, Update, Delete — the four fundamental operations you can perform on any data. Every app, every API, every database uses them.
  • Create maps to SQL INSERT, HTTP POST, and returns 201 Created. POST is not idempotent — sending the same request twice can create duplicates.
  • Read maps to SQL SELECT and HTTP GET. It is safe and idempotent — it never modifies data. Use query parameters for filtering, sorting and pagination.
  • Update maps to SQL UPDATE. In REST, use PUT to replace the entire resource or PATCH to update specific fields. Always include a WHERE clause in SQL.
  • Delete maps to SQL DELETE and HTTP DELETE. It is idempotent. Consider soft delete (marking as deleted) over hard delete (permanent removal) for production apps.
  • Always validate input on both frontend and backend. Never trust client data. Handle errors gracefully with try/catch and meaningful error messages.
  • Never forget the WHERE clause in UPDATE and DELETE statements — without it, you will modify or remove every row in the table.
📄
Save This Guide as a PDF A one-page cheat sheet covering all CRUD operations across SQL, REST APIs and JavaScript. Great for quick reference.
PDF  ·  1 page  ·  Free
Shashank Shekhar
Shashank Shekhar
Founder & Creator — Hoopsiper.com

Full stack developer and educator. Building Hoopsiper to help developers learn faster through practical, no-fluff coding guides on JavaScript, AI/ML, Python and modern web development.

More from Dev Trends

  • Web Dev: HTTP Methods Explained — GET, POST, PUT, DELETE and more, with real fetch() examples.
  • JavaScript: Async Patterns — Callbacks, Promises and async/await explained clearly with real examples.
  • Frontend: Semantic HTML and Modular CSS — Write meaningful HTML and clean CSS that stays organised.