JavaScript Array const

Most arrays in modern JavaScript are declared with const. That surprises people at first, because the arrays still change all the time. This lesson explains exactly what const locks, what it does not, and how to lock an array for real when you need to.

// const Locks the Variable, Not the Array

const means the variable will always point to the same array. The contents of that array can still change freely:

const cars = ["Saab", "Volvo"];

cars.push("BMW");        // allowed: changing contents
cars[0] = "Toyota";      // allowed: changing an element
cars.sort();              // allowed: rearranging

console.log(cars);

cars = ["Audi"];   // TypeError: Assignment to constant variable

// Emptying a const Array

Since you cannot reassign it to [], empty it in place instead:

const queue = ["a", "b", "c"];

queue = [];              // TypeError
queue.length = 0;        // works: removes every element
queue.splice(0);         // also works

// Must Be Assigned Right Away

const list;         // SyntaxError: Missing initializer in const declaration
const list = [];    // correct

// Block Scoped

A const array follows the same block-scope rules as any const:

const colors = ["red"];

{
  const colors = ["blue"];   // a different array, only inside this block
  console.log(colors);         // ["blue"]
}

console.log(colors);           // ["red"]

// Compared with var

const arrived in 2015. Before that, arrays were declared with var, and you will still see it in older code. The rules you learned in JS Scope apply to arrays too:

// var: no block scope
var list = ["a"];
{
  var list = ["b"];   // the SAME variable, replaced
}
console.log(list);

A var array can even be used before the line that declares it (hoisting, from JS Hoisting):

cars = ["Saab", "Volvo"];
var cars;          // allowed, but confusing

Redeclaring is the other big difference. var lets you declare the same name again anywhere. const does not allow it in the same scope, in either order:

var cars = ["Volvo"];
var cars = ["BMW"];       // allowed with var

const bikes = ["BMX"];
var bikes = ["Trek"];     // SyntaxError: Identifier 'bikes' has already been declared

{
  const bikes = ["Trek"]; // allowed: a new block is a new scope
}

That SyntaxError stops the whole script before any of it runs, so the mistake cannot slip by unnoticed.

// When You Would Use let Instead

Only when the variable itself needs to point to a different array later, typically because you rebuild it with a method that returns a new array:

let visible = allItems;
if (onlyInStock) {
  visible = visible.filter(item => item.stock > 0);   // reassigned to a new array
}

Even this is often written with const by using a ternary:

const visible = onlyInStock ? allItems.filter(i => i.stock > 0) : allItems;

// Truly Locking an Array: Object.freeze()

When an array must never change, such as a fixed list of options, freeze it:

const DAYS = Object.freeze(["Mon", "Tue", "Wed", "Thu", "Fri"]);

DAYS[0] = "Monday";    // ignored (TypeError in strict mode)
DAYS.push("Sat");      // TypeError: Cannot add property 5, object is not extensible

console.log(DAYS[0]);   // "Mon"

// Summary

// Quick Check

var team = ["Ava"];
{
  var team = ["Ben"];
}
console.log(team);

const DAYS = Object.freeze(["Mon", "Tue"]);
DAYS[0] = "Sun";
console.log(DAYS[0]);

// Try It

▶ Open Playground

1. Click Open Playground. Push to the const array, sort it, and change an element
2. Try to reassign it and read the error
3. Empty it using length = 0 and confirm it is []
4. Freeze an array of objects and show that the objects inside can still change