Understanding Snippet of Javascript

Question

My professor has given us the following snippet of Javascript which we are supposed to analyze:

function createMultiplyer(multiple) {
n = multiple;
return function(num) {
 return num * n;
 };
}

var fiveMultiplyer = createMultiplyer(15);
var x = fiveMultiplyer(10);
alert(x);
alert(fiveMultiplyer);

This piece of code outputs an alert containing the text "150" followed by another alert which reads function(num) { return num * n; }. However, I cannot seem to understand why that is the case.

Can someone help me trace through the code and explain what is happening?

Nikita Rybak · Accepted Answer · 2011-02-28 06:30:26Z

2

1 Let's consider line

var fiveMultiplyer = createMultiplyer(15);

After it, fiveMultiplyer variable will have return value of createMultiplyer function (that's how functions work). And that return value is

function(num) {
  return num * n;
};

So, the code is similar to this (about n later)

var fiveMultiplyer = function(num) {
  return num * n;
};

2 The next line is

var x = fiveMultiplyer(10);

Here we just invoke the function above. It also uses variable n: that variable is set in createMultiplyer function: n = multiple;. Thus, in our case n is 15 and fiveMultiplyer(10) is equivalent to 10 * 15.

That's all. Hope it helps.

edit
I'll also note that n is a global variable the way it's declared. So, you can access it from anywhere in the code.

edited Feb 28, 2011 at 6:30

answered Feb 28, 2011 at 6:20

Nikita Rybak

68.2k22 gold badges163 silver badges183 bronze badges

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

Comments

jensgram · Accepted Answer · 2011-02-28 06:20:07Z

var fiveMultiplyer = createMultiplyer(15); // Create a function that multiplies with 15

This function is locally known as fiveMultiplier

var x = fiveMultiplyer(10); // Invoke the multiply-by-15 with argument 10

The result is locally known as x

alert(x); // 150
alert(fiveMultiplyer); // The definition of multiply-by-15 as 
                       // it is returned from createMultiplyer

function createMultiplyer(multiple) { // Returns a new function which 
                                      // multiplies with "multiple"
 [var] n = multiple; // Note: "var" should have been used to keep "n"
                     // in scope (within "createMultiplyer").
 return function(num) { // Return definition of multiplier function
  return num * n; // "num" = arg. when invoked, "n" = multiplier at 
                  // define time (when "createMultiplyer" was called)
  };
}

david · Accepted Answer · 2011-02-28 06:29:08Z

0

The best way to think of it is as a class or object. var fiveMultiplyer is creating an object that holds a value n = 15 and has a function that accepts a number and multiplies it by n.

In Java this would look something like this

public class Multiplyer {
  private int n;

  public Multiplyer(int n) {
    this->n = n;
  }

  public int multiple (int m) {
    return n*m;
  }
}

Multiplyer myMultiplyer = new Multiplyer(15);

System.out.println( myMultiplyer.multiple(10) );

In the JavaScript however the variable fiveMultiplye does not have to call its method, you simple pass it the required variables and it calls the method and returns for you.

Hope that helps.

answered Feb 28, 2011 at 6:29

david

7361 gold badge5 silver badges10 bronze badges

Comments

BenMorel · Accepted Answer · 2014-01-13 09:30:36Z

0

In JavaScript, you can have a variable which acts as a function too.

var fiveMultiplyer = createMultiplyer(15); 
    You are calling a CreateMultiplyer(15) function. 
    This function returns you another function and that is associated 
    with the fiveMultiplyer var.
var x = fiveMultiplyer(10);
    You are actually invoking the function which was returned in previous step. 
    hence evaluating the value to 10 * 15 = 150
alert(x);
   As explained this returns 150
alert(fiveMultiplyer);
   As explained this returns the complete function 
   returned by createMultiplyer().

edited Jan 13, 2014 at 9:30

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Feb 28, 2011 at 6:20

Sachin Shanbhag

55.8k11 gold badges92 silver badges103 bronze badges

Collectives™ on Stack Overflow

Understanding Snippet of Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related