CODEWITHSUNDEEP
javascriptjquery
Jason Howard
Jason Howard

Reputation: 1586

Function name not found due to reference error

I'm getting the following error in the console:

Uncaught ReferenceError: jason is not defined

Here is my javascript:

$(document).ready(function jason() {

    console.log("test");    
});   

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } 
};


addEvent(window, "resize", jason());

Thanks so much for the help!

Upvotes: 2

Views: 439

Answers (5)

MarredCheese
MarredCheese

Reputation: 20791

In Javascript, there are many ways to define functions. They generally fall into two categories though: function declarations and function expressions.

Function declarations look like this:

function jason() {
    console.log("test");    
}

A function declaration has global scope regardless of where it is in the code, and it can be called earlier in the program than where it is defined. (Edit: actually, if a function declaration is nested within another function, then it can only be called within that outer function)

Function expressions look like this:

// Anonymous function expression set to a variable
let jason = function() {
    console.log("test");    
};

// Named function expression set to a variable
let jason = function freddy() {
    console.log("test");    
};

They are scoped just like any other variable. They must be set before they can be called.

In your case, you created jason() as a function expression but didn't assign it to a variable. You did name it jason, but that name only works inside of the function (like for recursion), not elsewhere. If you were only going to use the jason() function as an argument to $(document).ready(), then defining as you did would be ok. But since you seem to want to use jason() in more than one place, you either need to 1) change it a function declaration or 2) make it a function expression that is assigned to a variable prior to being passed to $(document).ready() and addEvent().

By the way, when passing a function as an argument, you need to leave off the parentheses, like this:

$(document).ready(jason);
addEvent(window, "resize", jason);

If you do the following instead, it will execute jason() and pass the value it returns to each of those funtions. In this case, that value would be undefined.

// Not what you want
$(document).ready(jason());
addEvent(window, "resize", jason());

Upvotes: 2

Bhargav Aboti
Bhargav Aboti

Reputation: 278

You can write your code just in document .ready function().

  

$(document).ready(function(){
console.log("test");
})

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } 
};


addEvent(window, "resize");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

traktor
traktor

Reputation: 19301

Function expressions can be given a name, but as noted in the MDN link, the name is only available within the function's body.

Function declarations which cause a named function to be hoisted to the top of the function or script element in which they reside are also function statements.

Naming and providing the code for jsan as an argument value for a call to ready prevents it being treated as a statement and creates a function expression.

Obviously if you want to call or reference the jsan function in multiple places it needs to be declared in the scope of everywhere it's referenced - which could require creating a global function or declaring it in a common outer function, depending on the structure of the code.

Upvotes: 1

Ajay2707
Ajay2707

Reputation: 5798

Jason is wrongly define. Just check the below code, first you define a function and then call it.

$(document).ready(function() {
    addEvent(window, "resize", jason());

    console.log("test");    
});   

var addEvent = function(object, type, callback) {    
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } 
};

   function jason(){
    console.log("call jason function");
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

When you put it inside $(document).ready() it is not available outside that function. Make it global and define it without $(document).ready(), but this will run even before the page loads.

function jason() {

    console.log("test");    
};   

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } 
};


addEvent(window, "resize", jason());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 4

Related Questions