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

The detection of code smells.
The evolution of code smells in software systems and their impact on software quality.
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

Extra Bind
This Assign
Assignment in Conditional Statements
Variable Re-assign
Lengthy Lines
Chained Methods
Long Parameter List
Nested Callbacks
Complex code
Long Methods
Complex Switch Case
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

On the fault-proneness of

JavaScript Code Smells

Outline

JavaScript

Code Smell

Research Objectives

RQ1

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

RQ2

Are JavaScript files with code smells equally fault-prone?

JavaScript Code Smells

Types of Code Smells

JSNose

#1

Lengthy Lines

#2

Chained Methods

#3

Long Parameter List

#4

Nested Callbacks

#5

Variable Re-assign

#6

Assignment in Conditional Statements

#7

Complex code

#8

Extra Bind

#9

"this" Assign

#10

Long Methods

#11

Complex Switch Case

#12

Depth

Methodology & Design

Studied Systems

Data Extraction

Abstract Source Tree

Data Extraction

Data Extraction

Code Smell Detection

Code Smell Detection

Data Extraction

Survival Analysis

Survival Analysis

Data Extraction

Study Results

RQ1

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

Approach

Time:

Covariate of interest:

Event:

Study Results

RQ2

Are JavaScript files with code smells equally fault-prone?

Approach

Discussion

Survey

Survey

Survey

Conclusion

Limitations

Copy of js-smell

More from amir

Are JavaScript files with code smells
equally fault-prone?

Are JavaScript files with code smells
equally fault-prone?