[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"4551628":3},{"type_of":4,"id":5,"title":6,"description":7,"readable_publish_date":8,"slug":9,"path":10,"url":11,"comments_count":12,"public_reactions_count":13,"collection_id":14,"published_timestamp":15,"language":16,"subforem_id":17,"ai_disclosure_level":18,"ai_disclosure_label":19,"positive_reactions_count":13,"cover_image":20,"social_image":21,"canonical_url":11,"created_at":15,"edited_at":14,"crossposted_at":14,"published_at":15,"last_comment_at":15,"reading_time_minutes":17,"tag_list":22,"tags":23,"body_html":28,"body_markdown":29,"user":30},"article",4551628,"JavaScript Callbacks","A callback function is a function that is passed as an argument to another function and executed...","Sep 2","javascript-callbacks-3nic","/karthick_07/javascript-callbacks-3nic","https://dev.to/karthick_07/javascript-callbacks-3nic",0,3,null,"2026-09-02T03:24:30Z","en",1,"no_ai","No AI","https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fll93p2ai8l0e4jxnvo9l.png","https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fll93p2ai8l0e4jxnvo9l.png","javascript, javascriptlibraries, vue, react",[24,25,26,27],"javascript","javascriptlibraries","vue","react","\u003Cp>A \u003Cstrong>callback function\u003C/strong> is a function that is passed as an argument to another function and executed later.\u003C/p>\n\n\u003Col>\n\u003Cli>\u003Cp>A function can accept another function as a parameter.\u003C/p>\u003C/li>\n\u003Cli>\u003Cp>Callbacks allow one function to call another at a later time.\u003C/p>\u003C/li>\n\u003Cli>\u003Cp>A callback function can execute after another function has finished.\u003Cbr>\n\u003C/p>\u003C/li>\n\u003C/ol>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">greet\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">name\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">callback\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">console\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">log\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"s2\">Hello, \u003C/span>\u003Cspan class=\"dl\">\"\u003C/span> \u003Cspan class=\"o\">+\u003C/span> \u003Cspan class=\"nx\">name\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n    \u003Cspan class=\"nf\">callback\u003C/span>\u003Cspan class=\"p\">();\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">sayBye\u003C/span>\u003Cspan class=\"p\">()\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">console\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">log\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"s2\">Goodbye!\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\n\u003Cspan class=\"nf\">greet\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"s2\">Ajay\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">sayBye\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>Working of Callbacks in JavaScript\u003C/strong>\u003C/p>\n\n\u003Cp>JavaScript executes code line by line (synchronously), but sometimes we need to delay execution or wait for a task to complete before running the next function. Callbacks help achieve this by passing a function that is executed later.\u003C/p>\n\n\u003Cp>Callbacks for Asynchronous Execution\u003Cbr>\n\u003C/p>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"nx\">console\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">log\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"s2\">Start\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n\n\u003Cspan class=\"nf\">setTimeout\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nf\">function \u003C/span>\u003Cspan class=\"p\">()\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n    \u003Cspan class=\"nx\">console\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">log\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"s2\">Inside setTimeout\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">},\u003C/span> \u003Cspan class=\"mi\">2000\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n\n\u003Cspan class=\"nx\">console\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">log\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"s2\">End\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>When to Use and Avoid Callbacks\u003C/strong>\u003Cbr>\n\u003Cstrong>Use callbacks when\u003C/strong>\u003C/p>\n\n\u003Cul>\n\u003Cli>Handling asynchronous tasks (API calls, file reading).\u003C/li>\n\u003Cli>Implementing event-driven programming.\u003C/li>\n\u003Cli>Creating higher-order functions.\u003C/li>\n\u003C/ul>\n\n\u003Cp>\u003Cstrong>Avoid callbacks when:\u003C/strong>\u003C/p>\n\n\u003Cul>\n\u003Cli>Code becomes nested and unreadable (use Promises or async/await).\u003C/li>\n\u003Cli>You need error handling in asynchronous operations (Promises are better).\u003C/li>\n\u003C/ul>\n\n","A **callback function** is a function that is passed as an argument to another function and executed later.\n\n1. A function can accept another function as a parameter.\n\n2. Callbacks allow one function to call another at a later time.\n\n3. A callback function can execute after another function has finished.\n\n```javascript\nfunction greet(name, callback) {\n    console.log(\"Hello, \" + name);\n    callback();\n}\n\nfunction sayBye() {\n    console.log(\"Goodbye!\");\n}\n\ngreet(\"Ajay\", sayBye);\n\n```\n**Working of Callbacks in JavaScript**\n\nJavaScript executes code line by line (synchronously), but sometimes we need to delay execution or wait for a task to complete before running the next function. Callbacks help achieve this by passing a function that is executed later.\n\nCallbacks for Asynchronous Execution\n\n\n```javascript\nconsole.log(\"Start\");\n\nsetTimeout(function () {\n    console.log(\"Inside setTimeout\");\n}, 2000);\n\nconsole.log(\"End\");\n```\n\n**When to Use and Avoid Callbacks**\n**Use callbacks when**\n\n- Handling asynchronous tasks (API calls, file reading).\n- Implementing event-driven programming.\n- Creating higher-order functions.\n\n**Avoid callbacks when:**\n\n- Code becomes nested and unreadable (use Promises or async/await).\n- You need error handling in asynchronous operations (Promises are better).\n\n",{"name":31,"username":32,"twitter_username":14,"github_username":14,"user_id":33,"website_url":34,"profile_image":35,"profile_image_90":36},"Karthick (k)","karthick_07",3924592,"https://new-portfolio-ae42b2.gitlab.io/","https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3924592%2Fc7d24a28-37c4-4afc-af8e-88377a701cba.png","https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3924592%2Fc7d24a28-37c4-4afc-af8e-88377a701cba.png",1788519848647]