Theory: Modification

The primitive data types we studied so far are impossible to change. Any functions and methods over them return new values, but cannot do anything with the old ones.

const name = 'Hexlet';
name.toUpperCase(); // 'HEXLET'
// the 'name' value was not changed
console.log(name); // 'Hexlet'

This rule does not work with arrays. Arrays can change: they can increase, decrease, or change index values. We'll check into all of these operations in the following.

Changing of array elements

The syntax for changing an array element is essentially the same as for accessing an array element. The only difference is the assignment:

const animals = ['cats', 'dogs', 'birds'];
// Changes the first element of the array
animals[0] = 'horses';
console.log(animals); // => ['horses', 'dogs', 'birds']

The most unexpected thing in this code is a change of the constant. Constants in JavaScript are not exactly how we imagined them before. A constant can store only a reference to the data (we will discuss it in the following lessons), but not the data itself. This means that we can change the data, but not the link. Technically, this means that we cannot replace the entire value of a constant:

const animals = ['cats', 'dogs', 'birds'];
// We change the data, but the array itself remains the same
// This code works
animals[2] = 'fish';
console.log(animals); // => ['cats', 'dogs', 'fish']

// This will cause an error, because the constant is replaced
animals = ['fish', 'cats'];
// Uncaught TypeError: Assignment to constant variable

Adding an element to an array

The push() method adds an element to the end of an array:

const animals = ['cats', 'dogs', 'birds'];
animals.push('horses');

// the 'animals' array has been changed, it was increased
console.log(animals); // => ['cats', 'dogs', 'birds', 'horses']

// the string 'horses' has been added to the end of the array (index = 3)
console.log(animals[3]); // => 'horses'

The unshift() method adds an element to the beginning:

const animals = ['cats', 'dogs', 'birds'];
animals.unshift('horses');

// the 'animals' array has been changed, it was increased
console.log(animals); // => ['horses', 'cats', 'dogs', 'birds']

// the string 'horses' was added to the beginning of the array (index = 0)
console.log(animals[0]); // => 'horses'

Sometimes the addition index is known immediately, and in such a case the addition works the same way as the change:

const animals = ['cats', 'dogs', 'birds'];
animals[3] = 'horses';
console.log(animals); // => ['cats', 'dogs', 'birds', 'horses']

Deleting an element from an array

You can delete an element from an array using a special delete statement: delete arr[index].

An example:

const animals = ['cats', 'dogs', 'birds'];
delete animals[1]; // delete element with index 1
console.log(animals); // => ['cats', <1 empty item>, 'birds']

This method has several disadvantages, coming from the features of the internal organization of JavaScript. For example, after such deletion, you may be surprised to see that an array size has not changed:

animals.length; // 3

There are other features and consequences of using this operator, which we will not drill down now. We presented it only as an example and do not recommend to use it when coding. In general, reducing array size is a rather undesirable operation. We'll talk more about this during one of the following lessons.