What is the preferred declaration convention for objects or arrays: const or let?

Question

I'm not asking what's technically possible; I know you can do

const a = [];
const b = {};
a.push['sup'];
b.test = 'earth';

What I'm wondering is whether there's any convention for preferring let over const when it comes to arrays and objects that will have their internals modified. If you see an object declared with const, do you assume the intention was for the object to be immutable, and would you have preferred to see let instead, or, since some linters (like tslint) have a problem with that, is it better just to declare it with const and trust that anyone else reading the code knows that that doesn't mean it's immutable?

Answer 1

The const keyword in front of an object implies that there is an object, and you're working with references to alter it. It also (correctly) implies that you should not attempt to reassign references to this object.

const obj = {a: 'foo', b: 'bar'};

const obj2 = {z: 'baz'};

obj = obj2; // const will prevent this operation. 

const does not imply that the object properties should not be altered. It does imply that you should not try to change the reference.

If you plan to reassign references to the object, then you use let.

Source: AirBnB Javascript Style Guide

Answer 2

I favor const over let in ES6. In JavaScript, const means that the identifier can’t be reassigned. (Not to be confused with immutable values. Unlike true immutable datatypes such as those produced by Immutable.js and Mori, a const object can have properties mutated.)

If I don’t need to reassign, const is my default choice over let because I want the usage to be as clear as possible in the code.

I use let when I need to reassign a variable. Because I use one variable to represent one thing, the use case for let tends to be for loops or mathematical algorithms.

Reference: https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75#.9s2e58ihw

Example from MDN: The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

nameN The constant's name, which can be any legal identifier. valueN The constant's value; this can be any legal expression.

The let statement declares a block scope local variable, optionally initializing it to a value.

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

var1, var2, …, varN Variable name. It can be any legal identifier. value1, value2, …, valueN Initial value of the variable. It can be any legal expression.

From my opinion, it fairly depends on what you want to do with them. I found the statements above convincing enough to share with you.

Answer 3

There is no preferred one, its based on your choice of usage for that array or object. You have to understand mutation and reassigning clearly.

Mutation - updates the values present in the memory

Reassign - variable points to new memory locations where new values are stored

Let - offers both mutation and reassiging

Const - offers mutation but not reassiging

Both - doesnot offers redeclaring

If your usecase only needs mutation, you can go for const.. if you need reassigning then go for let.

// LET

let condiments = ['Ketchup', 'Soy Sauce', 'Sriracha'];

// Mutation possible
condiments[0] = 'Mayo';
console.log(condiments);//=> [ 'Mayo', 'Soy Sauce', 'Sriracha' ]

// Re-assigning possible
condiments = ['Mayo'];
console.log(condiments); //=> [ 'Mayo' ]

// Re-declaring not possible
//let condiments = [] //=> SyntaxError: Identifier 'condiments' has already been declared


// CONST

const utensils = ['Fork', 'Chopsticks', 'Spork'];

// Mutation Possible
utensils[2] = 'Spoon'
console.log(utensils); //=> [ 'Fork', 'Chopsticks', 'Spoon' ]
utensils.length = 0
console.log(utensils); //=> [ ]

// Re-assigning not possible
//utensils = ['Spoon']; //=> TypeError: Assignment to constant variable.

// Re-declaring not possible
//const utensils = {} //=> SyntaxError: Identifier 'condiments' has already been declared

Answer 4

This is probably a question you wont be able to get a final answer for, as it is very opinion-based.

A little bit of historical background can help to understand how the confusing const came to be in the first place:

Allan Wirfs-Brock, the former editor of the EcmaScript spec, himself said:

In a slightly different (and perhaps better) universe, ECMAScript const declaration would be named let and introduce a SSA binding.

And asked, why this was not the case, he responded:

let/const was a carry over from ES4 proposals and Moz JS1.7

TC39 never seriously explored naming alternatives

So you could say const is a bit of a misnomer, since it doesn't do what people who aren't familiar with it might expect it to do.

Since const works the way it does though and is almost certainly not going to change, I would still define your objects with const.

This might help people who are unfamiliar with the way const works to get a better understanding.

Maybe it could help to add a comment at the first occurrence of const with an object, along the lines of:

// Important: 'const' only ensures that 'styles' always references the same object,
// it does not render it immutable
const styles = {};

Opinions may vary though.