When and why to use these various Java Script function declaration formats?

Question

What are the differences between the following function declaration formats? When is it more correct to use which?

From a beginner's perspective, and a high level (non-deep) point of view, they all three appear to work the same - hence it makes things feel confusing and demands the question.

1.

const counter1 = function(num) {
    var x = 0;
    while (x < num) {
        console.log(x);
        x ++;
    };
    return 0;
};

2.

function counter2(num) {
    var x = 0;
    while (x < num) {
        console.log(x);
        x ++;
    };
    return 0;
};

3.

const counter3 = (num) => {
    var x = 0;
    while (x < num) {
        console.log(x);
        x ++;
    };
    return 0;
};

All of them appear to behave the same.

Comapared to **1.**, the **3.** has the additional restrictions/features an arrow function provides: arrow functions not not have their own `this`, `arguments`, `super`, or `new.target`. — t.niese, Apr 29 '18 at 07:17

Jack Ryan · Accepted Answer · 2018-04-29T07:49:47.387

There are more than a few differences between your three examples actually.

So, for one, you have to be careful using const for your function declarations.

counter1(5); // counter1 is undefined, this will fail
const counter1 = function(num) {
    var x = 0;
    while (x < num) {
        console.log(x);
        x ++;
    };
    return 0;
};

Whereas the function will be hoisted and available for use (Edit: technically let and const are also hoisted, but they aren't initialized so you cannot access them before they are declared, more info here.

counter2(5); // works fine
function counter2(num) {
    var x = 0;
    while (x < num) {
        console.log(x);
        x ++;
    };
    return 0;
};

Also note that const prohibits reassigning the variable, so you couldn't go say const counter1 = {} later down the line, whereas you could feasibly do so with the function example.

As far as the difference between function(num) { versus (num) => {, well in your example it makes no difference. But there are some differences... for example

const thisWillFail = () => {
    console.log(arguments.length);
};
const thisWorks = function() {
    console.log(arguments.length);
};

If you're unfamiliar with the arguments object, you can find info here.

When and why to use these various Java Script function declaration formats?

1 Answers1