Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the best-practice casing style for javascript? Why?

One aspect of javascript that it's hard to find information on is casing practices. By casing practices, I mean what casing style (ie. camel-case, pascal-case, etc) should be used for what elements (Constructors, private functions, public functions).

The only rule I've heard was from a Douglas Crockford lecture on YUI theater, stating that constructors should be the only functions that start with an uppercase letter.

Beyond that there doesn't seem to be many casing standards that people follow in javascript.

Does anyone know any casing best practices for javascript, and why it's reasonable to use them?

Also do you follow a casing style with your .js files?

like image 605
Mark Rogers Avatar asked Jun 17 '09 16:06

Mark Rogers


People also ask

What casing is used in JavaScript?

Also most people use PascalCase for enum type objects in Javascript and capitalized values within. Sometimes namespaces are done in PascalCase also.

Why is camelCase used in JavaScript?

When multiple words are used to form a variable, camel case joins those words together, without any white space, and delineates the start of each new word with a capital letter.

Should I use camelCase in JavaScript?

camelCase is used by JavaScript itself, by jQuery, and other JavaScript libraries. Do not start names with a $ sign. It will put you in conflict with many JavaScript library names.


3 Answers

I prefer PascalCase for constructors and camelCase for everything else. That's the style that JS standard library uses and well... every JS framework I've seen so far :)

And I use all_lowercase naming convention for all files served from web. There are some case-insensitive file systems out there.

like image 165
Damir Zekić Avatar answered Sep 30 '22 19:09

Damir Zekić


The core language uses InitialCaps for constructors (e.g. Object, Date, Number, RegExp) and camelCase for methods and properties (e.g. something.toString(), quantity.valueOf(), regexp.ignoreCase). This convention is also followed in the DOM specifications and implementations (e.g. HTMLElement.setAttribute()). So it makes the most sense to adopt the same convention, or you finish up with a horrendous mishmash of styles like:

var number_of_fish_requested = document.getElementById("fish").value; var fish_count = parseInt(number_of_fish_requested, 10); 

which just becomes utterly confusing, not only to type but, much more importantly, to read.

(You spend more time reading code, trying to debug or modify it, than you ever do writing it in the first place.)

like image 30
NickFitz Avatar answered Sep 30 '22 19:09

NickFitz


What I have seen so far is a very large diversity of casing standards.

As far as I'm concerned, I use C# styling for writing my JavaScript code. I use classes a lot (well functions as classes, and usually don't have independent functions.) So, I use PascalCase for class names, public methods, properties and all global variables and camelCase for arguments, local variables and private functions. This somehow reflects my common environment, helping to distinguish the variable scopes. I also tend to keep my class functions in a separate file with the same name as my ClassName (ClassName.js, ClassName.min.js).

This was about my approach.

I also noticed that Java programmers, follow the Java rules (and the writing style resembles the Java language.) Ruby on Rails programmers follow their own naming standards such as underscore_separated_var_name.

Further, as you mentioned, there is a tendency to use pascalCase a lot in naming in very popular frameworks whose authors come from different communities like Linux/Open source community and Microsoft developers (jQuery, knockout.js, JSJaC, etc.)

I should note that none of these methods are wrong or right, when it comes to JS. The primary purpose of your naming conventions and file structuring is the readability. If you are consistent then you in future and your fellow developers will quickly understand and get on with your code.

like image 21
Oybek Avatar answered Sep 30 '22 20:09

Oybek