JS-0241 · Consider using arrow functions for callbacks

Consider using arrow functions for callbacks JS-0241

Anti-pattern

Minor

a year ago — a year old

Unexpected function expression

 37
 38
 39// Add document ready listener
 40$(document).ready(function () { 41 42    // Add manager-add button listener 43    $('#manager-add').on('click', function () { 44        // Get values from form 45        console.log("Manager button clicked"); 46        const name = $('#manager').val(); 47        const id = parseInt($('#manager-id').val()); 48        const email = $('#manager-email').val(); 49        const officeNumber = parseInt($('#manager-office').val()); 50 51        console.log("Manager", name, id, email, officeNumber); 52        // Create new manager object 53        try { 54            const manager = new Manager(name, id, email, officeNumber); 55            // Add manager to team array 56            team.push(manager); 57            // Clear form 58            $('#manager').val(''); 59            $('#manager-id').val(''); 60            $('#manager-email').val(''); 61            $('#manager-office').val(''); 62            // Add manager to team list 63            $('#team-list').append(creteListItem(manager)); 64        } catch (err) { 65            alert(err); 66        } 67    }); 68 69    $('#engineer-add').on('click', function () { 70        // Get values from form 71        const name = $('#engineer').val(); 72        const id = parseInt($('#engineer-id').val()); 73        const email = $('#engineer-email').val(); 74        const github = $('#engineer-github').val(); 75 76        console.log("Engineer", name, id, email, github); 77        // Create new manager object 78        try { 79            const engineer = new Engineer(name, id, email, github); 80            // Add manager to team array 81            team.push(engineer); 82            // Clear form 83            $('#engineer').val(''); 84            $('#engineer-id').val(''); 85            $('#engineer-email').val(''); 86            $('#engineer-github').val(''); 87            // Add manager to team list 88            $('#team-list').append(creteListItem(engineer)); 89        } catch (err) { 90            alert(err); 91        } 92    }); 93 94    $('#intern-add').on('click', function () { 95        // Get values from form 96        const name = $('#intern').val(); 97        const id = parseInt($('#intern-id').val()); 98        const email = $('#intern-email').val(); 99        const school = $('#intern-school').val();100101        console.log("Intern", name, id, email, school);102        // Create new manager object103        try {104            const intern = new Intern(name, id, email, school);105            // Add manager to team array106            team.push(intern);107            // Clear form108            $('#intern').val('');109            $('#intern-id').val('');110            $('#intern-email').val('');111            $('#intern-school').val('');112            // Add manager to team list113            $('#team-list').append(creteListItem(intern));114        } catch (err) {115            alert(err);116        }117    });118119120    $("#generate").on("click", function () {121        // Add download markdown as a file122        var element = document.createElement("a");123        let html = generateHTML(team);124        // Open a new window with the generated HTML125        var win = window.open();126        win.document.write(html);127        win.document.close();128    });129130    131    $("#download").on("click", function () {132        // Add download markdown as a file133        var element = document.createElement("a");134        let html = generateHTML(team);135        // Download generated html as a file136        // Open window to download file to local machine137        var file = new Blob([html], { type: 'text/html' });138        element.href = URL.createObjectURL(file);139        element.download = "team.html";140        element.click();141    });142});

Unexpected function expression

public/js/script.js

128    });
129
130    
131    $("#download").on("click", function () {132        // Add download markdown as a file133        var element = document.createElement("a");134        let html = generateHTML(team);135        // Download generated html as a file136        // Open window to download file to local machine137        var file = new Blob([html], { type: 'text/html' });138        element.href = URL.createObjectURL(file);139        element.download = "team.html";140        element.click();141    });142});

Unexpected function expression

public/js/script.js

117    });
118
119
120    $("#generate").on("click", function () {121        // Add download markdown as a file122        var element = document.createElement("a");123        let html = generateHTML(team);124        // Open a new window with the generated HTML125        var win = window.open();126        win.document.write(html);127        win.document.close();128    });129
130    
131    $("#download").on("click", function () {

Unexpected function expression

public/js/script.js

 91        }
 92    });
 93
 94    $('#intern-add').on('click', function () { 95        // Get values from form 96        const name = $('#intern').val(); 97        const id = parseInt($('#intern-id').val()); 98        const email = $('#intern-email').val(); 99        const school = $('#intern-school').val();100101        console.log("Intern", name, id, email, school);102        // Create new manager object103        try {104            const intern = new Intern(name, id, email, school);105            // Add manager to team array106            team.push(intern);107            // Clear form108            $('#intern').val('');109            $('#intern-id').val('');110            $('#intern-email').val('');111            $('#intern-school').val('');112            // Add manager to team list113            $('#team-list').append(creteListItem(intern));114        } catch (err) {115            alert(err);116        }117    });118
119
120    $("#generate").on("click", function () {

Unexpected function expression

public/js/script.js

 66        }
 67    });
 68
 69    $('#engineer-add').on('click', function () { 70        // Get values from form 71        const name = $('#engineer').val(); 72        const id = parseInt($('#engineer-id').val()); 73        const email = $('#engineer-email').val(); 74        const github = $('#engineer-github').val(); 75 76        console.log("Engineer", name, id, email, github); 77        // Create new manager object 78        try { 79            const engineer = new Engineer(name, id, email, github); 80            // Add manager to team array 81            team.push(engineer); 82            // Clear form 83            $('#engineer').val(''); 84            $('#engineer-id').val(''); 85            $('#engineer-email').val(''); 86            $('#engineer-github').val(''); 87            // Add manager to team list 88            $('#team-list').append(creteListItem(engineer)); 89        } catch (err) { 90            alert(err); 91        } 92    }); 93
 94    $('#intern-add').on('click', function () {
 95        // Get values from form

Description

It is recommended to use arrow functions as callbacks.

Arrow functions can be an attractive alternative to function expressions for callbacks or function arguments.

For example, arrow functions are automatically bound to their surrounding scope/context. This provides an alternative to the pre-ES6 standard of explicitly binding function expressions to achieve similar behavior.

Additionally, arrow functions are:

less verbose, and easier to reason about.
bound lexically regardless of where or when they are invoked.

Bad Practice

func(function(a) { return a; }); // ERROR
// prefer: func(a => a)

func(function() { return this.a; }.bind(this)); // ERROR
// prefer: func(() => this.a)

// arrow function callback
func(a => a); // OK

// generator as callback
func(function*() { yield; }); // OK

// function expression not used as callback or function argument
var funcVar = function func(a) { return a; }; // OK

// unbound function expression callback
func(function() { return this.a; }); // OK

// recursive named function callback
func(function recursiveFunc(n) { return n && n + recursiveFunc(n - 1); }); // OK

danielfloresd / team-profile-generator

Bad Practice

Recommended