Javascript is throwing "Uncaught TypeError: Cannot set property 'x' of undefined" when page loads

Question

I'm learning how to make a Javascript plugin to make a modal window appear. I'm trying to learn using this codepen. When I try to test it somewhere else, I get the following error when the page loads:

Uncaught TypeError: Cannot set property 'raModal' of undefined
at raDialog.js:5
at raDialog.js:158

Looking at line 5, I can see that the error is referring to the start of the function that will construct the modal I want to display, but I don't quite understand why it's throwing an error on that line.

"use strict";
(function() {
     // Make the constructor
       this.raModal = function(){ //Line 5, error occurs here.

          // Create global element references
          this.closeButton = null;
          this.modal = null;
          this.overlay = null;

          // Define option defaults
          var defaults = {
             autoOpen: false,
             className: "",
             closeButton: true,
             content: "",
             maxWidth: 500,
             minWidth: 280,
             minHeight: 150,
             maxHeight: 700,
             overlay: true,
             onOK: "",
             onClose: ""
          };

          // Create options by extending defaults with the passed in arugments
          if (arguments[0] && typeof arguments[0] === "object") {
              this.options = extendDefaults(defaults, arguments[0]);
          }
          if(this.options.autoOpen === true){
            this.open();
          }

       };

     //More code...

  }()); //Line 158 also produces an error, might be related to Line 5's error.

I'm able to reproduce the error in a JSFiddle. Link to JSFiddle

Any explanations why this error is occurring is appreciated.

In a strict environment `this` inside a function will be `undefined`. For the global object in a browser, use `window`. -- https://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it — evolutionxbox, Aug 29 '17 at 16:35

score 1 · Accepted Answer · answered Aug 29 '17 at 16:35

1

In a strict environment this inside a function will be undefined.

For the global object in a browser, use window.

'use strict';

(function () {
  console.log(this);

  window.foo = 'bar';
  console.log(window.foo);
}());

Or you can use the new keyword:

'use strict';

(new function () {
  this.foo = 'bar';
  console.log(this.foo);
}());

See What does "use strict" do in JavaScript, and what is the reasoning behind it? for more information.

answered Aug 29 '17 at 16:35

evolutionxbox

3,932
6
34
51

1

I'm new to using `use strict` so I didn't know that was the issue! Thanks a bunch for the information.The code is working now. – Miega Aug 29 '17 at 16:45
`use strict` makes debugging a bit easier (among other things) by preventing certain actions from being taken, and throwing more exceptions. – evolutionxbox Aug 29 '17 at 16:46

Tom O. · Answer 2 · 2017-08-29T16:41:31.687

this is undefined within an anonymous function in strict mode. See the console.log(this); that I added to the first line of your code - then try running it without "use strict" and notice how it works as you had expected.

"use strict";

(function() {
       console.log(this);
       this.raModal = function(){ //Line 5, error occurs here.

          // Create global element references
          this.closeButton = null;
          this.modal = null;
          this.overlay = null;

          // Define option defaults
          var defaults = {
             autoOpen: false,
             className: "",
             closeButton: true,
             content: "",
             maxWidth: 500,
             minWidth: 280,
             minHeight: 150,
             maxHeight: 700,
             overlay: true,
             onOK: "",
             onClose: ""
          };

          // Create options by extending defaults with the passed in arugments
          if (arguments[0] && typeof arguments[0] === "object") {
              this.options = extendDefaults(defaults, arguments[0]);
          }
          if(this.options.autoOpen === true){
            this.open();
          }

       };

     //More code...

  }()); //Line 158 also produces an error, might be related to Line 5's error.

Check out this other SO question that addresses this issue

Javascript is throwing "Uncaught TypeError: Cannot set property 'x' of undefined" when page loads

2 Answers2