Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Laurence kite
Laurence kite
11,768 Points

JavaScript Module Patterns

I am finding this part of the full stack JavaScript course confusing..

He seems to dive into these patterns without any real introduction to them or what closure is or how to use it...

prior to this, the course had been working on Javascript objects and then, we jump straight into odd looking syntax like placing a function in brackets and calling it within the brackets in order to not affect the global space..

In a course earlier to this the same teacher attempts to explain the this keyword by using node.js to execute and demonstrate his points. Surely there are easier ways of demonstrating this, as at this point in the course node.js has not even been introduced..

I think the only way for me to understand the material on Module patterns is to read the MDN

(function() {

// declare private variables and/or functions

return {
  // declare public variables and/or functions
}

})();

My point is that before now we defined functions as follows:

function myfunction() { // do something

}

using the example (funtion() etc...

it looks like at first to me that there is a typo in the code as the (function looks like the interpreter wont see the function keyword but (function..

I do believe the whole lecture is badly presented and the code is not broken down..

3 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

These functions are being used different ways to do different things.

Your first example is a conventional function definition:

function myfunction() { /* do something */ }

This makes a new function available for use later in the program.

But your other example is an IIFE (Immediately Invoked Function Expression):

(function() { /* etc... */ })();

The parentheses are not a typo but enclose the definition of an anonymous function so that it can be invoked (by the two other parentheses at the end). This is done to create a context which will contain private items (variables and/or functions) that cannot be accessed by other parts of the program. And it will likely pass back an object which will contain other items which can be used by other parts of the program.

Laurence kite
Laurence kite
11,768 Points
Laurence kite
Laurence kite
11,768 Points

I looked up some stuff on function expressions. It seems that usually they are defined via a variable for example

Var myFunction = function() {};

This bracket syntax where they surround the declaration seems to be used more exclusively for self invoking functions is there a reason for this

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

That's not quite the same thing:

var myFunction = function () { /*...*/ };  // this is a normal function, which is...
function myFunction() { /*...*/ }          // ...essentially the same as this

var myObject = (function() {/*...*/ })();  // but this is an IIFE

Those first two both just define a function named "myFunction" but don't call it. The last one defines an anonymous function, calls it right away, and then assigns the result of calling it (which is typically an object) to "myObject".

Laurence kite
Laurence kite
11,768 Points
Laurence kite
Laurence kite
11,768 Points

OK thanks I will look into these concepts thanks for your help..