Skip to main content
Log in

A large-scale empirical study of code smells in JavaScript projects

  • Published:
Software Quality Journal Aims and scope Submit manuscript

Abstract

JavaScript is a powerful scripting programming language that has gained a lot of attention this past decade. Initially used exclusively for client-side web development, it has evolved to become one of the most popular programming languages, with developers now using it for both client-side and server-side application development. Similar to applications written in other programming languages, JavaScript applications contain code smells, which are poor design choices that can negatively impact the quality of an application. In this paper, we perform a large-scale study of JavaScript code smells in server-side and client-side applications, with the aim to understand how they impact the fault-proneness of applications, and how they are evolved by the developers of the applications. We detect 12 types of code smells in 1807 releases of 15 popular JavaScript applications (i.e., express, grunt, bower, less.js, request, jquery, vue, ramda, leaflet, hexo, chart, webpack, webtorrent, moment, and riot) and perform survival analysis, comparing the time until a fault occurrence, in files containing code smells and files without code smells. We also examine the introduction and removal of the code smells in the applications using survival models. All our analysis are conducted at the granularity of the line of code. Results show that (1) on average, files without code smells have hazard rates at least 33% lower than files with code smells. (2) Among the studied smells, “Variable Re-assign,” “Assignment In Conditional statements,” and “Complex Code” smells have the highest fault hazard rates. (3) Code smells, and particularly “Variable Re-assign,” are often introduced in the application when the files containing them are created. Moreover, they tend to remain in the applications for a long period of time; “Variable Re-assign” is also the most prevalent code smell. Overall, code smells affect negatively the quality of JavaScript applications and developers should consider tracking and removing them early on before the release of applications to the public.

This is a preview of subscription content, log in via an institution to check access.

Access this article

Price excludes VAT (USA)
Tax calculation will be finalised during checkout.

Instant access to the full article PDF.

Fig. 1
Fig. 2
Fig. 3
Fig. 4
Fig. 5
Fig. 6
Fig. 7
Fig. 8
Fig. 9
Fig. 10
Fig. 11
Fig. 12
Fig. 13
Fig. 14
Fig. 15
Fig. 16
Fig. 17
Fig. 18
Fig. 19
Fig. 20

Similar content being viewed by others

Notes

  1. https://github.com/expressjs/express

  2. https://expressjs.com/en/resources/companies-using-express.html

  3. https://github.com/bower/bower

  4. https://engineering.twitter.com/opensource

  5. https://github.com/less/less.js

  6. Cascading Style Sheet

  7. https://github.com/request/request

  8. https://github.com/gruntjs/grunt

  9. https://github.com/jquery/jquery

  10. https://github.com/vuejs/vue

  11. https://github.com/ramda/ramda

  12. https://github.com/Leaflet/Leaflet

  13. https://github.com/hexojs/hexo

  14. https://github.com/chartjs/Chart.js

  15. https://github.com/webpack/webpack

  16. https://github.com/webtorrent/webtorrent

  17. https://github.com/moment/moment

  18. https://github.com/riot/riot

  19. https://github.com/DavidJohannesWall/smells_project

  20. https://github.com/mishoo/UglifyJS

  21. http://eslint.org/

  22. https://github.com/eslint/espree

  23. https://github.com/estree/estree

  24. https://docs.python.org/2/library/difflib.html

  25. https://github.com/DavidJohannesWall/smells_project

