Array operations for useReducer or Redux with ES6+

array-helpers.js

// Returns a new array, with the element at pos replaced with replacement item or calling the replacement function on arr[pos]
function changeAtIndex(arr, pos, replacement) {
	if (typeof replacement == "function") {
		replacement = replacement(arr[pos]);
	}

	return [...arr.slice(0, pos), replacement, ...arr.slice(pos + 1)];
}

// Returns a new array, with the first element matching the predicate function replaced with replacement item or calling the replacement function on arr[pos]
function changeAtKey(arr, predicate, replacement) {
	return changeAtIndex(arr, predicate(arr), replacement);
}

// Returns a new array, with the insertion element inserted at pos
function insertAtIndex(arr, pos, insertion) {
	return [...arr.slice(0, pos), insertion, ...arr.slice(pos)];
}

// Returns a new array, with the element at pos removed
function removeAtIndex(arr, pos) {
	return [...arr.slice(0, pos), ...arr.slice(pos + 1)];
}

// Returns a new array with the element matching the predicate removed
function removeAtKey(arr, predicate){
	return removeAtIndex(arr, predicate(arr));
}

array-helpers.ts

type ReplaceFn<TData> = (data: TData) => TData

// Returns a new array, with the element at pos replaced with replacement item or calling the replacement function on arr[pos]
export function changeAtIndex<TData>(inArray: Array<TData>, index: number, replacement: TData | ReplaceFn<TData>) {
    if (typeof replacement == "function") {
        replacement = (replacement as ReplaceFn<TData>)(inArray[index])
    }

    return [...inArray.slice(0, index), replacement, ...inArray.slice(index + 1)]
}

// Returns a new array, with the insertion element inserted at pos
export function insertAtIndex<TData>(inArray: Array<TData>, index: number, insertion: TData) {
	return [...inArray.slice(0, index), insertion, ...inArray.slice(index)];
}

// Returns a new array, with the element at pos removed
export function removeAtIndex<TData>(inArray: Array<TData>, index: number) {
	return [...inArray.slice(0, index), ...inArray.slice(index + 1)];
}

// Returns a new array, with with an element moved from fromIndex to toIndex
export function moveInArray<TData>(inArray: Array<TData>, fromIndex: number, toIndex: number) {
    const outArray = [...inArray]
    const [itemToMove] = outArray.splice(fromIndex, 1)
    outArray.splice(toIndex, 0, itemToMove)

    return outArray
}