DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

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

Create account Log in
Cover image for Code Smell 90 - Implementative Callback Events
Maxi Contieri
Maxi Contieri

Posted on • Originally published at maximilianocontieri.com

Code Smell 90 - Implementative Callback Events

When creating events, we should decouple the trigger from the action.

TL;DR: Name your functions acording to what happened.

Problems

Solutions

  1. Name the events after "what happened", not "what you should do"

Sample Code

Wrong

const Item = ({name, handlePageChange)} =>
  <li onClick={handlePageChange}>
    {name}
  </li>

//handlePageChange is coupled to what you decide to do
//instead of what really happened
//
//We cannot reuse this kind of callbacks
Enter fullscreen mode Exit fullscreen mode

Right

const Item = ({name, onItemSelected)} =>
  <li onClick={onItemSelected}>
    {name}
  </li>

//onItemSelected will be called just when a item was selected. KISS
//Parent can decide what to do (or do nothing)
//We defer the decision
Enter fullscreen mode Exit fullscreen mode

Detection

This is a semantic smell. We can detect it on peer code reviews.

Tags

  • Coupling

  • Naming

Conclusion

Names are very important. We should delay implementation coupled names until the very last moment.

More Info

Credits

Photo by Ashim D’Silva on Unsplash

Thanks to @macsikora for this tip


Beyond basic mathematical aptitude, the difference between good programmers and great programmers is verbal ability.

Marissa Mayer


This article is part of the CodeSmell Series.

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!