JavaScript: Double or Single quotes?

A few days ago someone messaged me and asked: “Are single quotes better than double?” The answers lie ahead. This article explains different situations in which one or the other should be used.

An “Is X better than Y…” question is a very common one with regard to JavaScript and jQuery programming in general:

Is $.fn.bind better than $.fn.on?
Is document ready event better than window load?
Are single quotes better than double quotes?

Why do programmers ask this question? It’s because they learned one way of doing something, and heard or saw someone else use a different method. So they want to find out if, as a programmer, they are doing “the best thing.” That’s understandable.

Consider the designer of the language or a JavaScript library such as jQuery. Why do developers of these tools design different ways of accomplishing something? Is it not because they first saw a problem, and then designed a solution for it in a form of a method or a function?

Of course. In a way, they reverse engineered the problem. But first they saw that problem. That’s why they created a solution for it. As a user of such tools (jQuery and JavaScript as a language) you must also understand the problem. Not the solution itself alone.

It would be easy to just use “the best thing” to solve a problem. But understanding the problem itself lies in understanding the circumstances in which this problem resides. In other words, there are no shortcuts for being a good JavaScript programmer, you have to go all-in.

What we truly have to understand here is that there is no such thing as a better way. But there is such thing as the proper way, given the circumstances. In some cases, the answer may surprise you. But what it comes down to is that the best way is not about choosing between either X or Y. Rather, it is about knowing the circumstances and using the proper technique that was designed for it.

With this in mind, let’s consider the proper way of using the single and double quotes in the JavaScript programming language.

var msg = "hello";
var msg = 'hello';
var msg = 'hello it's me'; // error, the apostrophe is also the closing single quote
var msg = 'hello it\'s me'; // correct; use \ to escape the apostrophe
var msg = "hello it's me"; // correct; single quote can be freely used inside double quotes

Which one is better? The question no longer makes sense. We are using the circumstances. In some circumstances you will have double quoted strings. In others you won’t. This depends on so many things. But the best way is the one you choose based on circumstances.

In order to always use the better way of doing something, you need to understand all available ways first. This can be achieved only by studying and practice.

As you may know JSON is the format that consists of a set of name and value pairs. The inventor of the JSON string format (a way to represent an object in string/text format) created a rule that the name in a name/value pair must be enclosed in single or double quotes:

    "number": 1;
    "msg": "hello",

You may as well use single quotes:

    'number': 1;
    'msg': "hello",

There is no difference. Neither is better nor worse than the other.

But there is one interesting detail. In JavaScript, we have identifier names. Also known as variable names. Let’s say we have a variable named backgroundColor. To represent that in JSON format we could do the following:

{ "backgroundColor": "#ffeeee"; }
{ "background-color": "#ffeeee"; }

Both of them are correct. But in jQuery we have a function called animate() that takes a JavaScript Object Literal notation (similar to JSON format, except quotes around name are not required) to represent target CSS property values to which the HTML element will be animated to:

$("div").animate( { backgroundColor: "#ff0000" }, 1500);   // animate in 1.5 second

backgroundColor by itself is a correct identifier name. It does not start with a number (which is against identifier name rules) and it contains a capital letter, which is also acceptable.

But backgroundColor is an alias to background-color. Yet, we cannot use background-color identifier name with animation function without an error generated:

// Will result in a syntax error: identifier name cannot contain minus character (-)
$("div").animate( { background-color: "#ff0000" }, 1500);

The minus sign is an invalid identifier name, and cannot be used as a variable name declaration:

var background-color = "#ff0000";  // error

Here, even double or single quotes will not save us:

var "background-color" = "#ff0000";  // error once again

But in particular to the Object Literal format. The double or single quotes make it proper:

// Correct when double or single quotes are used:
$("div").animate( { "background-color": "#ff0000" }, 1500); // correct
$("div").animate( { 'background-color': "#ff0000" }, 1500); // correct
var background = { "background-color": "#ff0000" }, 1500); // correct

Incidentally by adding quotes around the name of a property or a method in Object Literal format it turns it into the correct JSON format. This is why there is a little confusion in deciphering the difference between an Object Literal and JSON. They are similar but not the same. JSON is a string format, it requires using single or double quotes around the property name. That is, if you wish to call it the proper JSON format.

Object Literal is not just a string format: it is a literal representation of an object as a string. Incidentally, that is exactly what JSON is too! So, the line is quite thin. The rule is when a function requires a JSON as a parameter, it is better to (or I should say, we must…) use the quotes around property name. But in most cases, and when not dealing with sending objects over the network (as a string) the Object Literal format is enough. It can be passed to a function or a jQuery method as a collection of name/value pairs when we need to use multiple (more than one) parameters.

Single or double quotes as a preference

Code aesthetics are important. But programming is also about the function of the code. Sometimes double quotes are used if the text contains a lot of apostrophes (which are commonly represented by one single-quote. This way you don’t need to escape every single-quote. However, you still do have to escape double quotes! So it’s a trade off.

JavaScript programmers have a preference for using either single or double quotes when it comes to creating string values. Double quotes is probably your favorite.

If you are using double quotes, you have to escape double quotes within the message using the slash character \”. If your preference is single quotes, escape all inner single quotes with \’.

Really, there is no “best way.” You just have to look at circumstances.

Learn new ways of doing things. Often the fastest way to get there is to experiment and write code. You can widen your perspective only from experience, by doing things.

jQuery Tutorials