Function declaration vs function expression causing different results

Question

In this code snippet, trueFactorial(5) returns 120:

function factorial(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * arguments.callee(num - 1);
  }
}

var trueFactorial = factorial;

var factorial = function(num) {
  return 0;
}

console.log(trueFactorial(5));

But in this code snippet, trueFactorial(5) returns 0.

function factorial(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * arguments.callee(num - 1);
  }
}

var trueFactorial = factorial;

function factorial(num) {
  return 0;
}

console.log(trueFactorial(5));

The only difference is that we declared factorial through variable assignment in the first snippet. What is the reason for this difference?

@LarsPeterson — The difference is on line 11 and explained in the question title. — Quentin
– Quentin, Commented Sep 21, 2017 at 12:18

Quentin · Accepted Answer · 2017-09-21 12:18:16Z

2

Function declarations are hoisted. Variable assignments are not.

In example one, you assign the first function to trueFactorial.

In example two, the second function is hoisted so it gets assigned to trueFactorial.

answered Sep 21, 2017 at 12:18

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sahand Over a year ago

Thanks, I had a feeling it would be that. So is it correct to say that in function hoisting, the last function body is always the one that will be assigned to the variable function name?

Quentin Over a year ago

For a given scope, yes.

ClementNerma · Accepted Answer · 2017-09-21 12:21:14Z

0

The JavaScript interpreter first looks at the declaration of all functions in your code with the function <...> (<arguments>) syntax. In your second snippet, you declare the function both time with this syntax, so the interpreter starts by seeing the first declaration, memorize its content, and then see another declaration. At this point, it will replace the first declaration by the new one.

When you use the var keyword, the declaration is not seen by the interpreter before the start, but while the code is running.

answered Sep 21, 2017 at 12:21

ClementNerma

1,1111 gold badge11 silver badges16 bronze badges

5 Comments

Quentin Over a year ago

This has nothing to do with the var keyword. The declarations in both cases are the same. It's the assignments that have different timing.

ClementNerma Over a year ago

Yes it does, because var is an assignment that changes the function's content during the run, while the function <...>(<arguments>) syntax changes the function's content before the program starts.

Quentin Over a year ago

You are confusing the significance of var (which declares variables) and =(which assigns values to variables). (A function declaration will both declare a variable and assign a value to it).

ClementNerma Over a year ago

Yes I didn't explain well, but a function declaration doesn't just declare and assign a value to a variable but declare even before the programs starts what is the function's content.

Quentin Over a year ago

var is also hoisted and causes the variable to be declared throughout the entire function.

Spitzbueb · Accepted Answer · 2017-09-21 12:21:55Z

In the second example your function is hoisted and gets assigned to trueFactorial function. Meaning it is in the end a reference to the same function. In the first example the reference points to another address in memory.

See:

function factorial(num){
    if (num <=1){
        return 1;
    } else {
        return num*arguments.callee(num-1);
    }
}

var trueFactorial = factorial;

var factorial = function(num){
    return 0;
}

console.log(trueFactorial(5));//120

console.log(trueFactorial === factorial);//false

function factorial(num){
    if (num <=1){
        return 1;
    } else {
        return num*arguments.callee(num-1);
    }
}

var trueFactorial = factorial;

function factorial(num){
    return 0;
}

console.log(trueFactorial(5));//0

console.log(trueFactorial === factorial);//true

Collectives™ on Stack Overflow

Function declaration vs function expression causing different results

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related