CODEWITHSUNDEEP
javascriptjqueryjavascript-objects
Kim Hansen
Kim Hansen

Reputation: 229

Javascript Closures are not working?

I'm trying to implement clojure in javascript. Can anyone see what the problem is?

 var a = (
          function()
          {
            var privateFunction = function()
                                  {
                                    alert('Hello');
                                  }
    
            var OsmanFunction = function()
                                  {
                                    alert('Osman');
                                  }
          return
                {
                 publicFunction: function()
                                 {
                                   privateFunction(); 
                                 }
    
                 OsmanFunction: function()
                                 {
                                   OsmanFunction(); 
                                 }
       }})();
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     </head>
    
    <body>
    <p> <a href="#" id="hitme" onclick="a.OsmanFunction()">Please hit me</a></p>
    </body>
</html>

Upvotes: 1

Views: 74

Answers (4)

Andrii Starusiev
Andrii Starusiev

Reputation: 7764

You need formatting your code. Really.

var a = (
    function () {
        var privateFunction = function () {
            alert('Hello');
        };

        var OsmanFunction = function () {
            alert('Osman');
        };
        return {
            publicFunction: function() {
                privateFunction();
            },
            OsmanFunction: function() {
                OsmanFunction();
            }
        };
    })();

 document.getElementById("hitme").addEventListener('click', a.OsmanFunction);

This is working version.

But... in your code:

return
            {

You can't transfer return object to the next line.

You have no "," on return object between functions

{
             publicFunction: function()
                             {
                               privateFunction(); 
                             }

             OsmanFunction: function()
                             {
                               OsmanFunction(); 
                             }
   }

a is not defined. Please, in fature be attentive to your code, you make code for an other developers, who will support your project, not for machines.

Upvotes: 2

Hanif
Hanif

Reputation: 3795

Try following code, you missed comma between "publicFunction" and "OsmanFunction" when these returning:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">    </script>

<script>
a = (
    function() {
        var privateFunction = function() {
            alert('Hello');
        }

        var OsmanFunction = function() {
            alert('Osman');
        }
        return {
            publicFunction: function() {
                privateFunction();
            },
            OsmanFunction: function() {
                 OsmanFunction();
            }
        }
    })();
</script>
</head>

<body>
<p> <a href="#" id="hitme" onclick="a.OsmanFunction()">Please hit me</a></p>
</body>
</html>

Upvotes: 0

slebetman
slebetman

Reputation: 113906

Your function is returning undefined (returning nothing, which is undefined in js). The lines:

return
{
  publicFunction: function()
  {
    privateFunction(); 
  },
  OsmanFunction: function()
  {
    OsmanFunction(); 
  }
}

Is interpreted as:

return;

{
  publicFunction: function()
  {
    privateFunction(); 
  },
  OsmanFunction: function()
  {
    OsmanFunction(); 
  }
};

Therefore it is equivalent to:

return undefined;

{
  publicFunction: function()
  {
    privateFunction(); 
  },
  OsmanFunction: function()
  {
    OsmanFunction(); 
  }
};

Be very careful with line breaks in javascript. If possible use a coding convention that avoids this kind of mistake. There are several coding conventions that work. Google "Crockford convention" or "standard.js". Either convention work so choose one that you like.

Anyway. I'd suggest you don't start an open brace { in a new line if possible. Get used to starting a brace at the end of the line. It avoids this error.

Upvotes: 1

DJ Forth
DJ Forth

Reputation: 1518

I think it was just poor formatting, but this is I think what your trying to achieve. 

function Test(){

  var privateFunction = function(){
      alert('Hello');
  }

  var OsmanFunction = function(){
    alert('Osman');
  }
  return {
    publicFunction: privateFunction //NB This is no longer private if you expose it
    , OsmanFunction: OsmanFunction
  }

 };
 
var tester = Test();
var btn = document.getElementById('hitme');
btn.addEventListener('click', function(e){
  e.preventDefault();
  tester.OsmanFunction()
});

 
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


</head>

<body>
<p> <a href="#" id="hitme">Please hit me</a></p>
</body>

</html>

Upvotes: 0

Related Questions