Ми дуже часто працюємо з масивами даних. Чи то списки, чи то дані для графіків, чи то ще які колекції фантиків Turbo — так чи інакше ми їх перебираємо, перетворюємо, складаємо, фільтруємо.
І дуже зручно, коли є можливість зробити якусь дію над масивом, і при цьому не зіпсувати, або кажучи академічно, не мутувати вихідний масив. Бо ми можемо робити різну послідовність дій над даними, які він містить, і зміна оригінального вмісту однозначно призведе до небажаних наслідків.
В JS тривалий час це можна було зробити доволі обмеженому, хоча й популярному, колі випадків:
map, filter, reduce та slice. Проте лишалися кейси, які, може й не такі поширені, проте, певно, критичніші.Коли нам потрібно зробити сортування масиву чи вставити елемент на певний індекс, або ж обернути порядок елементів, доступні нам методи якраз мутують вихідний масив. Що, кажу з власного досвіду, часто може призвести до багів, особливо якщо звикнути писати в "імутабельно-функціональному" стилі. Тоді просто забуваєш, що в JS є така підстава.
Проте прийшов час відкинути геть сум та зневіру. Якщо бути точним, то цей час прийшов ще 2023 року, коли в Baseline зʼявилася скромна трійця методів масиву
toSorted, toReversed та toSpliced.Вони роблять рівно те саме, що й їхні старші родичі, однак при цьому повертають саме нову копію масиву з внесеними змінами. А вихідний масив лишається у первозданному вигляді. Але важливо: копіюється сам масив, не його вміст. Об'єкти в такому масиві доступні за тим же посиланням, що й в оригінальному, вважайте.
const source = [3, 2, 7, 4];
console.log(source.toSorted());
// > [2, 3, 4, 7]
console.log(source.toReversed());
// > [4, 7, 2, 3]
console.log(source.toSpliced(3, 0, 5));
// > [3, 2, 7, 5, 4]
console.log(source);
// > [3, 2, 7, 4]
До речі,
toSpliced можна (але не значить, що треба) використати, як замінник для іммутабельного push:const push = (arr, ...args) =>
arr.toSpliced(arr.length, 0, ...args);
console.log(push(['a', 'b', 'c'], 'd', 'e'));
// > ['a', 'b', 'c', 'd', 'e']
Тож тепер знатимете, що замість ручного створення "проксі-масивів", ви можете просто скористатися нативним методом JS, і ваш код стане ще лаконічнішим і надійнішим.
📖 MDN: toSorted
📖 MDN: toReversed
📖 MDN: toSpliced
До речі, ми додали нову порцію квитків на Лампову Співбесіду: Senior Frontend, що відбудеться офлайн у Львові наступної суботи. Я б на вашому місці не зволікав.
@babichdev