== Why is this an issue? Side effects in a module can lead to unpredictable behavior, making the module harder to understand and debug. They complicate testing by requiring complex setup and teardown procedures, reducing the module's reusability since its behavior depends on specific states or external systems. Side effects can also introduce concurrency issues, such as race conditions, and make the codebase harder to maintain and more prone to breaking. Additionally, they increase the complexity and reduce the readability of the code, while breaking encapsulation and leading to tighter coupling between modules. Minimizing side effects helps create more predictable, testable, reusable, and maintainable code. === Code examples ==== Noncompliant code example [source,javascript,diff-id=1,diff-type=noncompliant] ---- console.log('hello world'); if (typeof Array.prototype.map !== 'function') { Array.prototype.map = () => { // Implement polyfill }; } let s = 0; for (let i = 0; i < 10; i++) { s += i; } fetch('/api').then((res) => res.text()); ---- ==== Compliant solution [source,javascript,diff-id=1,diff-type=compliant] ---- export default function () { console.log('hello world'); let s = 0; for (let i = 0; i < 10; i++) { s += i; } fetch('/api').then((res) => res.text()); } ---- == Resources === Documentation * MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules[Modules] * MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import[import] * MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export[export]