Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for What is Callback Hell?
Ekaterine Mitagvaria
Ekaterine Mitagvaria

Posted on • Edited on

     

What is Callback Hell?

In programming, callback hell refers to an ineffective way of writing asynchronous code and overusing callbacks. It takes place when you nest functions and create too many levels of nesting. This makes it harder to control access to the specific function and it becomes harder to debug the issues.
Nesting means placing one function in another, placing the third function in the second, then the fourth in the third function, and so on. By placing the callback function in another callback, then again another callback in another callback, in more complex applications, callback logic might get too messy! This type of nesting visually looks like a pyramid which is why callback hell is also called a pyramid of doom. 👹

Before reading further, get familiar with thecallbacks first.

Let’s remember what the callback function is in action while we prepare some Italian Moka coffee.

Buy some coffee before filling the boiler

Buy some coffee before filling the boiler

Fill the boiler before filling the funnel

Fill the boiler before filling the funnel

Fill the funnel before placing the pot on stove

Fill the funnel before placing the pot on stove

Place the pot on the stove before removing it

Place the pot on the stove before removing it

Remove the pot before pouring coffee

Remove the pot before pouring coffee

There you go, we made some coffee by using a callback function named nextAction in each of the functions. Each step will lead to the next, then to the next and so on - one action will not start until the previous one is done.

But what if I start preparing some salad where I have to go through 10x more steps? And what if I want to prepare soup? And maybe some more meals because I have many guests?

That’s why I will wrap all actions into one function and delegate this function task to my husband - so everything will be done by only him.

Callback hell

And here we got some callback hell wherefinalStep is nested insidestartPreparing which is nested insteadprepareFunnel which is nested insideprepareBoiler which is nested insideprepareMoka… Things can get even worse and imagine how hard it can be to debug this.

As a beginner, you might not stumble upon a callback hell anytime soon however do not fret! Once you do, as long as you know what it is you will be partly prepared. There are some ways to avoid this which I will explain later. For now, enjoy some coffee! ☕️

Top comments(4)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
joelbonetr profile image
JoelBonetR 🥇
Tech Lead/Team Lead. Senior WebDev.Intermediate Grade on Computer Systems-High Grade on Web Application Development-MBA (+Marketing+HHRR).Studied a bit of law, economics and design
  • Location
    Spain
  • Education
    Higher Level Education Certificate on Web Application Development
  • Work
    Tech Lead/Lead Dev
  • Joined

Nice post, keep it on! 😁

CollapseExpand
 
catherineisonline profile image
Ekaterine Mitagvaria
Self-taught front-end developer
  • Location
    Tbilisi, Georgia
  • Education
    Self-taught
  • Work
    Front-end developer
  • Joined

Thank you so much 👀

CollapseExpand
 
bunthorn01 profile image
ប៊ុនថន - Bunthorn
  • Joined

thank

CollapseExpand
 
catherineisonline profile image
Ekaterine Mitagvaria
Self-taught front-end developer
  • Location
    Tbilisi, Georgia
  • Education
    Self-taught
  • Work
    Front-end developer
  • Joined

🙌🏻

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Self-taught front-end developer
  • Location
    Tbilisi, Georgia
  • Education
    Self-taught
  • Work
    Front-end developer
  • Joined

More fromEkaterine Mitagvaria

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp