Implementing Clean Callback Patterns in JavaScript

{
  "title": "Implementing Clean Callback Patterns in JavaScript",
  "description": "Explore techniques for writing clean and manageable callbacks in your JavaScript projects to enhance readability.",
  "category": "JavaScript Cursor Rules",
  "rules": [
    {
      "name": "Avoid Deeply Nested Callbacks",
      "description": "Refactor deeply nested callbacks into named functions or use Promises to improve code readability and maintainability.",
      "examples": [
        {
          "bad": "getData(function(err, data) {\n  if (err) {\n    handleError(err);\n  } else {\n    processData(data, function(err, processedData) {\n      if (err) {\n        handleError(err);\n      } else {\n        saveData(processedData, function(err) {\n          if (err) {\n            handleError(err);\n          } else {\n            console.log('Data saved successfully!');\n          }\n        });\n      }\n    });\n  }\n});",
          "good": "function handleData(err, data) {\n  if (err) return handleError(err);\n  processData(data, handleProcessedData);\n}\n\nfunction handleProcessedData(err, processedData) {\n  if (err) return handleError(err);\n  saveData(processedData, handleSaveData);\n}\n\nfunction handleSaveData(err) {\n  if (err) return handleError(err);\n  console.log('Data saved successfully!');\n}\n\ngetData(handleData);"
        }
      ]
    },
    {
      "name": "Use Promises for Asynchronous Operations",
      "description": "Utilize Promises to handle asynchronous operations, allowing for cleaner and more manageable code.",
      "examples": [
        {
          "bad": "getData(function(err, data) {\n  if (err) {\n    handleError(err);\n  } else {\n    processData(data, function(err, processedData) {\n      if (err) {\n        handleError(err);\n      } else {\n        saveData(processedData, function(err) {\n          if (err) {\n            handleError(err);\n          } else {\n            console.log('Data saved successfully!');\n          }\n        });\n      }\n    });\n  }\n});",
          "good": "getData()\n  .then(processData)\n  .then(saveData)\n  .then(() => console.log('Data saved successfully!'))\n  .catch(handleError);"
        }
      ]
    },
    {
      "name": "Implement Async/Await Syntax",
      "description": "Use async/await syntax to write asynchronous code that is more readable and resembles synchronous code.",
      "examples": [
        {
          "bad": "getData(function(err, data) {\n  if (err) {\n    handleError(err);\n  } else {\n    processData(data, function(err, processedData) {\n      if (err) {\n        handleError(err);\n      } else {\n        saveData(processedData, function(err) {\n          if (err) {\n            handleError(err);\n          } else {\n            console.log('Data saved successfully!');\n          }\n        });\n      }\n    });\n  }\n});",
          "good": "async function processAsyncFlow() {\n  try {\n    const data = await getData();\n    const processedData = await processData(data);\n    await saveData(processedData);\n    console.log('Data saved successfully!');\n  } catch (err) {\n    handleError(err);\n  }\n}\n\nprocessAsyncFlow();"
        }
      ]
    },
    {
      "name": "Use Named Functions Instead of Anonymous Functions",
      "description": "Define named functions for callbacks to improve code readability and facilitate debugging.",
      "examples": [
        {
          "bad": "getData(function(err, data) {\n  if (err) {\n    handleError(err);\n  } else {\n    processData(data, function(err, processedData) {\n      if (err) {\n        handleError(err);\n      } else {\n        saveData(processedData, function(err) {\n          if (err) {\n            handleError(err);\n          } else {\n            console.log('Data saved successfully!');\n          }\n        });\n      }\n    });\n  }\n});",
          "good": "function handleData(err, data) {\n  if (err) return handleError(err);\n  processData(data, handleProcessedData);\n}\n\nfunction handleProcessedData(err, processedData) {\n  if (err) return handleError(err);\n  saveData(processedData, handleSaveData);\n}\n\nfunction handleSaveData(err) {\n  if (err) return handleError(err);\n  console.log('Data saved successfully!');\n}\n\ngetData(handleData);"
        }
      ]
    },
    {
      "name": "Handle Errors Gracefully in Callbacks",
      "description": "Implement proper error handling within callbacks to manage unexpected conditions effectively.",
      "examples": [
        {
          "bad": "getData(function(data) {\n  processData(data, function(processedData) {\n    saveData(processedData, function() {\n      console.log('Data saved successfully!');\n    });\n  });\n});",
          "good": "getData(function(err, data) {\n  if (err) return handleError(err);\n  processData(data, function(err, processedData) {\n    if (err) return handleError(err);\n    saveData(processedData, function(err) {\n      if (err) return handleError(err);\n      console.log('Data saved successfully!');\n    });\n  });\n});"
        }
      ]
    }
  ]
}