Inconsistent quotes in the JS object's array values and keys

Question

const roads = ["Alice's House-Bob's House", "Alice's House-Cabin", "Alice's House-Post Office"]; 

function buildGraph(edges) {
    let graph = Object.create(null);
    function addEdge(from, to) {
        if (graph[from] == null) {
            graph[from] = [];
        }
        graph[from].push(to);    
    }
    for (let [from, to] of edges.map(r => r.split("-"))) {
        addEdge(from, to);
        addEdge(to, from);
    }
    return graph;
}

const roadGraph = buildGraph(roads);
console.log(roadGraph);

//roadGraph object:
[Object: null prototype] {
"Alice's House": [ "Bob's House", 'Cabin', 'Post Office' ],
"Bob's House": [ "Alice's House" ],
Cabin: [ "Alice's House" ],
'Post Office': [ "Alice's House" ]
}

Why do we have such inconsistencies?

Cabin and Post Office values in Alice's House are in single quotes
the Cabin key has no quotes
Post Office key has single quotes

You're seeing the browser debugger showing you your object in the simplest way it thinks it can. It makes absolutely no difference how a string appears quoted; the quotes aren't part of the string value anyway. — Pointy
– Pointy, Commented Mar 28, 2020 at 13:43
You shouldn't pay attention to this. It's just how your console chooses to represent things - it's not reflective of what you actually have as content, since string content doesn't have surrounding quotes. The console only puts them there to make it more clear it's a single string. And it likely swaps between single and double quotes because the string already contains a single quote, so it just puts doubles around it to be clear where it starts and ends. — VLAZ
– VLAZ, Commented Mar 28, 2020 at 13:43
{cabin: 1} or {"cabin": 1} or {'cabin': 1} or {`cabin`: 1} ..... it does not matter — epascarello
– epascarello, Commented Mar 28, 2020 at 13:45
Browser debugger output shows a json property double quoted if property name contains spaces. — Berk Öztürk
– Berk Öztürk, Commented Mar 28, 2020 at 13:56

JDB · Accepted Answer · 2020-03-28 13:48:17Z

2

In JavaScript, single and double quotes are interchangeable. You can use whichever you prefer.

Double quotes are often preferred when the string contains single quotes, as it reduces the amount of escaping:

"Alice's House"
'Alice\'s House'

It would appear that the console prefers single quotes, but switches to double quotes when the string contains an apostrophe (single quote).

In general, some prefer to choose a single style and stick to it, but there is no requirement to do so, so it's up to the developer or team. However, for auto-generated code, there is no need to be concerned.

edited Mar 28, 2020 at 13:48

answered Mar 28, 2020 at 13:43

JDB

26.1k5 gold badges81 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

VLAZ Over a year ago

This is not about what to use but why it's shown.

Mr. Polywhirl Over a year ago

@VLAZ They explained this, "as it reduces the amount of escaping".

VLAZ Over a year ago

@Mr.Polywhirl but the quotes are irrelevant. "Which quotes to use" is NOT an appropriate answer as it refers to string literals. If you're seeing them in the console, that's not a string literal and not something that you use. In fact, there is nothing stopping the console using | or 👍 as delimiters of strings.

JDB Over a year ago

@vlaz updated. I feel the meat of my answer was still correct, but I missed that the content at the bottom was generated by the console.

Collectives™ on Stack Overflow

Inconsistent quotes in the JS object's array values and keys

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related