Tutorial: Function within a function in JavaScript

Do you know that you can define a function within a function in JavaScript? Furthermore, these functions defined in the outer function are not accessible outside the scope unless you expose them to the outside scope? This is pretty interesting since basic web tutorial doesn’t really cover function in a function with JavaScript. Function in a function are only noticeable when you come across or read about in the real world of JavaScript application.

Function within a function

How do you define a function within a function in JavaScript? Pretty simple and straight forward actually. Just throw another function into the function. This will caused the inner function to be accessible only within the scope of outer function.

function outer_func(){
	function inner_func(){
		alert('hellow');
	}
	//hellow will be alert
	inner_func();
}

If you try to access the inner function, an undefined error will occurs. On the other hand, using the outer function still permits.

//undefined function
inner_func();
//alert 'hellow'
outer_func();

Access the inner functions

Sometimes we want some methods in the outer function to be accessible. We will have to return an object with the relevant method attached to it for it to be accessible outside the scope.

function outer_func(){
	var newObj = new Object()
	function inner_func(){
		alert('hellow');
	}
	function inner_func2(){
		alert('RAWR!');
	}
	newObj.inner_func = inner_func;
	return newObj;
}

Above, we created two function and only attached the first function into the return object. Thus, calling the second function will fail.

var func_Obj = new outer_func();
// alert 'hellow'
func_Obj.inner_func();
//undefined
func_Obj.inner_func2();

Some Real World Application

Function within a function act as a security measure for certain action to be restricted outside the scope. Open source code tend to use this to prevent certain dependency methods from being access. Performing certain organization through this method was also applied in real life application.

Like this post? Share it!

Related posts:

1. The Predefined Prototype Object In JavaScript In this article, we discuss in depth on JavaScript predefined...
2. Ways to debug your jQuery or JavaScript codes Different ways of debugging your JavaScript and jQuery codes without...
3. Tutorial: How to override ‘this’ object in JavaScript Ever wonder how to change the 'this' object in JavaScript?...
4. Tutorial: Easiest way to create a Asynchronous upload file function (ajax upload) The easiest and simplest way to create a asynchronous upload...
5. The Secret Arguments Array in JavaScript This array is something we don't see many use it...

Author: Clay Lua

Clay is the main writer and founder of Hungred.com. A person who thinks a lot and spend majority of his time online. He spend most of his time developing web application and writing articles to share and learn. You can find him at his twitter.