Why is all code I see confined to only a few lines?

Question

I'm fairly new to programming and have been taking courses on Lynda to learn the fundamentals. I have some knowledge of Java and HTML, but I wanted to refresh my memory so I can start learning Objective-C. The Lynda course has us working in JavaScript because of its pretty core syntax. So, in order to get a point of reference, I tried downloading some .js files integrated into HTML pages from various sources. However, this proved to be unhelpful and I am at a loss for understanding because of the way the files are formatted. It seems as if most files put one line of code after the other. I realize that because of flexible whitespace restrictions with JavaScript that this does not hinder the way the code runs, but why did the developers choose to put it all on one line like that? They obviously didn't write the code that way, as that would be extremely tedious and hard to work with, so why did it come out that way when I try to view it? Is it just something that happens when you try to download the resources of a page? Any clarification would be appreciated.

Below is a photo of a JavaScript file I tried viewing. As you can see, all the code is restricted to one single line.

Also, if anyone could offer some insight about where to go after I've finished my course if I'm looking to develop for iOS, that would be greatly appreciated. Lynda also offers an Objective-C Essentials course, as well as an iOS Development course, but I feel like it's a pretty linear path that could be expanded on greatly with some literature or other online documentation.

Answer 1

what you are seeing is a minified version of the javascript file. The main advantage of minification is that it reduces the amount of data that needs to be transferred (bandwidth usage).

If you wish to view the code in human readable format, you can use online tools like this

Answer 2

Yes as karthikr said it's minified. Which means its all there but without the line breaks. So to see it all you have to scroll right.

Or you can use http://jsbeautifier.org/ to bring back the break lines.

Answer 3

There are several reasons for minifying javascript. One is that it makes the code less readable (yeah, some devs don't want you to "steal" functions and see what it does easily). Another, and a big part of why, is that it reduces bandwidth. A file with long variable names and whitespaces everywhere can be multiple times bigger than a minified version - so it improves performance!

Answer 4

Bandwidth costs money, especially for users and especially if they're on mobile devices with a bandwidth limit.

So to solve this problem developers will minimize the file size of what ever they can.

The JavaScripts you are seeing have been minified by libraries such as Uglify or YUI compressor (list not exhaustive).

Doing this will take out unnecessary whitespace and reduce the lengths of variable and function names that are not globally exported.

Developers may also gzip the files too which will reduce the filesize even further.

Edit: grammar