Should I Use Single Quotes or Double Quotes in Salesforce Lightning Components?

A question came up in a recent DEV601 (Programming Lightning Components) class regarding the use of single quotes vs. double quotes in Lightning Components.

After a discussion in the Salesforce University DEV601 Chatter group and some quick experimentation, the conclusion I came to is that the Lightning Component Framework, which was built on the Aura UI Framework, looks at quotes in the same manner JavaScript in general looks at quotes – it simply doesn’t care whether you use single quotes or double quotes.

Even though the framework itself will accept single quotes or double quotes for most operations, as an instructor and advisor I want to ensure that we teach good programming practices. In response, I have come up with some guidelines and recommendations for the use of quotes in Lightning Component code.

Here are my recommendations, broken down by common resources found in a Component Bundle:

Components and Applications

Lightning Components and Applications support tag-based markup that can include references to other components as well as HTML elements. Most components and HTML elements support attributes, which are key/value pairs that allow you to provide additional information that is used in rendering the component or element.

For example:

<ui:button label=“My Button" press="{!c.buttonPress}" />

~ or ~

<div class="slds">

 

Recommendation: Go with the flow and stick with double quotes

While both single quotes and double quotes will work for tag attributes, I recommend that you standardize on double quotes because this is the traditional convention that we have been using since long before Lightning Components. If you are familiar with Visualforce components, we use double quotes when defining attribute values, so for the sake of standardization I believe that we should stick with double quotes for defining attribute values in Lightning Components.

Controllers, Helpers and Renderers

Within a Component Bundle, there are three resources where you write JavaScript functions: Controllers, Helpers and Renderers. Because we are working with JavaScript, we are playing by a set of rules that have been around for decades and are universal across frameworks.

I did not make this connection at first with Lightning, so I assumed that there was some standard convention for when single quotes should be used and when double quotes should be used like there is with Apex and Visualforce. I was wrong. Single quotes and double quotes are pretty much interchangeable.

With the understanding that Controllers, Helpers and Renderers are not some proprietary implementation of JavaScript, and that JavaScript does not care whether single quotes or double quotes are used, I came up with some recommendations based on general JavaScript best practices.

Recommendation: Use double quotes in JSON objects

When you find yourself having to create key / value pairings for use cases such as passing parameters to JavaScript functions, you are essentially creating what are called JSON objects. The JSON standard specifies the use of double quotes around keys and string values, so my thought is…why mess with standards?

For example:

{
  "firstName"     : "Erinn",
  "lastName"      : "Topalovich",
  "age"           : 9,
  "isAwesome"     : true
}

 

Recommendation: Use double quotes to avoid having to escape single quotes

If you find that using single quotes to encapsulate your values forces you to have to escape single quotes within strings, save yourself the trouble and go with double quotes.

For example:

var singleQuoteString = 'This is a string that\'s single quoted'

~ vs ~

var doubleQuoteString = "This is a string that's double quoted"

 

Recommendation: Pick one and stick with it

Since it doesn’t really matter either way, my recommendation for a standard is to simply have a standard. Go with single quotes or go with double quotes – just make sure you stick with what you pick for the sake of consistency in your code.

CSS Styles

The CSS standard states that you can use either single quotes or double quotes for strings, and for URLs you can use single quotes, double quotes, or no quotes at all.

Recommendation: Use single quotes for string values and URLs

Since we are already accustomed to using single quotes for string values in Apex and since escaping single quotes isn’t something we find ourselves having to do very often in CSS, I would recommend standardizing on the use of single quotes for both strings and URLs within your Style resource.

Again, it doesn’t matter which method you choose – single quotes, double quotes, or no quotes when referencing URLs – my overarching recommendation is to pick one and stick with it as a standard in your organization.

For example:

.THIS .myClass {
     width: 256px;
     height: 256px;
     background: url('/resource/myImage');
     margin: auto;
     text-align: center;
}

Acknowledgements

Thank you the Salesforce University instructors and subject matter experts who provided their input on this topic. Please follow them on Twitter:

Additional Resources

Mike Topalovich Salesforce Technical Architect in Chicago
Mike Topalovich - Salesforce Certified Force.com Platform Developer I Mike Topalovich - Salesforce Certified Force.com Platform Developer II Mike Topalovich - Salesforce Certified Force.com Developer Mike Topalovich - Salesforce Certified Force.com Advanced Developer
Mike Topalovich - Salesforce Certified Mobile Solutions Architecture Designer Mike Topalovich - Salesforce Certified Force.com Platform App Builder Mike Topalovich - Salesforce Certified Administrator Mike Topalovich - Salesforce Certified Advanced Administrator
Mike Topalovich
Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.

I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.

Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.
Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

Leave a Reply