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 The Module Pattern in JavaScript

Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points

Why doesn't the arrow-function work here

I wanted to put arrowfunctions into this.

Why does the arrowfunction work on the methods, but not on the module?

So here are the famous questions one asks oneself when starting out with programming:

What am i missing?

Why doesn't this work?

const awesomeNewModule = (() => {   //Doesn't work here </3
  const exports = {                                 
    foo: 5,
    bar: 10
  };

  exports.helloMars = () => {   //Works here <3
    console.log("Hello Mars!");
  };

  exports.goodbye = () => {   //Works here as well <3
    console.log("Goodbye!");
  };

  return exports

}());
Joseph Dalton
Joseph Dalton
12,489 Points

Hey Kjetil,

It looks like you just have a parenthesis in the wrong place, which even throws a Syntax Error when the above code is executed on its own. The syntax for an IIFE with an arrow function would be something like this:

const module = ( () => {} )();

Notice that the actual arrow function is between a set of parentheses, which signals that what's inside it is an expression, and not a statement. This is required to trigger the "Immediately Invoked Functional Expression". Thus, the problem with the initial code was just that the syntax for an IIFE wasn't there. Everything you have inside the arrow function looks good though.

2 Answers

Steven Parker
Steven Parker
229,644 Points

Try re-arranging the parentheses on the last line:

}());  // instead of this,
})();  // try this
Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points

It works! Thanks.

But why?

I have serious problems with wrapping my head around this workshop, i watched it 10 times.

I don't have much hair left to rip out

Steven Parker
Steven Parker
229,644 Points

The first closing parenthesis matches the first open on the top line, encapsulating the entire function expression and making the whole thing refer to the function. Then the pair following are interpreted as a "call" of that function.

This extra layer is needed because of the difference in the way the arrow syntax is interpreted compared to the conventional function syntax.

Arrow functions are not exact replacements for conventional functions for several reasons. See more details on the differences in the MDN documentation for Arrow Functions.

Joseph Dalton
Joseph Dalton
12,489 Points

Hey Kjetil,

It looks like you just have a parenthesis in the wrong place, which even throws a Syntax Error when the above code is executed on its own. The syntax for an IIFE with an arrow function would be something like this:

const module = ( () => {} )();

Notice that the actual arrow function is between a set of parentheses, which signals that what's inside it is an expression, and not a statement. This is required to trigger the "Immediately Invoked Functional Expression". Thus, the problem with the initial code was just that the syntax for an IIFE wasn't there. Everything you have inside the arrow function looks good though.

Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points

Thanks for the answer, i appreciate it I'm now doing the es2015 course, and i've followed the link Steve supplied, wich had another long post about arrowfunctions, i'm reading up on it. I have a hard time accepting that the syntax is different, for some reason, haha.

I am getting there though. I have major problems moving forward without understanding things completely, this makes for slow progress, but stuff sticks better, i'm sure. But then again, it might be more effective letting it come more naturally instead of forcing it

The forum is great for getting answers, i really like this part of TTH