8

I am learning Javascript, I have been using PHP for about 10 years so I have some knowledge of Javascript, mostly just using jQuery and hacking it together, I think it's time I put some effort into learning it better so I have been reading up on it.

Below are my examples of defining and calling some functions.

Method 1

function testFunction1() {
    console.log('TestFunction1() was ran');
}
testFunction1();

Method 2 

var testFunction2 = function() {
    console.log('TestFunction2() was ran');
}
testFunction2();

Method 3

var TestFunction3 = {
    flag: function() {
        console.log('TestFunction3.flag() was ran');
    },
    unflag: function() {
        console.log('TestFunction3.unflag() was ran');
    }
};
TestFunction3.flag();
TestFunction3.unflag();

Method 4

var TestFunction4 = {
    Like: {
        comment: function() {
            console.log('TestFunction4.Like.comment() was ran');
        },
        user: function() {
            console.log('TestFunction4.Like.user() was ran');
        }
    },
    Unlike: {
        comment: function() {
            console.log('TestFunction4.Unlike.comment() was ran');
        },
        user: function() {
            console.log('TestFunction4.Unlike.user() was ran');
        }
    }
};
TestFunction4.Like.comment();
TestFunction4.Like.user();
TestFunction4.Unlike.comment();
TestFunction4.Unlike.user();

Ok so I understand method 1 and 2 to be just a basic function call.

1)
Method 3 and 4 are where my questions start, from other post and from reading, I cannot tell if these are still considered a basic function with namespacing applied, or if these would be considered Objects?

2)
I have seen where sometimes an object would be called with the new word however running all this in the browser works fine so I am guessing this is not an object? If it is not an object, how would I make it into an object?

3)
Example 3 and 4 are pretty much the same with the exception that example 4 has functions defined 1 level deeper then example 3, is there a name for example 3 and 4 or are they considered the same thing?

4)
Lastly of all the 4 examples, is any of these 4 methods preferred over the other?

Sorry for all the questions in 1 but they are all related and I don't think I need to start 4 separate questions for this.

Improve this question
8
  • You would probably benefit from reading: bonsaiden.github.com/JavaScript-Garden and at least reviewing the ECMAScript standard. Commented Nov 28, 2011 at 23:23
  • 1
    Everything is an object, except null and undefined. Commented Nov 28, 2011 at 23:23
  • 1
    If you have some spare time have a look at The Good Parts by Douglas Crockford. Relatively short book, after reading it the answer to your questions should be clear I think. Commented Nov 28, 2011 at 23:32
  • @zzzzBov: null is an object. Commented Nov 28, 2011 at 23:41
  • @zzzzBov, primitive numbers, booleans and strings are not considered objects either. Commented Nov 28, 2011 at 23:41

2 Answers 2

Reset to default
3

3 is an object. It has object properties, which themselves have properties that are functions. 4 is the same idea, just with less nesting.

As far as using the new keyword, that's just one way to create objects. When a function is called with new, that's called constructor invocation. It's one of the four ways functions can be invoked. The other three, for completeness, are method invocation, function invocation, and apply invocation.

If you want to use a function as a constructor you would, by convention, start it with a capital letter, then call it with the new keyword. This creates a blank object based on Object.prototype, and sets it equal to this. When using this mode of object creation you'd add properties to your resulting object by adding them directly to this, ie this.foo = 12

Methods of that object would be added by modifying the prototype of your function.

YourConstrutor.prototype.newMethod = function() {
   alert(this.foo);
};

Note that using constructors comes with a lot of difficulties, especially if you want to implement inheritance

Objects can be created more simply by returning them from a "regular" function:

function createCar() {
   return {
      prop1 : 12,
      someFunc: function() {
         alert(this.prop1);
      }
   }
}

This also make information hiding easy: 

function createCar() {
   var protectedInfo = "haha I'm protected"; ///not visible outside this function
   return {
      prop1 : 12,
      showProtectedData: function() {
         alert(protectedInfo);
      },
      someFunc: function() {
         alert(this.prop1);
      }
   }
}

(you can implement information hiding with constructors too, but protected info will not be visible to methods you put on the prototype; protected information will only be visible to methods you add manually to this)

The only disadvantage here is that creation will be slightly slower, since it's creating that someFunc method de novo each time; with a constructor it would exist once, as part of the prototype.

4. Which is preferable? If you just want to create a single object, then use 3 or 4. Simple.

If you want to repeatedly create an object, then it depends. Will you be creating tens of thousands of these objects, such that speed is of the utmost importance? If so, you'll probably want a constructor. If not, then it depends on what your most comfortable with. I find a simple function that returns an object most clear, and most flexible, but that's just my preference. Many developers far smarter than me prefer constructors.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

AFAIK

1) In JS all functions are objects. In the case of 3, yes it would be regarded as an object because it's inside curly braces

3) They are the same thing, but one way you COULD jazz things up would be 'return' one of the highest level properties and not the other, which in essentially hide the non returned function and give you one way to create public and private methods.

4) Probably 4 is closest to what I think you want and follows some sensible approaches but as Andrew says, I would be inclined to change 4 into something like this:

var TestFunction4 = (function(){
    return {
        flag: function() {
            console.log('TestFunction4.flag() was ran');
        },
        unflag: function() {
            console.log('TestFunction4.unflag() was ran');
        }
    }
})();
TestFunction4.flag();
TestFunction4.unflag();

Note the parenthesis at the tail of the method, forcing the function to execute immediately and make itself avaiable prior to runtime to the rest of the app (in terms of say, intellisense)

EDIT:

This is how I'd use 'private' functions in response to the 'why would you do this' comment:

var TestFunction4 = (function(){
    //private function
    var private = {
        aPrivateFunction: function(a) {
            return a + 1;
        }
    }
    //public return object
    var public = {
        flag: function() {
           console.log('Calling private function aPrivateFunction(10) expecting 11');
            console.log('result' + private.aPrivateFunction(10));
            console.log('TestFunction4.flag() was ran');
        },
        unflag: function() {
            console.log('TestFunction4.unflag() was ran');
        }
    }
    //return things to expost publicly
    return public;
})();
Improve this answer

3 Comments

Your 4) example doesn't even run... and why would you do that? functions can be overwritten as easily as objects can.
the example above was purely an illustration, for it to run you'd need to 'return' an object or property containing the flag and unflah functions as I mentioned in the answer to point 3, I will update the code to show how you would run it
In answer to the 'why would you want to do that' it's a pre-cursor for modularisation. Once you're returning an object of the functions you wish to be accessible, you could define 'private' functions/vars inside the TestFunction4 object which are not part of the returned object. Whilst TestFunction4 could be overridden, the values inside couldn't AFAIK be accessed. I will update the function again to show this in action for an example you can run.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.