loading...

How should we indent `const` declarations?

kenbellows profile image Ken Bellows ・2 min read

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!

Posted on by:

kenbellows profile

Ken Bellows

@kenbellows

Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article! He/him

Discussion

markdown guide
 

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.

 

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

 

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.

 

I write const repeatedly.

var/let works nicely with 4 space indentation, but what if you use 2? I see a lot of code come that is indented with 2 spaces.

 

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.

 

Yes, I write let over and over. I try to stay away from var.

Omg! Completely missed that paragraph!

 

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.

 

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.

 

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.

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

 

Uhh wait. There ARE const indentations...?

 

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';
 
 
const
  foo = 10,
  bar = 20,
  baz = 30
;
if (test) {
  console.log('aligned (usign spaces, for the "shake" of Richard Hendricks)');
}