Теория: Модификация

Примитивные типы данных, с которыми мы работали до сих пор, невозможно изменить. Любые функции и методы над ними возвращают новые значения, но не могут ничего сделать со старым.

const name = 'Hexlet'
name.toUpperCase() // 'HEXLET'
// Значение name не поменялось
console.log(name) // 'Hexlet'

С массивами это правило не работает. Массивы могут меняться: увеличиваться, уменьшаться, изменять значения по индексам. Ниже мы разберем все эти операции.

Изменение элементов массива

Синтаксис изменения элемента массива практически такой же, как и при обращении к элементу массива. Разница лишь в наличии присваивания:

const animals = ['cats', 'dogs', 'birds']
// Меняется первый элемент массива
animals[0] = 'horses'
console.log(animals) // => [ 'horses', 'dogs', 'birds' ]

Самое неожиданное в данном коде – изменение константы. Константы в JavaScript не совсем то, как мы себе это представляли раньше. Константы хранят ссылку на данные (подробнее об этом в следующих уроках), а не сами данные. Это значит что менять данные можно, но нельзя заменить ссылку. Технически это значит, что мы не можем заменить все значение константы целиком:

const animals = ['cats', 'dogs', 'birds']
// Меняем данные, а сам массив остался тем же
// Такой код работает
animals[2] = 'fish'
console.log(animals) // => [ 'cats', 'dogs', 'fish' ]

// Произойдет ошибка, так как здесь идет замена константы
animals = ['fish', 'cats']
// Uncaught TypeError: Assignment to constant variable.

Добавление элемента в массив

Метод push() добавляет элемент в конец массива:

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

// массив animals изменен — стал больше
console.log(animals) // => [ 'cats', 'dogs', 'birds', 'horses' ]

// строка 'horses' была добавлена в конец массива (индекс = 3)
console.log(animals[3]) // => 'horses'

Метод unshift() добавляет элемент в начало массива:

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

// массив animals изменен — стал больше
console.log(animals) // => [ 'horses', 'cats', 'dogs', 'birds' ]

// строка 'horses' была добавлена в начало массива (индекс = 0)
console.log(animals[0]) // => 'horses'

Иногда индекс добавления известен сразу и в таком случае добавление работает так же как и изменение:

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

Удаление элемента из массива

Удалить элемент из массива можно с помощью специальной конструкции delete: delete arr[index].

Пример:

const animals = ['cats', 'dogs', 'birds']
delete animals[1] // удаляем элемент под индексом 1
console.log(animals) // => [ 'cats', <1 empty item>, 'birds' ]

Этот способ обладает рядом недостатков, завязанных на особенности внутренней организации языка JavaScript. Например, после такого удаления, можно с удивлением заметить, что размер массива не изменился:

animals.length // 3

Есть и другие особенности и последствия использования этого оператора, в которые сейчас не будем углубляться. Здесь мы его привели лишь для примера и не рекомендуем использовать при написании кода. В общем случае уменьшение размера массива — нежелательная операция. Подробнее об этом поговорим в одном из следующих уроков.