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. That is, you'd use it like this:

const obj = new Fizz();
obj.buzz();

or more concisely (if you don't need to keep the object after calling buzz):

new Fizz().buzz();
Answer from zzzzBov on Stack Overflow
Top answer
1 of 8
166

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. That is, you'd use it like this:

const obj = new Fizz();
obj.buzz();

or more concisely (if you don't need to keep the object after calling buzz):

new Fizz().buzz();
2 of 8
43

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

🌐
Reddit
reddit.com › r/learnjavascript › when is nesting functions considered bad form, and why? (example given)
r/learnjavascript on Reddit: When is nesting functions considered bad form, and why? (example given)
August 9, 2016 -

Hey peeps,

I've been using js for a while now, but it only occurred to me recently that I should probably check that one of my habits isn't horrendously bad form or causing me memory/efficiency problems etc.

SO, here's the dilemma :

function setupExample(){

	var button1 = document.getElementById("button1");
	var button2 = document.getElementById("button2");
	var button3 = document.getElementById("button3");

	button1.addEventListener("click", toggleExampleOne);
	button2.addEventListener("click", toggleExampleTwo);
	button3.addEventListener("click", toggleExampleThree);

	function toggleExampleOne(){
		button1.classList.toggle("activated");
	}//END toggleExampleOne

	function toggleExampleTwo(event){
		event.srcElement.classList.toggle("activated");
	}//END toggleExampleTwo
	
}//END setupExample

function toggleExampleThree(event){
	event.srcElement.classList.toggle("activated")
}//END toggleExampleThree

Now, I use a structure like this quite regularly - I tend to use example 1 in this case - but my concern now is that by referencing values outside the function called by the click event, the entirety of 'setupExample' would be kept in memory when all I actually need is the toggle functions!

Are example 2 or 3 better in this case, or am I worrying about nothing and there is absolutely no difference between the three?

Thanks in advance, peeps!

-P

Top answer
1 of 5
3

Why do you think that nesting functions is bad form? Modern Javascript is often written in a class-like block structure, to make for ease of exporting.

As other commenters have observed, nested functions are "private" in the sense that you won't be able to access them directly. This is a feature, not a bug. It's really the cornerstone of object-oriented programming: by nesting related functions into the same shared block structure, you can vastly reduce the complexity of your code base.

This is the way I write JS code by default:

var basketModule = (function () {

  // privates

  var basket = [];

  function doSomethingPrivate() {
        //...
  }

  function doSomethingElsePrivate() {
        //...
  }

  // Return an object exposed to the public
      return {

          // Add items to our basket
          addItem: function( values ) {
              basket.push(values);
          },

          // Get the count of items in the basket
          getItemCount: function () {
              return basket.length;
          },

          // Public alias to a private function
          doSomething: doSomethingPrivate,

          // Get the total value of items in the basket
          getTotal: function () {

              var q = this.getItemCount(),
                  p = 0;

              while (q--) {
                  p += basket[q].price;
              }

              return p;
          }
     };
 })();

This is similar to what in other languages is called a class.

2 of 5
3

What you're doing here is utilizing closures.

function toggleExampleOne(){
    button1.classList.toggle("activated");
}//END toggleExampleOne

This is closing over the variable button1 in the outer scope. This will cause the function to be evaluated with this context every time it is called, which can be inefficient. There's a process you can do called lifting which flattens the closure - this is what your example three does.

However, I would largely not be too concerned about inefficiencies here. Micro-optimizations can quickly consume you: do what works best for making a maintainable application, then if you have performance problems, measure, and optimize your hot paths (the parts of your application that are used the most often). Especially so since most javascript engines are really quite optimized and will know how to transform your code in subtle ways to improve performance (like doing that lifting for you).

If you're worrying about cluttering up your global namespace though, look into modules or namespaces.

🌐
GeeksforGeeks
geeksforgeeks.org › javascript › javascript-nested-functions
JavaScript Nested functions - GeeksforGeeks
A nested function is a function defined inside another function in JavaScript.
Published: July 12, 2025
🌐
Microsoft MakeCode
arcade.makecode.com › courses › csintro4 › appendix › nested-functions
Advanced Topics: Nested Functions
Instead of a single function to ... better manage this behavior, JavaScript allows for nested functions: functions that exist only within another function....
🌐
YouTube
youtube.com › watch
Nested Functions & Recursion | JavaScript for Beginners #16 - YouTube
Nested Functions & Recursion | JavaScript for Beginners #160 JavaScript for Beginners Full Playlist: https://www.youtube.com/playlist?list=PLpmb-7WxPhe3VDADy...
Published: April 7, 2023
🌐
W3Schools
w3schools.com › r › r_functions_nested.asp
R Nested Functions
You cannot directly call the function because the Inner_func has been defined (nested) inside the Outer_func.
Find elsewhere
🌐
C2
wiki.c2.com
Nested Functions
This site uses features not available in older browsers
🌐
Medium
medium.com › @gauravverma.career › javascript-nested-functions-how-to-pass-parameters-like-a-pro-f44eced0623a
JavaScript Nested Functions: How to Pass Parameters Like a Pro | by Gaurav Verma | Medium
April 18, 2026 - In JavaScript, you can put a function inside another function. Why? Usually to hide the inner function from the outside world or to create a “specialized worker” for the main function.
🌐
DEV Community
dev.to › _richa_ › nested-function-scope-in-javascript-a-beginners-guide-22gk
Nested Function Scope in JavaScript: A Beginner's Guide - DEV Community
January 12, 2025 - Closures allow nested functions to "keep" variables from their outer scope alive. In the next blog, we'll go deep into closures, looking at their practical uses and how they make JavaScript such a strong language.
🌐
W3Schools
w3schools.com › js › js_function_closures.asp
JavaScript Function Closures
In fact, in JavaScript, all functions have access to the scope "above" them. JavaScript supports nested functions.
🌐
TutorialsPoint
tutorialspoint.com › javascript › javascript_nested_functions.htm
JavaScript - Nested Functions
Prior to JavaScript 1.2, function definition was allowed only in top level global code, but JavaScript 1.2 allows function definitions to be nested within other functions as well.
Top answer
1 of 6
45

I'm generally in favor of nested functions, especially in JavaScript.

  • In JavaScript, the only way to limit a function's visibility is by nesting it inside another function.
  • The helper function is a private implementation detail. Putting it at the same scope is akin to making a class' private functions public.
  • If it turns out to be of more general use, it's easy to move out, because you can be confident the helper is currently only used by that one function. In other words, it makes your code more cohesive.
  • You can often eliminate parameters, which makes the function signature and implementation less verbose. This is not the same thing as making variables global. It's more like using a class member in a private method.
  • You can give the helper functions better, simpler names, without worrying about conflicts.
  • The helper function is easier to find. Yes, there are tools that can help you. It's still easier to just move your eyes up the screen a bit.
  • Code naturally forms a sort of tree of abstraction: a few general functions at the root, branching out into several implementation details. If you use an editor with function folding/collapsing, nesting creates a hierarchy of closely-related functions at the same level of abstraction. That makes it very easy to study the code at the level you need and hide the details.

I think a lot of opposition comes from the fact that most programmers were either brought up in a C/C++/Java tradition, or were taught by someone else who was. Nested functions don't look natural because we weren't exposed to them much when we were learning to program. That doesn't mean they aren't useful.

2 of 6
22

You should put it at global scope, for several reasons.

  • Nesting a helper function into the caller increases the length of the caller. Function length is almost always a negative indicator; short functions are easier to understand, to memorize, to debug and to maintain.

  • If the helper function has a sensible name, reading that name is enough without needing to see the definition nearby. If you do need to see the helper definition in order to understand the caller function, then that caller is doing too much, or is working on too many levels of abstraction simultaneously.

  • Having the helper globally available allows other functions to call it if it turns it to be generally useful after all. If the helper isn't available, you're tempted to cut and paste it, or to forget it and reimplement it, poorly, or to make another function longer than it has to be.

  • Nesting the helper function increases the temptation to use variables from the caller's scope without declaration, so that it becomes unclear what the inputs and outputs of the helper are. If a function doesn't clearly state what data it operates on and what effects it has, it is usually a sign of unclear responsibilities. Declaring the helper ass a standalone function forces you to know just what it actually does.

Edit

That turned out to be a more controversial question than I thought. To clarify:

In JavaScript, big file-spanning functions often fulfill the role of classes because the language doesn't provide any other scope-limiting mechanism. Certainly helper functions should go inside such quasi-classes, not outside them.

And the point about easier reuse presupposes that if a subroutine does become more widely used, you are willing to move it out of place altogether and put it in appropriate place, e.g. a string utility library or into your global configuration registry. If you don't want to order your code like that, then you might as well nest the subroutine, just like you would do with a normal Method Object in a more "blocky" language.

🌐
CodeHS
codehs.com › glossary › term › 16
Glossary Term: Nested Function | CodeHS
A nested function is a function that is defined inside another function. **This should be avoided.** An example of a nested function: function start() { move(); function turnRight() { turnLeft(); turnLeft(); turnLeft(); } turnRight(); move(); ...
🌐
JavaScript in Plain English
javascript.plainenglish.io › javascript-tutorial-part-25-nested-functions-in-javascript-df15cc44de05
JavaScript Tutorial- Nested Functions in JavaScript | by Coding Adventure with Emma | JavaScript in Plain English
April 26, 2025 - In JavaScript, a nested function refers to a function defined inside another function. The inner function has access to the variables, parameters, and scope of the outer function, creating a scope chain.
🌐
EDUCBA
educba.com › home › software development › software development tutorials › javascript tutorial › javascript nested functions
Javascript Nested Functions | 4 Examples of Javascript Nested Functions
June 19, 2023 - Functions within another function are called “Nested function.” A function can have one or more inner functions. These nested functions (inner functions) are under the outer functions’ scope.
Address: Unit no. 202, Jay Antariksh Bldg, Makwana Road, Marol, Andheri (East),, 400059, Mumbai
🌐
DEV Community
dev.to › rajajaganathan › why-nested-functions-in-javascript-3ngp
Why nested functions in JavaScript - DEV Community
May 26, 2020 - Often many people confused about nested function in JavaScript, why the nested function is useful, an... Tagged with javascript, node, typescript, webdev.
🌐
Suneet Agrawal
agrawalsuneet.github.io › blogs › nested-function-in-javascript
Nested Function in JavaScript · Suneet Agrawal
August 18, 2023 - JavaScript is a versatile and widely used programming language that empowers developers to create interactive and dynamic web applications. One of its powerful features is the ability to define functions within functions, known as nested functions.