Module pattern error: Cannot set property of undefined

Question

This code works in JSfiddle: https://jsfiddle.net/estevancarlos/w8yo3mp4/1/

let ScrollAnim = (function() {
    console.log('ScrollAnim loaded');

    this.init = function() {
        console.log('init loaded');
    };

    this.getScenes = function() {
        console.log('getScenes loaded');
    };

    return this;
})();

ScrollAnim.init();
ScrollAnim.getScenes();

However it does not work within my actual project, http://veve.io/wip2. I get the error:

Uncaught TypeError: Cannot set property 'init' of undefined

I don't know what is causing this differentiation. Suggestions?

Answer 1

First of all this is not a module pattern. You are polluting global context with your functions.

On jsfiddle you are not using strict mode. And your IIFE is being called in window context. You can check your ScrollAnim is actually window. Demo.

console.log(ScrollAnim === window); //true

Your actuall project is using 'use strict'; resulting in this to be undefined. Which in turn causes the error.

This is module pattern;

let ScrollAnim = (function() {
    console.log('ScrollAnim loaded');

    return {
      init: function() {
        console.log('init loaded');
      },

      getScenes: function() {
        console.log('getScenes loaded');
      }
    };
})();