References

  • Abbes, M., Khomh, F., Guéhéneuc, Y.-G., Antoniol, G. (2011). An empirical study of the impact of two antipatterns, blob and spaghetti code, on program comprehension. In 2011 15th European conference on software maintenance and reengineering (CSMR) (pp. 181–190).

  • Bower. (2016). About Bower [Online; accessed 4-October-2016]. [Online]. Available: https://bower.io/docs/about/.

  • GitHub. (2016a). Airbnb JavaScript style guide [Online; accessed 17-October-2016]. [Online]. Available: https://github.com/airbnb/javascript.

  • Baxter, I.D., Yahin, A., Moura, L., Sant’Anna, M., Bier, L. (1998). Clone detection using abstract syntax trees. In 1998. Proceedings of the International Conference on Software Maintenance. IEEE (pp. 368–377).

  • Brodu, E., Frénot, S., Oblé, F. (2015). Toward automatic update from callbacks to promises. In Proceedings of the 1st Workshop on All-Web Real-Time Systems. ACM (p. 1).

  • Chatzigeorgiou, A., & Manakos, A. (2010). Investigating the evolution of bad smells in object-oriented code. In 2010 7th International Conference on the Quality of Information and Communications Technology (QUATIC). IEEE (pp. 106–115).

  • D’Ambros, M., Bacchelli, A., Lanza, M. (2010). On the impact of design flaws on software defects. In 2010 10th International Conference on Quality Software (QSIC). IEEE (pp. 23–31).

  • da Costa, D.A., McIntosh, S., Shang, W., Kulesza, U., Coelho, R., Hassan, A. E. (2017). A framework for evaluating the results of the szz approach for identifying bug-introducing changes. IEEE Transactions on Software Engineering, 43 (7), 641–657.

    Article  Google Scholar 

  • Eslint. (2015). The pluggable linting utility for javascript and jsx. http://eslint.org/.

  • Fard, A.M., & Mesbah, A. (2013). Jsnose: Detecting javascript code smells. In 2013 IEEE 13th International Working Conference on Source Code Analysis and Manipulation (SCAM). IEEE (pp. 116– 125).

  • Fischer, M., Pinzger, M., Gall, H. (2003). Populating a release history database from version control and bug tracking systems. In 2003. ICSM 2003. Proceedings. International Conference on Software Maintenance. IEEE (pp. 23–32).

  • Fontana, F.A., Braione, P., Zanoni, M. (2012). Automatic detection of bad smells in code: an experimental assessment. Journal of Object Technology, 11(2), 5–1.

    Google Scholar 

  • Fowler, M. (1997). Refactoring: improving the design of existing code. In 11th European Conference. Jyväskylä, Finland.

  • Fox, J., & Weisberg, S. (2010). An R companion to applied regression Sage.

  • Gallaba, K., Mesbah, A., Beschastnikh, I. (2015). Don’t call us, we’ll call you: characterizing callbacks in Javascript. In 2015 ACM/IEEE International Symposium on Empirical Software Engineering and Measurement (ESEM). IEEE (pp. 1–10).

  • Gatrell, M., & Counsell, S. (2015). The effect of refactoring on change and fault-proneness in commercial c# software. Science of Computer Programming, 102, 44–56.

    Article  Google Scholar 

  • Gamma, E., Helm, R., Johnson, R., Vlissides, J. (1995). Design patterns: elements of reusable object oriented software.

  • GitHut. (2016). Discover languages in GitHub [Online; accessed 11-August-2016]. [Online]. Available: http://githut.info/.

  • Jaafar, F., Guéhéneuc, Y.-G., Hamel, S., Khomh, F. (2013). Mining the relationship between anti-patterns dependencies and fault-proneness. In WCRE (pp. 351–360).

  • jQuery. (2016). jQuery JavaScript style guide [Online; accessed 17-October-2016]. [Online]. Available: https://contribute.jquery.org/style-guide/js/.

  • JSLint. (2019). JSLint: the JavaScript code quality tool. http://www.jslint.com.

  • JSHint. (2019). JSHint: a static code analysis tool for JavaScript. http://jshint.com/.

  • Khomh, F., Vaucher, S., Guéhéneuc, Y.-G., Sahraoui, H. (2011). BDTEX: a GQM-based Bayesian approach for the detection of antipatterns. Journal of Systems and Software, 84(4), 559– 572.

    Article  Google Scholar 

  • Khomh, F., Penta, M.D., Guéhéneuc, Y.-G., Antoniol, G. (2012). An exploratory study of the impact of antipatterns on class change- and fault-proneness. Empirical Software Engineering, 17(3), 243–275. [Online]. Available: https://doi.org/10.1007/s10664-011-9171-y.

    Article  Google Scholar 

  • Khomh, F., Di Penta, M., Guéhéneuc, Y.-G., Antoniol, G. (2012). An exploratory study of the impact of antipatterns on class change-and fault-proneness. Empirical Software Engineering, 17(3), 243–275.

    Article  Google Scholar 

  • Koru, A.G., Zhang, D., Liu, H. (2007). Modeling the effect of size on defect proneness for open-source software. In Proceedings of the 3rd International Workshop on Predictor Models in Software Engineering. IEEE Computer Society (p. 10).

  • Koru, A. G., El Emam, K., Zhang, D., Liu, H., Mathew, D. (2008). Theory of relative defect proneness. Empirical Software Engineering, 13(5), 473–498.

    Article  Google Scholar 

  • Mardan, A. (2014). Express.. js Guide: the comprehensive book on express. js. Azat Mardan.

  • Marinescu, R. (2004). Detection strategies: metrics-based rules for detecting design flaws. In 2004. Proceedings. 20th IEEE International Conference on Software Maintenance. IEEE (pp. 350–359).

  • Marinescu, R., & Lanza, M. (2006). Object-oriented metrics in practice.

  • Mazinanian, D., & Tsantalis, N. (2016). Migrating cascading style sheets to preprocessors by introducing mixins. In Proceedings of the 31st IEEE/ACM International Cconference on Automated Software Engineering. ACM (pp. 672–683).

  • McCabe, T.J. (1976). A complexity measure. IEEE Transactions on software Engineering, 4, 308–320.

    Article  MathSciNet  MATH  Google Scholar 

  • Neamtiu, I., Foster, J.S., Hicks, M. (2005). Understanding source code evolution using abstract syntax tree matching. ACM SIGSOFT Software Engineering Notes, 30 (4), 1–5.

    Article  Google Scholar 

  • Nguyen, H.V., Nguyen, H.A., Nguyen, T.T., Nguyen, A.T., Nguyen, T.N. (2012). Detection of embedded code smells in dynamic web applications. In 2012 Proceedings of the 27th IEEE/ACM International Conference on Automated Software Engineering (ASE). IEEE (pp. 282–285).

  • GitHub. (2016b). Node.js style guide [Online; accessed 17-October-2016]. [Online]. Available: https://github.com/felixge/node-style-guide.

  • NpmJS. (2016). npm-coding-style [Online; accessed 17-October-2016]. [Online]. Available: https://docs.npmjs.com/misc/coding-style.

  • Olbrich, S., Cruzes, D.S., Basili, V., Zazworka, N. (2009). The evolution and impact of code smells: a case study of two open source systems. In 3rd International Symposium on Empirical Software Engineering and Measurement, ESEM 2009 (pp. 390–400).

  • Palomba, F., Bavota, G., Di Penta, M., Fasano, F., Oliveto, R., De Lucia, A. (2018). On the diffuseness and the impact on maintainability of code smells: a large scale empirical investigation. Empirical Software Engineering, 23(3), 1188–1221.

    Article  Google Scholar 

  • Peters, R., & Zaidman, A. (2012). Evaluating the lifespan of code smells using software repository mining. In 2012 16th European Conference on Software Mmaintenance and Reengineering (CSMR). IEEE (pp. 411–416).

  • Pfenning, F., & Elliott, C. (1988). Higher-order abstract syntax. In ACM SIGPLAN Notices, vol. 23, no. 7. ACM (pp. 199–208).

  • Saboury, A., Musavi, P., Khomh, F., Antoniol, G. (2017). An empirical study of code smells in JavaScript projects. In 2017 IEEE 24th International Conference on Software Analysis, Evolution and Reengineering (SANER), IEEE (pp. 294–305).

  • Selim, G.M., Barbour, L., Shang, W., Adams, B., Hassan, A.E., Zou, Y. (2010). Studying the impact of clones on software defects. In 2010 17th Working Conference on Reverse Engineering. IEEE (pp. 13–21).

  • Shatnawi, R., & Li, W. (2006). An investigation of bad smells in object-oriented design. In 2006. ITNG 2006. 3rd International Conference on Information Technology: New Generations. IEEE (pp. 161–165).

  • Shihab, E., Ihara, A., Kamei, Y., Ibrahim, W. M., Ohira, M., Adams, B., Hassan, A. E., Matsumoto, K.-I. (2013). Studying re-opened bugs in open source software. Empirical Software Engineering, 18(5), 1005–1042.

    Article  Google Scholar 

  • Singer, J.D., & Willett, J.B. (2003). Applied longitudinal data analysis: modeling change and event occurrence, Oxford University Press, Oxford.

  • Sjoberg, D.I.K., Yamashita, A., Anda, B., Mockus, A., Dyba, T. (2013). Quantifying the effect of code smells on maintenance effort. IEEE Transactions on Software Engineering, 39(8), 1144–1156.

    Article  Google Scholar 

  • Stackoverflow. (2016). Developer survey results 2016, [Online; accessed 11-August-2016]. [Online]. Available: http://stackoverflow.com/research/developer-survey-2016.

  • Śliwerski, J., Zimmermann, T., Zeller, A. (2005). When do changes induce fixes?. In ACM Sigsoft Software Engineering Notes, vol. 30, no. 4. ACM (pp. 1–5).

  • Therneau, T. (2000). R survival package.

  • Therneau, T.M., & Grambsch, P.M. (2000). Modeling survival data: extending the Cox model. Berlin: Springer.

    Book  MATH  Google Scholar 

  • Tufano, M., Palomba, F., Bavota, G., Oliveto, R., Di Penta, M., De Lucia, A., Poshyvanyk, D. (2015). When and why your code starts to smell bad. In Proceedings of the 37th International Conference on Software Engineering-volume 1. IEEE Press (pp. 403–414).

  • Westergaard, H. (1932). Contributions to the history of statistics. London: P.S King.

    MATH  Google Scholar 

  • Grunt. (2016). Who uses grunt [Online; accessed 4-October-2016]. [Online]. Available: http://gruntjs.com/who-uses-grunt.

  • Yin, R.K. (2002). Case study research: design and methods, 3rd, SAGE Publications, USA.

Download references

Author information

Authors and Affiliations

Authors

Corresponding author

Correspondence to Foutse Khomh.

Additional information

Publisher’s note

Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.

Rights and permissions

Reprints and permissions

About this article

Check for updates. Verify currency and authenticity via CrossMark

Cite this article

Johannes, D., Khomh, F. & Antoniol, G. A large-scale empirical study of code smells in JavaScript projects. Software Qual J 27, 1271–1314 (2019). https://doi.org/10.1007/s11219-019-09442-9

Download citation

  • Published:

  • Issue Date:

  • DOI: https://doi.org/10.1007/s11219-019-09442-9

Keywords

Navigation