Question

Below is just some sample Javascript that I posted that shows 2 different ways that javascript functions are being defined and called.

Is there a name for these different methods?

Which method is preferred?

The first code block looks really simple, pretty much the same as a procedural PHP function is defined and called.

The second I realize is set up more like a class/namespace it just get’s a little confusing for me as I have not studied javascript too much yet. Am I correct in my thinking that all these functions could be coded in either method as the first or second code blocks and still work?

Sorry if my question is not clear enough, I will revise if needed, thanks for the help/info

initCommentsHelp();

function initCommentsHelp() {
    $('#view-comments-help-a').live('click', function() {
      $('#comments-help').slideToggle("normal");
      return false;
    });
}

VS doing this

Screenshot.Like.Shot.toggle();
Screenshot.Comment.toggle();
Screenshot.Flag.flag();
Screenshot.Flag.unflag();

var Screenshot = {
    Like: {
        Shot: {
            toggle: function() {
                if ($('.fav a.fav-toggle.processing').length == 0) {
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: data,
                        beforeSend: function() {
                            $('.fav-toggle').addClass('processing');
                            $link.text('Wait...');
                        },
                        success: function(responseHtml) {
                            $('#like-section').replaceWith(responseHtml);
                        }
                    });
                }

                return false;
            }
        },
    Comment: {
                toggle: function() {
                    var link = $(this);
                    var data = link.hasClass('liked-by-current-user') ? {_method: 'delete'} : null;
                    $.ajax({
                        type: 'POST',
                        url: this.href,
                        data: data,
                        success: function(responseHtml) {
                            link.closest('.comment').replaceWith(responseHtml);
                        }
                    });

                    return false;
            }
        }
    },
    Flag: {
        // Flag a screenshot as inappropriate or Appropriate
        flag: function(){
            var link = $(this);
            var screenshotId = link.modelId();
            if(!confirm("Are you sure you want to flag this shot?"))
                return false;

            $.ajax({
                type: 'POST',
                url: this.href,
                data: {
                    screenshot_id: screenshotId
                },
                success: function(responseHtml) {
                    $('#flag-section').html(responseHtml);
                }
            });

            return false;
        },
        unflag: function() {
            var link = $(this);
            var screenshotId = link.modelId();
            $.ajax({
                type: 'POST',
                url: this.href,
                data: {
                    _method: 'delete',
                    screenshot_id: screenshotId
                },
                success: function(responseHtml) {
                    $('#flag-section').html(responseHtml);
                }
            });

            return false;
        }
    },
};

Answer 1

The first way is generally preferred for writing standalone functions. You can write them as

function testFunction() {
  // your code here...
}

or

var testFunction = function() {
  // your code here...
}

The second example you have posted is used for namespacing your objects. You can read more about namespacing in this article : Namespacing in JavaScript