This document discusses several common Javascript anti-patterns: 1) Lack of separation of concerns where modules take on too many responsibilities like fetching data, rendering DOM elements, and attaching event handlers. 2) Callback hell where asynchronous code leads to nested callbacks that are difficult to read and maintain. 3) Explicit coupling where modules depend directly on other modules rather than their abstractions. 4) Implicit coupling where modules rely on global events or objects without a clear connection that can make code hard to understand and test.

1.
Javascript Anti Patterns
Varun Grover

2.
Lack of ­ Separation of concerns
//XYZ module
(function(){
//i first have to get some data from server
//then i have to create a dom using a template and applying this data
//finally i have to attach some event handlers to this
//of course the event handlers are also defined here in this module
})();

3.
Too many responsibilities
//XYZ module
(function(){
//i have to listen to an event
//on event, i have to get some data from server
//on data, i have to process the response data payload. else on error, i
have to raise another event
//using processed data, i have to render some DOM.
//i shall also handle the DOM events for this DOM.
//on some interactions, e.g, a mouse move / drag-drop, i shall do further
stuff (eg. handle the dom changes, updating some data etc).
})();

4.
I love Singletons / lot of privacy
//XYZ module
(function(){
//at parse time, i do some stuff
//then i create an object which has a really primitive public API
//finally i return this object
//(lets all pray that there are no unexpected side effects)
})();

5.
Callback Hell
//XYZ module
(function(){
getDataFromServer(function(){
asynchronouslyRenderListOfItems(function(){
raiseOnRenderComplete();
});
});
})();

6.
Lack of callback hooks
//XYZ module
(function(){
//i first have to get some data from server
//then i have to create a dom using a template and applying this data
//i have to attach some event handlers to this
//finally i append it to the dom
})();

7.
Coupling event handler and logic
//XYZ module
(function(){
//i find the form and then bind to click of its submit button
$(form [type=submit]).click(function(){
validateForm();
submitFormViaAjax();
})
})();

8.
Explicit Coupling is not good
function MyRotatorComponent(id) {
var contentElements = $(”.cta”);
contentElements.each(function(){
new CTA(this);
});
}

9.
Implicit Coupling is WORSE!!
(function($){
function getSomeData(){
bindWithAnticipatedEvent
requestForData();
}
function bindWithAnticipatedEvent() {
//listen for an event that signals arrival of data
listen(a-verbose-event-name-string-that-makes-it-unique-in-the-system, doSomethingWithData);
//What the hell .. who is this stranger whom i need to depend upon for my core functionality
//how do i find it
//what if there are multiple strangers capable of sending this event
//am i then dependent on all / any one of them.. how is that determined
}
function requestForData() {
//raise an event and
}
function doSomethingWithData() {
//
}