Why I use double quotes in JavaScript

Coding style is often a topic of fierce debates, mostly unnecessary. What matters is being consistent throughout the project, or better, your entire codebase. Tools like JSHint, JSCS and ESLint contribute and popularized advantages which come from keeping code style consistent. I'm used to airbnb/javascript style guide with couple exceptions and this post justify my decision to go for double quotes in our entire JavaScript codebase.

Cons

Let's start with cons of using double quotes I heard from people.

I have to use \ to escape HTML attributes

Here's the example people often back up their opinion.

// double quotes
element.innerHTML = "<img src=\"cat.gif\" />";

// single quotes
element.innerHTML = '<img src="cat.gif" />';

But, let's be honest. Why do you need to hardcode any HTML tag as string? Would you really accept using innerHTML as solution for mutating DOM doing code review? I don't. Nevertheless, I agree it's additional work and thing to remember.

The better example would be what you do writing acceptance tests. The sad thing is that many developers or rather companies tend to left this task for testers so such examples don't gain such popularity like jQuery style hacks.

I.amOnPage("/login");
I.fillField("[name=\"email\"]", "[email protected]");
// but this also works
I.fillField("[name=password]", "123456");
I.click("Login");

I have to press additional key [it slows me down]

Really? The same argument is used for dropping semicolons at the end of the line. If you claim typing speed is your main efficiency bottleneck there are two possible reasons. You're way better than me or you don't know what programming is about. Personally, I spend more time on thinking about what I'm going to write and reading others people code.

It's more popular convention to use single quotes in JavaScript

Agree. Entire 13% more.

Pros

It's closer to JSON

I find this is especially useful when writing unit tests when I have to mock some data. I can just copy&paste JSON into my code without ESLint yelling at me.

Emmet uses double quotes also for JSX

I prefer to use JSX when working with React but not only. One of the JSX advantages over HyperScript is that it works with Emmet which is an experience I'm used to and enjoy.

nav#menu>ul.list>li.list__item{$}*3

<nav id="menu">
  <ul className="list">
    <li className="list__item">1</li>
    <li className="list__item">2</li>
    <li className="list__item">3</li>
  </ul>
</nav>

Which bring us to counterargument that double quotes are for HTML not JavaScript. Which on the other hand bring us to next double quotes advantage.

Double quotes are broadly used in... programming

I don't consider myself a polyglot programmer, although I can code in C++, Java, PHP, JavaScript, Ruby, Elm and Elixir. In some of them it doesn't really matter whether you use single quotes or double quotes for strings (i.e. Ruby) but in others (i.e. Elixir) it's totally different data type or a syntax error (i.e. Elm). So, using double quotes prevents me from constant context switching.

Double quotes looks clearly different than back-tick

ES6 brings template strings to JavaScript which are created with back-tick `. Maybe it doesn't make any difference for you and your retina display but when you give a talk your audience will appreciate it.

Tooling

It’s reasonable to favor consistency over personal preferences. No matter you prefer single or double quotes, there are extensions for toggling quotes which are useful when you copy i.e. configuration for live chat or error reporting service.

ESLint config for double quotes:

/* .eslint.json */
{
  "rules": {
    "quotes": ["error", "double"]
  }
}

Photo by Jørgen Håland on Unsplash.