Interview question

What are mutating vs non-mutating array methods, and why does the distinction matter? Mutating बनाम non-mutating array methods क्या हैं, और यह अंतर क्यों important है?

Answer

Some array methods change the original array in place (mutating), while others return a new array leaving the original untouched (non-mutating). This matters greatly for predictable code and frameworks relying on immutability.

Mutating (changes original)	Non-mutating (returns new)
push(), pop()	concat()
shift(), unshift()	slice()
splice()	map(), filter(), reduce()
sort(), reverse()	[...spread]
fill(), copyWithin()	toSorted(), toReversed() (ES2023)

const original = [3, 1, 2];

// MUTATING example - push changes the original
function addItemMutating(arr, item) {
    arr.push(item);
    return arr;
}
const result1 = addItemMutating(original, 4);
console.log(original === result1); // true - same array!
console.log(original); // [3, 1, 2, 4] - original changed

// NON-MUTATING example - spread creates a new array
function addItemImmutable(arr, item) {
    return [...arr, item];
}
const arr2 = [1, 2, 3];
const result2 = addItemImmutable(arr2, 4);
console.log(arr2 === result2); // false - different arrays
console.log(arr2);    // [1, 2, 3] - unchanged
console.log(result2); // [1, 2, 3, 4]

// Why it matters: unexpected mutations cause hard-to-track bugs
function processOrders(orders) {
    orders.sort((a, b) => a.total - b.total); // mutates the caller's array!
    return orders.slice(0, 5);
}
// Caller's original 'orders' array order is now unexpectedly changed

// Safer version
function processOrdersSafe(orders) {
    return [...orders].sort((a, b) => a.total - b.total).slice(0, 5);
}

// ES2023 added non-mutating alternatives to classic mutating methods
const arr3 = [3, 1, 2];
const sortedCopy = arr3.toSorted(); // new in ES2023, does not mutate arr3
console.log(arr3);        // [3, 1, 2] - unchanged
console.log(sortedCopy);  // [1, 2, 3]

Mutating (original बदलते हैं)	Non-mutating (नया return)
push(), pop()	concat()
shift(), unshift()	slice()
splice()	map(), filter(), reduce()
sort(), reverse()	[...spread]

const original = [3, 1, 2];

// MUTATING example
function addItemMutating(arr, item) {
    arr.push(item);
    return arr;
}
const result1 = addItemMutating(original, 4);
console.log(original === result1); // true - same array!
console.log(original); // [3, 1, 2, 4]

// NON-MUTATING example
function addItemImmutable(arr, item) {
    return [...arr, item];
}
const arr2 = [1, 2, 3];
const result2 = addItemImmutable(arr2, 4);
console.log(arr2 === result2); // false
console.log(arr2);    // [1, 2, 3] - बदला नहीं
console.log(result2); // [1, 2, 3, 4]

// क्यों important है
function processOrders(orders) {
    orders.sort((a, b) => a.total - b.total); // caller का array mutate होता है!
    return orders.slice(0, 5);
}

// सुरक्षित version
function processOrdersSafe(orders) {
    return [...orders].sort((a, b) => a.total - b.total).slice(0, 5);
}

// ES2023 - non-mutating alternatives
const arr3 = [3, 1, 2];
const sortedCopy = arr3.toSorted(); // arr3 को mutate नहीं करता
console.log(arr3);        // [3, 1, 2]
console.log(sortedCopy);  // [1, 2, 3]

Was this answer clear?

Subjects

Related questions