What are side effects in programming?

A side effect is a change in the visible state of a program that occurs outside the return value of a function.

Main types of side effects:

• Modification of global variables or object states.
• Data input/output (reading from a file, writing to the console, network requests).
• Changing the contents of a database.
• Throwing an exception that is not handled within the function.
• Modifying the DOM tree in a browser.
• Calling other functions with side effects.

Example of a pure function (without side effects):

// The function only adds two numbers and returns the result
function add(a, b) {
  return a + b;
}

Example of a function with a side effect (modifying a global variable):

let total = 0;

// The function adds a number and modifies a global variable
function addToTotal(value) {
  total += value; // Side effect: modifying a global variable
  return total;
}

Impact of side effects:

• Complicate testing.
• Make parallel execution of code difficult due to potential data races.
• Make code less predictable and harder to understand.
• May violate principles of functional programming.

In frontend development, side effects are often related to:

• Manipulating the DOM.
• HTTP requests.
• Operations with Local Storage or Session Storage.
• Working with third-party APIs.

Managing side effects is an important task when building reliable and maintainable applications. Patterns such as Redux (with its emphasis on predictable state management and isolating side effects in actions/sagas), or using pure functions where possible, help minimize their negative impact.