93

I got a piece of code for javascript which I just do not understand:

function dmy(d) {
    function pad2(n) {
        return (n < 10) ? '0' + n : n;
    }

    return pad2(d.getUTCDate()) + '/' +
       pad2(d.getUTCMonth() + 1) + '/' +
       d.getUTCFullYear();
}

function outerFunc(base) {
    var punc = "!";

    //inner function
    function returnString(ext) {
       return base + ext + punc;
    }

    return returnString;
}

How can a function be defined within another function? Can we call pad2() from outside of my() function?

Please put some light on it. Thanks

||||||
  • 12
    functions can be created inside of functions. That is perfectly valid. – 0x499602D2 Sep 3 '11 at 20:22
139

Functions are another type of variable in JavaScript (with some nuances of course). Creating a function within another function changes the scope of the function in the same way it would change the scope of a variable. This is especially important for use with closures to reduce total global namespace pollution.

The functions defined within another function won't be accessible outside the function unless they have been attached to an object that is accessible outside the function:

function foo(doBar)
{
  function bar()
  {
    console.log( 'bar' );
  }

  function baz()
  {
    console.log( 'baz' );
  }

  window.baz = baz;
  if ( doBar ) bar();
}

In this example, the baz function will be available for use after the foo function has been run, as it's overridden window.baz. The bar function will not be available to any context other than scopes contained within the foo function.

as a different example:

function Fizz(qux)
{
  this.buzz = function(){
    console.log( qux );
  };
}

The Fizz function is designed as a constructor so that, when run, it assigns a buzz function to the newly created object.

||||||
  • What is window.baz = baz? Why does this line m?ke baz available? – Ziyang Zhang Aug 13 '17 at 16:09
  • @ZiyangZhang, the paragraph after that code block has the explanation, was there a particular part that is unclear? – zzzzBov Aug 13 '17 at 16:21
35

It is called closure.

Basically, the function defined within other function is accessible only within this function. But may be passed as a result and then this result may be called.

It is a very powerful feature. You can see more explanation here:

javascript_closures_for_dummies.html mirror on Archive.org

||||||
13
function x() {}

is equivalent (or very similar) to

var x = function() {}

unless I'm mistaken.

So there is nothing funny going on.

||||||
  • 8
    The first syntax will be moved to the start of the document. so it is possible to call function 'x' before the funtion is initialized. – Tom Nov 13 '13 at 11:07
  • 10
    The first syntax will also get you much nicer stack traces with named functions, the second will give you a headache – TheZ Oct 22 '14 at 19:25
  • @TheZ I think Chrome recently added function name inference to debugging so you don't get the same headache as before in the common case. – jinglesthula Dec 5 '18 at 21:24
  • @jinglesthula Yes! Chrome added this name inference a while back and it's much appreciated :) – TheZ Dec 9 '18 at 2:53
10

Function-instantiation is allowed inside and outside of functions. Inside those functions, just like variables, the nested functions are local and therefore cannot be obtained from the outside scope.

function foo() {
    function bar() {
        return 1;
    }
    return bar();
}

foo manipulates bar within itself. bar cannot be touched from the outer scope unless it is defined in the outer scope.

So this will not work:

function foo() {
    function bar() {
        return 1;
    }
}

bar(); // throws error: bar is not defined
||||||
4

When you declare a function within a function, the inner functions are only available in the scope in which they are declared, or in your case, the pad2 can only be called in the dmy scope.

All the variables existing in dmy are visible in pad2, but it doesn't happen the other way around :D

||||||
3

It's perfectly normal in Javascript (and many languages) to have functions inside functions.

Take the time to learn the language, don't use it on the basis that it's similar to what you already know. I'd suggest watching Douglas Crockford's series of YUI presentations on Javascript, with special focus on Act III: Function the Ultimate (link to video download, slides, and transcript)

||||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.