On the fault-proneness of

JavaScript Code Smells

Amir Saboury

December 2016

Outline

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

JavaScript

  • Introduction & B ackground
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Code Smell

The pieces of the codes that scream out to be refactored

 – Martin Fowler

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Research Objectives

RQ1

Is the risk of fault higher in files with code smells in comparison with those without smell?

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

RQ2

Are JavaScript files with code smells
equally fault-prone?

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

JavaScript Code Smells

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations
  1. The detection of code smells.
  2. The evolution of code smells in software systems and their impact on software quality.
  3. The relationship between code smells and software development activities.

Types of Code Smells

JSNose

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#1

Lengthy Lines

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#2

Chained Methods

$('a').find('span').attr('id', 'title').end().click();
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#3

Long Parameter List

move(x1, y1, x2, y2, direction, speed, steps, onFinish)
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#4

Nested Callbacks

$.get('/info.json', function (err, data) {
    log(data, function (err, data) {
        // ...
    });
});
    
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#5

Variable Re-assign

function parse(url) {
    url = url.split('/');
    // ...
}
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#6

Assignment in Conditional Statements

if (element = stack.pop()){
    element.addClass("last");
}
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#7

Complex code

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

cyclomatic complexity

#8

Extra Bind

var download = function (url) {
    var callback = function (err, data) {
        // this.data = data;
        console.log(data);
    }.bind(this);
    $get(url, callback);
}
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#9

"this" Assign

var download = function (url) {
    var self = this;
    var callback = function (err, data) {
        self.error = err;
        self.data = data;
    }
    $get(url, callback);
}
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#10

Long Methods

* https://sourcemaking.com/refactoring
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#11

Complex Switch Case

* https://sourcemaking.com/refactoring
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

#12

Depth

var download = function (url) {
    if (url) {
        $get(url, function(err, data) {
            if (!err) {
                if (data.includes('http')) {
                    //...
                }
            }
        });
    }
}
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Methodology & Design

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Studied Systems, Data Extraction, Analysis

Studied Systems

  • Express Web framework
  • Request HTTP client utility
  • Less.js CSS pre-processor
  • Bower.io Package manager
  • Grunt Task Runner
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Data Extraction

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations
var a = 42;
var b = 5;
function addA(d) {
  return a + d;
}
var c = addA(2) + b;

Abstract Source Tree

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Data Extraction

File

comit
comit
comit
comit
comit
bug inducing
bug fixing
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Data Extraction

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Code Smell Detection

  1. Extra Bind
  2. This Assign
  3. Assignment in Conditional Statements
  4. Variable Re-assign
  5. Lengthy Lines
  6. Chained Methods
  7. Long Parameter List
  8. Nested Callbacks
  9. Complex code
  10. Long Methods
  11. Complex Switch Case
  12. Depth

Boolean

Number

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Code Smell Detection

Metrics

Code Smells

grunt - nested callbacks
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Data Extraction

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Survival Analysis

Models how long subjects under observation can survive before the occurrence of an event of interest.

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Cox Proportional Hazard Model

Survival Analysis

Cox Proportional Hazard Model

  • Subjects can remain in the model for the entire observation period.
  • Subjects can be grouped according to a covariate (smelly or non-smelly).
  • The characteristics of the subjects might change during the observation period (e.g., size of code).
  • Cox hazard models are adapted for events that are recurrent.
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Data Extraction

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Study Results

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

RQ1

Is the risk of fault higher in files with code smells in comparison with those without smell?

Approach

Time:

The number of hours between the previous revision and the revision r.

For each file f and revision r:

Covariate of interest:

The presence of a code smell in the file f in the revision r.

Event:

Is the revision r a fault-fixing change?

survfit & coxph
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

There is no difference between the probability of a fault occurrence in a file containing code smells and a file without code smells.

Null hypotheses:

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Request

Less.js

Grunt

Express

Bower

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Log-rank Test

(which compares the survival distributions of two samples)

p-value < 0.05

hypothesis rejected

JavaScript files without code smells have hazard rates 65% lower than JavaScript files with code smells and this difference is statistically significant.
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Study Results

RQ2

Are JavaScript files with code smells
equally fault-prone?

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Approach

Time, Event

Smelly i

If the file has the code smell type i

LOC, Code Churn, and the number of past bugs

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

The hazard ratios of the studied code smells vary across the systems

Express

Chained Methods, This Assign, Variable Re-assign, and #Past-bugs

Grunt

Nested Callbacks, Assignment in Conditional Statements, and Variable Re-assign

Bower

Depth, #Past-bugs, and LOC

Less.js

Assignment in Conditional Statements, and #Past-bugs

Request

Variable Re-assign, and #Past-bugs

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations
JavaScript files containing different types of code smells are not equally fault-prone.
Developers should consider refactoring files containing "Variable Re-assign" code smell and "Assignment in Conditional Statements" code smell in priority since they seem to increase the risk of faults in the system.
  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Discussion

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Survey

https://srvy.online

Shared in HackerNews & EchoJS

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Survey

1484

Participants

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Survey

92% used JS for client-side applications

51% used JS for server-side applications

68% 3+ years of experience with JavaScript

Nested Callbacks (8.1/10)

Variable Re-assign (6.5/10)

Long Parameter List (6.2/10)

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Conclusion

Quantitative study of 5 JavaScript systems

JS files without code smells have hazard rates 65% lower than JavaScript files with code smells

"Variable Re-assign" and "Assignment in Cond. Statements" code smells have the highest hazard rates

Qualitative study with 1484 JS developers

Nested Callbacks, Variable Re-assign, Long Parameter List

  • Introduction & Background
  • Research Objectives
  • Literature Review
  • Methodology & Design
  • Study Results
  • Discussion
  • Conclusion
  • Limitations

Limitations

  • Findings bug-fixing commits ("bug", "fix", "defect" etc)

  • SZZ heuristic

  • Presence of the smell in the file as a whole

  • AST provided by ESLint

  • Logarithmic link function

  • 5 JS Systems

?

Thank you

Copy of js-smell

By amir

Copy of js-smell

  • 658
Loading comments...

More from amir