Ken Bellows

Posted on Jan 10, 2019

How should we indent `const` declarations?

#discuss #codestyle #javascript #esnext

I'm a huge fan of the additions to JavaScript of let and const to declare block-scoped variables. In particular, I love const for the clarity of intention it gives developers. If this is a value that should never be changed, make it a const so everyone (including your future self) knows not to change it.

But I have a complaint: while let and its predecessor var are each 3 characters, const is 5 characters, which ruins indentation!

// var is 3 characters, which aligns nicely with a 4-space indentation style
var foo = 10,
    bar = 20,
    baz = 50;

// let keeps to the same 3 character pattern
let apples = 5,
    oranges = 30, // gotta get that citrus, no scurvy for me
    bananas = 12;

// const ruins everything!!!
const dontchangeme = 10,
    howmuchindentshouldihave = 4,
    thisfeelsverydirty = 0x0;

const doesn't allow for a nice alignment of variable names during declarations if you're used to 4-space indentation! I don't like the above default of just hitting enter and letting the indentation fall where it will, but I don't know what to do about it. Here are three options I'm considering:

Indent 6 spaces for const declarations - this is okay, but I hate that it breaks conformity with the surrounding code.

const foo = 10,
      bar = 20,
      baz = 30;
if (test) {
    console.log('Misaligned! 😢')
}

Write const repeatedly - a few of my coworkers have adopted this pattern; I'm not sold. It just seems unnecessarily verbose to me.

// seems like a lot of keywords...
const foo = 10;
const bar = 20;
const baz = 30;

Give const its own line - I've used this a bit, and it's alright, but still feels uncomfortable.

const
    foo = 10,
    bar = 20,
    baz = 30;

I need some feedback. What have you used? Which of these do you like/hate?

Another thought I had is that there's a crowd of developers out there that has sort of been dealing with the "declarations are 2 spaces more indented than everything else" problem for a while now: the 2-space indentation folks! What do you all do about this? Do you just indent 4 spaces for declarations, or... something else?

Awaiting responses!

Top comments (12)

Frank Puffer • Jan 10 '19

I definitely prefer

const foo = 10;
const bar = 20;
const baz = 30;

not only for const but also for var and let.

It makes refactoring easier because each declaration is completely independent from the other ones. Just remove a line to remove a variable. You don't even need to change a comma to a semicolon.

Another advantage: Most search tools only show the line where the search string occurs. If you search for all occurences of bar in your editor, you might prefer to see

const bar = 20;

instead of

    bar = 20,

as a result because it provides more information.

I don't believe that typing a few more keywords will slow down your coding significantly.

Ken Bellows • Jan 10 '19

Clearer search results is an interesting point I hadn't heard before. 🤔 Nice one, I'll have to think on that

Ken Bellows • Jan 11 '19

So do you do the same with let and (if you still use it) var?

Yeah, that was my thought in the last paragraph of my post, they must already have an approach figured out since they use less indentation that the width of var or let. I'm curious to hear form an avid 2-spacer and see how they feel about it.

Michael • Jan 12 '19

I mean, we're talking about variables but this sounds like a problem with formatting code in general. I've come across this dilemma with just writing comments:

let id = 'value'; // Important Value
let element = 'elementNode'; // Important Element

Inline comments are always broken by line length. I've concluded after much time wasted, it's waste of time. I think consistency is more important, so if you are following a styleguide, or the rest of your identifiers are indented with a certain indent, just use that, even if it breaks it you can scan the code more easily looking for the same indent level, even if it doesn't match perfectly; noticing different indent levels just messes with that flow.

Julien Barbay • Jan 11 '19

6 spaces for me. Your 6 spaces example is broken to me, as for a multiline variable declaration block i would add an extra \n after it.

Frank Puffer • Jan 11 '19

But why? As soon as you run any code formatter over it, it will change indentation. Or do you know any code formatter that makes a difference between var and const?

Also, when working together with other developers, you should typically adhere to coding guidelines. Often these coding guidelines are enforced meaning that you won't be able to check in your code if they are not met. I have not heard of coding guidelines with such complicated indentation rules.

Ken Bellows • Jan 11 '19

I take your point regarding current practicality, but I think we should leave aside current patterns and tooling for this discussion. The point of this article is to question. what beat practices should be in the first place. Formatters and standards can always be updated if accepted best practices change.

Frank Puffer • Jan 11 '19

Good point - we should never stop thinking about how we could improve the current state.

Jen Chan • Jan 11 '19

Uhh wait. There ARE const indentations...?

Michael • Jan 12 '19 • Edited

No, he just meant as a practice, indenting a block of identifiers. Rather than declaring identifiers one line at a time, you can delimit them with commas to share a single statement.

let a = '1', b = '2';

So you indent them on a new line to indicate they share the same keyword but are still related.

let a = '1',
    b = '2';

Ken Bellows • Jan 12 '19

What do you mean?

View full discussion (12 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

DEV Community

How should we indent `const` declarations?

Top comments (12)

Read next

Working with GitHub OAuth Authentication

Module declaration in TS

We are simplifying (literals(arrays and objects)) in Js.

Conclusion of My Node.js Journey and a Sneak Peek into My Upcoming AWS Series