Science Knowings: JavaScript Course For Social Media

Side Effects

From Immutability to Side Effects

In our previous session, we explored immutability and copywriting, understanding how to create and manipulate data without modifying its original state.

Today, we dive into a different aspect of programming: side effects — the unexpected consequences that can arise when executing code.

What are Side Effects?

Side effects are actions performed by a function or code block that affect something outside of its immediate scope.

They can modify global variables, DOM elements, or trigger external events.

Examples of Side Effects

  • Printing to the console
  • Writing to a database
  • Making an HTTP request
  • Setting a global variable
  • Modifying the DOM

How Side Effects Impact Programs

  • Unpredictable behavior
  • Difficulty debugging
  • Harder to test and maintain
  • Coupling between different parts of the program

Functional Programming and Side Effects

Functional programming promotes the use of pure functions that have no side effects.

Pure functions take input, perform calculations, and return a result without modifying any external state.

Avoiding Side Effects with Pure Functions

function add(a, b) {
  return a + b;

The add function is pure as it takes two numbers, adds them, and returns the result without modifying any external state.

Immutability and Side Effects

Immutability and side effects are closely related.

By making data immutable, we prevent side effects that could arise from unintended modifications.

Benefits of Avoiding Side Effects

  • Easier debugging
  • Predictable program behavior
  • Simplified testing and maintenance
  • Improved code quality

Challenges of Managing Side Effects

Managing side effects can be challenging, especially in large and complex programs.

It's important to be aware of potential side effects and to use techniques to minimize their impact.

Best Practices for Minimizing Side Effects

  • Identify and isolate side effects
  • Use pure functions where possible
  • Make side effects explicit and intentional
  • Use dependency management techniques
  • Test for side effects

Examples of Managing Side Effects

  • Using local variables
  • Creating new data structures instead of modifying existing ones
  • Using functional programming techniques
  • Leveraging libraries and frameworks

Debouncing and Throttling: Side Effects Under Control

Debouncing and throttling are techniques used to control the frequency of side effects.

Debouncing triggers a function after a specified delay has passed, while throttling limits the number of times a function can be called within a given timeframe.

useEffect Hook: Managing Side Effects in React

React's useEffect hook allows developers to perform side effects in functional components.

It provides a way to manage side effects and cleanup functions associated with a component.

Promises and Side Effects

Promises are used to manage asynchronous operations and their side effects.

Promises provide a way to handle the result of an asynchronous operation when it becomes available, allowing you to trigger side effects accordingly.

Async/Await and Side Effects

The async/await syntax in JavaScript provides a convenient way to write asynchronous code.

It allows developers to write asynchronous code that looks like synchronous code, making it easier to manage side effects.

Next Up: Currying vs Partial Application

In our next session, we'll explore currying and partial application, two advanced functional programming techniques.

We'll learn how these techniques can be used to create more concise and reusable code, and we'll see how they relate to side effects.