# What is wrong with my JavaScript code? [closed]

I am trying to better organize my JavaScript by namespacing, although in the process of refactoring and reorganizing my code I seem to have have made some mistakes and I'm not sure what they are. I'm using CodeKit to lint and minify my code and it's throwing up a lot of errors that don't make sense to me.

(function ($) { var TTB = { // Display browser dimensions browserDimensions: function () { var slide_width =$('#site-wrapper').width();
$(window).resize(function () {$('.dimensions').html(slide_width);
});
};

lineBreak: function () {
if ($(window).width() < 600) {$('a.why-different').prepend('<br/>');
}
};

// Display modal on click
modal: function () {
$(".submit-modal").click(function () {$("#submit-modal").reveal();
});
};

// Scroll To Top on mobile
scrollToTop: function () {
$('.scroll-to-top').on('click',function() {$('body').animate({scrollTop:0}, 600);
return false;
});
};

// Replace image source for various breakpoints
replaceImageSrc: function () {
var browser_width = $(window).width(), device_dimensions = { mobile: [320,585], mini_tablet: [586,767], tablet: [768,1023], desktop: [1024,12800]; }, mobile_img_src =$('.homepage-featured img, .homepage-news img').data('mobile'),
mini_tablet_img_src = $('.homepage-featured img, .homepage-news img').data('small-tablet'), tablet_img_src =$('.homepage-featured img, .homepage-news img').data('tablet'),
desktop_img_src = $('.homepage-featured img, .homepage-news img').data('desktop'); // Mobile check if ($.inArray(browser_width, device.dimensions.mobile)) {
$('.post-image').attr({src: mobile_img_src}); } // Mini Tablet check if ($.inArray(browser_width, device_dimensions.mini_tablet)) {
$('.post-image').attr({src: mini_tablet_img_src}); } // Tablet check if ($.inArray(browser_width, device_dimensions.tablet)) {
$('.post-image').attr({src: tablet_img_src}); } // Desktop check if ($.inArray(browser_width, device_dimensions.desktop) {
$('.post-image').attr({src: desktop_img_src}); } }; siteOverlay: function () { var docHeight =$(document).height();

$("body").append("<div id='overlay'></div>");$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
};
}

TTB.browserDimensions();
TTB.lineBreak();
TTB.scrollToTop();
TTB.modal();
TTB.replaceImageSrc();

})(jQuery);

-
See the FAQ, your code has to be working to be on-topic here. –  Winston Ewert Dec 28 '12 at 23:44

## closed as off topic by svick, Paul, Trevor Pilley, Brian Reichle, Glenn RogersDec 28 '12 at 18:55

Questions on Code Review Stack Exchange are expected to relate to code review request within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

Used ; instead of , throughout the root object literal. You are basically doing this:

var obj = {a:1; b:2; c:3}


You must use commas to delimit elements in an object literal.

Extraneous ; at desktop: [1024,12800];

Missing a closing parens in if (\$.inArray(browser_width, device_dimensions.desktop) {

If you run into this issue a lot, I have two recommendations:

1. Remove everything from the insides of the var TTB = {} and remove anything that calls the methods inside it. Then start reinserting the method properties little by little. If there is a syntax error, you'll narrow down where it is much faster.

2. Avoid using object literals to encapsulate code altogether and if you do insist on using them, make sure to run your code through a parser every minute or two to quickly spot errors. I personally consider them to be a massive anti-pattern because it often turns into a "missing-comma hunt" every single time you reorganize code and it prevents easy debugging because all of your errors happen on a single line (that is, even though the syntax error might occur on line 228 of your massive object, it will show up as a syntax error on "line 3".

This pattern, unfortunately, is gaining a lot of converts because of certain frameworks (such as Backbone.js), but it can almost always be rewritten using an object factory or a plain old module. In your case, you could start with just TTB = {} and then attach your methods/properties using TTB.scrollToTop = function () {/*code*/};. It amounts to exactly the same thing, but it's easier to debug and maintain.

-