www.webdeveloper.com
Results 1 to 6 of 6

Thread: difference in ways of coding JS

  1. #1
    Join Date
    Jul 2008
    Posts
    57

    difference in ways of coding JS

    I am fairly new to JavaScript and would like to get some clarification on the differences in the two ways I have seen JavaScript written.

    What are the differences with theses and are there any benefits?
    Which way would be best practice to start coding in?

    HTML Code:
    var randomFunction =
    {
      init: function()
      {
        randomFunction.second();
      },
    
      second: function()
      {
        .......... and so on
      }
    };
    HTML Code:
    function randomFunction()
    {
        secondfunction();
    }
    
    function secondFunction()
    {
        .............. and so on
    }

  2. #2
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    They are completely different. The first is what is called JSON, Javascript Object Notation, and assigns randomFunction to a new object with 2 attributes, both functions.
    The second creates a function to call a second function.

  3. #3
    Join Date
    Jul 2008
    Posts
    57
    At the moment I have only been coding in the top one due to I just found the structure easier.

    Are there situations in which one would be better use than another?

  4. #4
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    They are different.
    Code:
    var obj = {
      beef: "cake",
      foo: function(){
        alert(this.beef);
      }
    }
    alert(typeof obj);// object
    
    
    function foo(){
      obj.foo();
    }
    alert( typeof foo );// function
    foo();// cake

  5. #5
    Join Date
    May 2008
    Posts
    381
    In case you don't understand why scragar keeps repeating that they're different, it is because the function is called from a global context, as shown in the last line of the last bit of code. As for the object, the object's declaration maps 'foo' to a function. You need to use the dot notation for objects to fetch the function mapped to 'foo', and add the parentheses to actually call the function.

    Code:
    var bar = 4;
    
    var obj = {
      foo: function() {
        alert("This is a member function 'foo'.  bar=" + bar + ", this.bar=" + this.bar);
      },
      bar: '"Hello, nurse!"'
    };
    
    function foo() {
      alert("This is a global function 'foo'.  bar=" + bar + ", this.bar=" + this.bar);
    }
    
    obj.foo(); //Call the 'foo' member function of 'obj'.
    foo(); //Call the global function.
    Notice the 'this.bar' stuff? Since foo() is a global function in the last case, 'this' refers to the scope of the function, which is the 'window' object. The first line of the script is actually 'window.bar', not just 'bar'. In the case of the function called as obj.foo() in my code, 'this' refers to the scope of the function again, which is the 'obj' object. This is why the result of alerting bar and this.bar is different in each function.

    This is the biggest difference - the effect the function has based upon its scope and what the function is supposed to do as well as how it is meant to be used. Simply put, don't use an object when you don't need one.
    Last edited by rpgfan3233; 02-16-2009 at 10:46 PM.

  6. #6
    Join Date
    Jul 2008
    Posts
    57
    thanks for the replies I understand it now

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles