Interview question

What is array/object destructuring combined with the spread operator used for in immutable state updates? Immutable state updates में destructuring और spread operator को साथ कैसे use करते हैं?

Answer

Combining destructuring and spread is the standard pattern for updating state without mutating the original data - essential in frameworks like React and Redux which rely on immutability for change detection.

// Updating an object immutably
const state = { user: 'John', theme: 'light', notifications: true };

// WRONG - mutates the original object directly
function updateThemeWrong(state, newTheme) {
    state.theme = newTheme; // mutation - bad for React/Redux
    return state;
}

// CORRECT - spread creates a new object
function updateTheme(state, newTheme) {
    return { ...state, theme: newTheme }; // new object, original untouched
}
const newState = updateTheme(state, 'dark');
console.log(state.theme);    // light - original unchanged
console.log(newState.theme); // dark

// Updating nested state immutably
const appState = {
    user: { name: 'John', settings: { theme: 'light' } }
};
const updatedAppState = {
    ...appState,
    user: {
        ...appState.user,
        settings: {
            ...appState.user.settings,
            theme: 'dark'
        }
    }
};

// Removing a property immutably using destructuring + rest
const user = { id: 1, name: 'John', password: 'secret123' };
const { password, ...safeUser } = user; // extract password, keep the rest
console.log(safeUser); // { id: 1, name: 'John' } - password removed

// Updating an array immutably
const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updatedTodos = todos.map(todo =>
    todo.id === 1 ? { ...todo, done: true } : todo
);
console.log(updatedTodos); // id:1 is updated, id:2 unchanged, original array untouched

// Adding an item immutably
const withNewTodo = [...todos, { id: 3, done: false }];

// Removing an item immutably
const withoutFirst = todos.filter(todo => todo.id !== 1);

Destructuring और spread साथ use करना state को बिना mutate किए update करने का standard pattern है - React और Redux जैसे frameworks में essential है।

const state = { user: 'John', theme: 'light', notifications: true };

// गलत - direct mutation
function updateThemeWrong(state, newTheme) {
    state.theme = newTheme; // React/Redux के लिए बुरा
    return state;
}

// सही - spread से नया object
function updateTheme(state, newTheme) {
    return { ...state, theme: newTheme };
}
const newState = updateTheme(state, 'dark');
console.log(state.theme);    // light - original नहीं बदला
console.log(newState.theme); // dark

// Nested state update
const appState = {
    user: { name: 'John', settings: { theme: 'light' } }
};
const updatedAppState = {
    ...appState,
    user: {
        ...appState.user,
        settings: { ...appState.user.settings, theme: 'dark' }
    }
};

// Destructuring + rest से property हटाना
const user = { id: 1, name: 'John', password: 'secret123' };
const { password, ...safeUser } = user;
console.log(safeUser); // { id: 1, name: 'John' }

// Array immutably update करना
const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updatedTodos = todos.map(todo =>
    todo.id === 1 ? { ...todo, done: true } : todo
);

// Item जोड़ना
const withNewTodo = [...todos, { id: 3, done: false }];

// Item हटाना
const withoutFirst = todos.filter(todo => todo.id !== 1);

Was this answer clear?

Subjects

Related questions