{
    "slug": "js_object_mutation_bugs",
    "term": "Accidental Object Mutation Bugs",
    "category": "javascript",
    "difficulty": "intermediate",
    "short": "Objects and arrays are passed by reference in JS — mutating a function parameter or array element mutates the original, causing subtle cross-component state bugs.",
    "long": "JavaScript passes objects and arrays by reference. Mutating a function parameter mutates the caller's object. Common in: React state mutations (never mutate state directly), Redux reducers, array methods (sort(), splice(), reverse() mutate in place vs map(), filter(), slice() which return new arrays). Solutions: spread to clone ({...obj}), structuredClone() for deep clone, Object.freeze() to prevent mutation, immutable patterns. Mutation detection: Redux DevTools, React StrictMode double-invokes reducers to catch mutations.",
    "aliases": [],
    "tags": [
        "javascript",
        "mutation",
        "immutability",
        "react"
    ],
    "misconception": "const prevents object mutation — const only prevents reassignment of the binding, not mutation of the object's properties.",
    "why_it_matters": "Accidental mutation causes shared state bugs where changing data in one component silently affects another — extremely hard to debug in large applications.",
    "common_mistakes": [
        "Sorting arrays in place without cloning: users.sort() mutates the original.",
        "Mutating React state directly: state.items.push(item) — never re-renders.",
        "Not knowing splice() mutates but slice() doesn't."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "js_prototype_errors",
        "immutability",
        "js_spread_rest",
        "js_structuredclone"
    ],
    "prerequisites": [
        "js_spread_rest"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/structuredClone"
    ],
    "bad_code": "// React anti-pattern — direct state mutation:\nconst [items, setItems] = useState([]);\nfunction addItem(item) {\n    items.push(item); // Mutates state — React won't re-render\n    setItems(items);\n}",
    "good_code": "// Immutable patterns:\nfunction addItem(item) {\n    setItems(prev => [...prev, item]); // New array — React re-renders\n}\n\n// Sort without mutation:\nconst sorted = [...users].sort((a, b) => a.name.localeCompare(b.name));\n\n// Deep clone:\nconst safeCopy = structuredClone(complexObject);",
    "quick_fix": "Use spread [...arr] or {...obj} for shallow clone. Use structuredClone() for deep clone. Prefer non-mutating array methods (map, filter, slice). Freeze objects with Object.freeze().",
    "severity": "medium",
    "effort": "medium",
    "created": "2026-03-22",
    "updated": "2026-04-05",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_object_mutation_bugs",
        "html_url": "https://codeclaritylab.com/glossary/js_object_mutation_bugs",
        "json_url": "https://codeclaritylab.com/glossary/js_object_mutation_bugs.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Accidental Object Mutation Bugs](https://codeclaritylab.com/glossary/js_object_mutation_bugs) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_object_mutation_bugs"
            }
        }
    }
}