6

I've come across JS code in which I see functions being declared in two different styles:

Method 1

function doSomething(){

   alert('This is one way of declaring a function');

}

Method 2

doSomething = function() {

    alert('And this is another way of declaring the same function');    

}

So what is the difference between the two and is there a case scenario where it would make sense to follow one method over the other?

PS: Sorry if the title seems vague. I didn't know the technical term used to describe the way the above two functions are declared.

asprin
  • 163
  • 2
  • 6
  • 4
    Cross-site duplicate on Stack Overflow: [var functionName = function() {} vs function functionName() {}](http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname) – apsillers Feb 26 '15 at 13:03
  • Related question: [JavaScript function order: why does it matter? - Stack Overflow](https://stackoverflow.com/questions/7609276/javascript-function-order-why-does-it-matter). – Sergey Vyacheslavovich Brunov May 03 '20 at 16:17
  • Nowadays one would use `const doSomething = function()` for method 2. See this question: https://softwareengineering.stackexchange.com/questions/364086/why-use-const-foo-instead-of-function-foo/394496#394496 – user949300 May 04 '20 at 00:05

3 Answers3

13

Method 1

For Method 1, the function and its symbol is processed by the parser before any code in this file is run. Thus the definition is "hoisted" to the top of whatever scope it is in and the symbol can be used anywhere in the scope it is defined in. Order of declaration within a scope does not matter.

So, with the first method, you can do this:

hello();

function hello() {
    console.log("hello");
}

because the first pass over the code to parse it will define the symbol hello to be your function. Therefore, in the second pass when the code is actually executed, the symbol hello already exists so it can be called at any time.

Method 2

For Method 2, the function is processed by the parser, but the symbol that contains the function is not assigned a value until the assignment statement is executed at run-time. Code in this scope before this line cannot use the symbol (because it doesn't yet have a value). Order of assignment within a scope does matter and does have to be paid attention to.

Using, your second method, the same ordering as in the example above will not work:

hello();

var hello = function() {
    console.log("hello");
}

because the symbol hello is not yet defined when you try to use it. Instead, you would have to do this:

var hello = function() {
    console.log("hello");
}

hello();

Summary

People seem to have a preference for one style vs. the other. Personally, I like the first style as it just seems simpler to let the parser define all your function symbols and not have to worry about declaration order. The one exception I make is if I'm actually assigning different functions to a given variable depending upon some condition. Then, I may use the second style.

Sergey Vyacheslavovich Brunov
  • 117
  • 4
jfriend00
  • 3,572
  • 27
  • 18
4

Method 1 is a type of function declaration, and Method 2 is a type of function expression. Knowing the names of the these two types of methods may help you in the future. There are several other stackExchanges and stackOverflows available if you still need help.

ex: https://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip

Community
  • 1
user201827
  • 41
  • 2
1

From my experience, function expression is more found in functional programming:

const addOne = (x) => x + 1;
let array = map([1, 2, 3], addOne);

In contrast, function declaration is more common in procedural programming:

function printNames(names) {
    for (const name of names) {
        printName();
    }
}

function printName(name) {
    console.log(`Name: ${name}`);
}

or object-oriented programming:

class Wallet {
    constructor() {
        this.ballance = 0;
    }
    deposit(x) {
        this.ballance += x;
    }
    withdraw(x) {
        this.ballance -= x;
    }
}

All valid use cases. Choice depends on your need.

Franklin Yu
  • 141
  • 10